I am having performance issue in my application. My feature layer has 220 polygons, but when I load the map with the feature layer, the browser hangs. On the advice of forum experts, I have now developed cached services, but I don't know what to do with it. As far I know, the cache service loads PNG file. So for each extent or zooming, we have to load different levels of map. Is this right?
Secondly, I want to add interactive feature to the map where I want the user to be able to select some countries on the map. So when they click on the map, I can do some javascript action. For this to happen, I have to load the feature layer and then add my onclick functionality. Can I achieve this with Cache service? Do i have to add Feature Layer to the basemap? Please explain.
Below is Rest service
Map Name: Layers
Legend
All Layers and Tables
Dynamic Legend
Dynamic All Layers
Layers:
WorldCountries_50K (0)
WorldCountries_100K (1)
WorldCountries_250K (2)
WorldCountries_500K (3)
Description:
Copyright Text:
Spatial Reference: 102100 (3857)
Single Fused Map Cache: true
Tile Info:
Height: 256
Width: 256
DPI: 96
Levels of Detail: 20
Level ID: 0 [ Start Tile, End Tile ]
Resolution: 156543.03392800014
Scale: 5.91657527591555E8
Level ID: 1 [ Start Tile, End Tile ]
Resolution: 78271.51696399994
Scale: 2.95828763795777E8
Level ID: 2 [ Start Tile, End Tile ]
Resolution: 39135.75848200009
Scale: 1.47914381897889E8
Level ID: 3 [ Start Tile, End Tile ]
Resolution: 19567.87924099992
Scale: 7.3957190948944E7
Level ID: 4 [ Start Tile, End Tile ]
Resolution: 9783.93962049996
Scale: 3.6978595474472E7
Level ID: 5 [ Start Tile, End Tile ]
Resolution: 4891.96981024998
Scale: 1.8489297737236E7
Level ID: 6 [ Start Tile, End Tile ]
Resolution: 2445.98490512499
Scale: 9244648.868618
Level ID: 7 [ Start Tile, End Tile ]
Resolution: 1222.992452562495
Scale: 4622324.434309
Level ID: 8 [ Start Tile, End Tile ]
Resolution: 611.4962262813797
Scale: 2311162.217155
Level ID: 9 [ Start Tile, End Tile ]
Resolution: 305.74811314055756
Scale: 1155581.108577
Level ID: 10 [ Start Tile, End Tile ]
Resolution: 152.87405657041106
Scale: 577790.554289
Level ID: 11 [ Start Tile, End Tile ]
Resolution: 76.43702828507324
Scale: 288895.277144
Level ID: 12 [ Start Tile, End Tile ]
Resolution: 38.21851414253662
Scale: 144447.638572
Level ID: 13 [ Start Tile, End Tile ]
Resolution: 19.10925707126831
Scale: 72223.819286
Level ID: 14 [ Start Tile, End Tile ]
Resolution: 9.554628535634155
Scale: 36111.909643
Level ID: 15 [ Start Tile, End Tile ]
Resolution: 4.77731426794937
Scale: 18055.954822
Level ID: 16 [ Start Tile, End Tile ]
Resolution: 2.388657133974685
Scale: 9027.977411
Level ID: 17 [ Start Tile, End Tile ]
Resolution: 1.1943285668550503
Scale: 4513.988705
Level ID: 18 [ Start Tile, End Tile ]
Resolution: 0.5971642835598172
Scale: 2256.994353
Level ID: 19 [ Start Tile, End Tile ]
Resolution: 0.29858214164761665
Scale: 1128.497176
Format: PNG32
Compression Quality: 0.0
Origin: X: -2.0037508342787E7
Y: 2.0037508342787E7
Spatial Reference: 102100 (3857)
Initial Extent:
XMin: -2.6548096424178407E7
YMin: -1.4376721731989654E7
XMax: 2.204125777392E7
YMax: 2.400182614911706E7
Spatial Reference: 102100 (3857)
Full Extent:
XMin: -2.2041257773920003E7
YMin: -3.578420532071707E7
XMax: 2.204125777392E7
YMax: 2.400182614911706E7
Spatial Reference: 102100 (3857)
Units: esriMeters
Supported Image Format Types: PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP
Document Info:
Title:
Author:
Comments:
Subject:
Category:
Keywords:
AntialiasingMode: Fast
TextAntialiasingMode: Force
Supports Dynamic Layers: true
MaxRecordCount: 1000
MaxImageHeight: 2048
MaxImageWidth: 2048
Supported Query Formats: JSON, AMF
Min Scale: 5.91657527591555E8
Max Scale: 1.8489297737236E7
HTML code
Display Different Map Services Based on Zoom Level
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
<script src="http://js.arcgis.com/3.6/"></script>
<script>
var map;
// The satellite layer will be visible at zoom levels 0 - 11.
// The streets layer will be visible at zoom levels 11 - 15.
//
// Both are visible at zoom level 11.
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer","dojo/dom",
"dojo/domReady!"
], function(
Map, ArcGISTiledMapServiceLayer, dom
) {
var customLods = [];
var loadCount = 0;
// satellite imagery from ArcGIS Online, use levels 0 - 11
var satellite = new ArcGISTiledMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_WMS_Cached_v2/MapServer", {
displayLevels: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
});
satellite.on("load", addLods);
satellite.on("click","alert('hi')");
// street Map service from ArcGIS Online, use levels 11 - 15
/* var streets = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
displayLevels: [11, 12, 13, 14, 15 ],
opacity : 0.75
});
streets.on("load", addLods);*/
// popuplate an array with zoom levels
function addLods(evt) {
customLods = customLods.concat(evt.layer.tileInfo.lods);
loadCount++;
if (loadCount === 1) {
initMap();
}
}
// create the map and use the custom zoom levels
function initMap() {
console.log(" init map");
map = new Map("mapDiv", {
lods : customLods
});
map.addLayer(satellite);
try{
var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
console.log(" adding neghbordhoods");
var infoTemplate1 = new esri.InfoTemplate("fdsfd", "Sdfd");
var featureLayer1 = new esri.layers.FeatureLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_WMS_Cached_v2/MapServer/0",{
infoTemplate: infoTemplate1,
id: "sd_neighborhoods"
});
dojo.connect(featureLayer1, "onLoad", function(){
console.log("feture layer added ");
//myMap.addLayer(featureLayer1);
require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
on(featureLayer1, "click", function(evt) {
console.log(" added ");
// clears current selection
map.graphics.clear();
// create new graphic with selected graphic's geometry
var graphic = new Graphic(evt.graphic.geometry);
// create a new symbol for the graphic
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
// add symbol to the graphic
graphic.setSymbol(sfs);
// map the graphic to the map
map.graphics.add(graphic);
});
});
});
}catch(e){
console.log("error "+e);
}
// map.addLayer(streets);
}
//Report which layer is being shown
function changeScale(evt) {
dom.byId("scale").innerHTML = "Level: <i>" + evt.lod.level;
if (evt.lod.level < 11) {
dom.byId("visibleLayer").innerHTML = "Layer: <i>Imagery</i>";
} else if (evt.lod.level == 11) {
// both layers are loaded
dom.byId("visibleLayer").innerHTML = "<i>Both layers currently visible</i>";
} else {
dom.byId("visibleLayer").innerHTML = "Layer: <i>Streets</i>";
}
}
});
</script>
Best Answer
1) You must cache base map (first service). You can cache all data or "cache on demand". Also you can set the number of layers in your map and scales for each layer.
2) You must create feature class in sde database. And publish it. (it will be the second service)
That's I do. But some people use only one service.