<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>layers</title> <!--<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>--> <!--<script src="https://js.arcgis.com/4.11/"></script>--> <!--我的接口。--> <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/esri/themes/light/main.css"> <script src="http://localhost:8080/arcgis_js_v411_api/arcgis_js_api/library/4.11/dojo/dojo.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #layerToggle { position: absolute; top: 20px; right: 20px; z-index: 99; background-color: white; border-radius: 8px; padding: 10px; opacity: 0.75; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/layers/TileLayer" ], function(Map, SceneView, TileLayer) { /***************************************************************** * 创建两个TileLayer实例。 一个实例指向 * 一个缓存地图服务,该服务描述美国男性人口。另一个实例 * 指向路网的一个图层。 *****************************************************************/ var transportationLayer = new TileLayer({ url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer", // id,属性可以用来唯一识别该层。 id: "streets", visible: false }); var housingLayer = new TileLayer({ url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer", id: "ny-housing", opacity: 0.9 // 透明度。 }); // 创建地图。 var map = new Map({ basemap: "oceans", // 底图。 layers: [housingLayer] // 其他图层。 }); // 添加路网层。 map.add(transportationLayer); // 创建三维视图。 var view = new SceneView({ container: "viewDiv", map: map }); // 地图处理层的数据,而视图和层视图则负责层的呈现。 view.on("layerview-create", function(event) { if (event.layer.id === "ny-housing") { // 在这里探索人口层视图的属性。 console.log("男性人口层视图创建了!", event.layerView); } else if (event.layer.id === "streets") { // 在这里探索路网层的层视图的特性。 console.log("路网层视图创建了!", event.layerView); } }); /***************************************************************** * 层是承诺,当加载或其所有属性可能被访问时解析。 * 一旦人口层加载,视图将动画到它的初始范围。 *****************************************************************/ view.when(function() { housingLayer.when(function() { view.goTo(housingLayer.fullExtent); }); }); var streetsLayerToggle = document.getElementById("streetsLayer"); /***************************************************************** * 该层的可视属性可用于在视图中切换该层的可见性。 * 当可见性关闭,图层仍然是地图的一部分, * 这意味着您可以访问它的属性并执行分析,即使它是不可见的。 *******************************************************************/ streetsLayerToggle.addEventListener("change", function() { transportationLayer.visible = streetsLayerToggle.checked; }); }); </script> </head> <body> <div id="viewDiv"></div> <span id="layerToggle"> <input type="checkbox" id="streetsLayer" /> 路网 </span> </body> </html>
layers.html
最新推荐文章于 2021-07-07 20:49:41 发布