<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css"
href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.shadow {
/*水平距离 垂直距离 模糊距离 模糊颜色*/
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: "Microsoft YaHei";
height: 300px;
left: 30px;
margin: 5px;
padding: 10px;
top: 30px;
width: 300px;
z-index: 40;
}
#note,
#hint {
font-size: 80%;
}
#note {
font-weight: 700;
padding: 0 0 10px 0;
}
#layerList {
width: 200px;
}
.dojoDndItemOver {
background: #ccc;
}
</style>
<script>
//
var map, usaLayer, infos = {};
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/DynamicLayerInfo", "esri/layers/LayerDataSource",
"esri/layers/LayerDrawingOptions", "esri/layers/TableDataSource",
"esri/Color", "esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
"dojo/dom", "dojo/dom-construct", "dojo/dom-style",
"dojo/query", "dojo/on",
"dojo/parser", "dojo/_base/array", "dojo/dnd/Source", "dijit/registry",
"dijit/form/Button", "dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer, DynamicLayerInfo, LayerDataSource,
LayerDrawingOptions, TableDataSource,
Color, SimpleRenderer,
SimpleFillSymbol, SimpleLineSymbol,
dom, domConstruct, domStyle,
query, on,
parser, arrayUtils, Source, registry) {
parser.parse();
var dynamicLayerInfos;
map = new Map("map", {
basemap: "topo",
center: [-93.636, 46.882],
zoom: 7,
slider: false,
logo: false,
isScrollWheelZoom: false,
isDoubleClickZoom: false
});
var dndSource = new Source("layerList");//用于拖拽
dndSource.on("DndDrop", reorderLayers);
usaLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
"id": "usa"
});
usaLayer.on("load", function (e) {
console.log("spatialReference-->", map.spatialReference);
console.log("e-->", e);
console.log(e.layer === e.target);//true
console.log("e.target-->", e.target);
dynamicLayerInfos = e.target.createDynamicLayerInfosFromLayerInfos();//获取得到dynamicLayerInfos
console.log("layer.dyinfos-->", e.target.dynamicLayerInfos);//undefined
console.log("dynamicLayerInfos-->", dynamicLayerInfos);
//遍历dynamicLayerInfos
arrayUtils.forEach(dynamicLayerInfos, function (info) {
var i = {
id: info.id,
name: info.name,
position: info.id
};
if (arrayUtils.indexOf(usaLayer.visibleLayers, info.id) > -1) {
console.log("usaLayer.visibleLayers->", usaLayer.visibleLayers);
i.visible = true;
} else {
i.visible = false;
}
infos[info.id] = i;
});
infos.total = dynamicLayerInfos.length;
console.log("infos.total-->", infos.total);
/**
* infos{0:{id:0,name:"",position:0,visible: true},1:......}
*/
console.log("infos-->", infos);
e.target.setDynamicLayerInfos(dynamicLayerInfos, true);
});
// only create the layer list the first time update-end fires
on.once(usaLayer, "update-end", buildLayerList);///????
map.addLayer(usaLayer);
// add the lakes layer to the existing map service
registry.byId("lakes").on("click", addLakes);
function buildLayerList() {
dndSource.clearItems();
domConstruct.empty(dom.byId("layerList"));
var layerNames = [];
for (var info in infos) {
if (!infos[info].hasOwnProperty("id")) {
continue;
}
// only want the layer's name, don't need the db name and owner name
var nameParts = infos[info].name.split(".");
// console.log("nameParts",nameParts);
var layerName = nameParts[nameParts.length - 1];
console.log(layerName);
var layerDiv = createToggle(layerName, infos[info].visible);
layerNames[infos[info].position] = layerDiv;
}
dndSource.insertNodes(false, layerNames);
}
function toggleLayer(e) {
for (var info in infos) {
var i = infos[info];
console.log("i-->", i);
if (i.name === e.target.name) {
i.visible = !i.visible;
}
}
var visible = getVisibleLayers();
if (visible.length === 0) {
usaLayer.setVisibleLayers([-1]);
} else {
usaLayer.setDynamicLayerInfos(visible);
}
}
console.log("usaLayer-->", usaLayer);
function reorderLayers() {
var newOrder = getVisibleLayers();
usaLayer.setDynamicLayerInfos(newOrder);
}
function addLakes() {
var lakes = "Lakes";
registry.byId(lakes.toLowerCase()).set("disabled", true);
// update global object with layer info
infos[infos.total] = {
id: infos.total,
name: lakes,
position: infos.total,
visible: true
};
infos.total += 1;
buildLayerList();
// layer name in the workspace
var layerName = "ss6.gdb." + lakes;
// create a new dynamic layer info object for the lakes layer
var dynamicLayerInfo = new DynamicLayerInfo();
dynamicLayerInfo.id = dynamicLayerInfos.length;
dynamicLayerInfo.name = layerName;
// can also set things like min/max scale
// create a table data source to access the lakes layer
var dataSource = new TableDataSource();
dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2"; // not exposed via REST :(
dataSource.dataSourceName = layerName;
// and now a layer source
var layerSource = new LayerDataSource();
layerSource.dataSource = dataSource;
dynamicLayerInfo.source = layerSource;
dynamicLayerInfos.push(dynamicLayerInfo);
// set new infos, but don't refresh
// map will be updated when the drawing options are set
var layers = getVisibleLayers();
usaLayer.setDynamicLayerInfos(layers, true);
var drawingOptions = new LayerDrawingOptions();
drawingOptions.renderer = new SimpleRenderer(
new SimpleFillSymbol("solid", null,
new Color([0, 150, 255, 1])
));
var options = [];
options[4] = drawingOptions;
usaLayer.setLayerDrawingOptions(options);
}
function getVisibleLayers() {
// get layer name nodes, build an array corresponding to new layer order
var layerOrder = [];
query("#layerList .dojoDndItem label").forEach(function (n, idx) {
for (var info in infos) {
var i = infos[info];
if (i.name === n.innerHTML) {
layerOrder[idx] = i.id;
// keep track of a layer's position in the layer list
i.position = idx;
break;
}
}
});
// find the layer IDs for visible layer
var ids = arrayUtils.filter(layerOrder, function (l) {
return infos[l].visible;
});
// get the dynamicLayerInfos for visible layers
var visible = arrayUtils.map(ids, function (id) {
return dynamicLayerInfos[id];
});
return visible;
}
function createToggle(name, visible) {
var div = domConstruct.create("div");
var layerVis = domConstruct.create("input", {
checked: visible,
id: name,
name: name,
type: "checkbox"
}, div);
on(layerVis, "click", toggleLayer);
var layerSpan = domConstruct.create("label", {
for: name,
innerHTML: name
}, div);
return div;
}
});
</script>
</head>
<body>
<div style="width: 100%; height: 100%; margin: 0;">
<div id="map">
<div id="feedback" class="shadow">
<h3>Add and Re-order Layers</h3>
<div id="info">
<div id="note">
Note: This sample requires an ArcGIS Server version 10.1 or later map service.
</div>
<div id="hint">
Click and drag a map layer name below to re-order layers. The first layer in the list will be drawn
on top.
</div>
<div><strong>Map Layers</strong></div>
<div id="layerList"></div>
<button id="lakes" data-dojo-type="dijit/form/Button">
Add Lakes
</button>
</div>
</div>
</div>
</div>
</body>
</html>
1917
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
