上篇实现了根本舆图加载以及二三维模式切换;本篇的内容则是图层打点控制,从两个差别角度来实现,分袂是直接绑定arcgis api供给的图层打点widget(LayerList)以及自界说图层打点图标的点击事件来控制图层的隐藏或者显示。不管是LayerList或者自界说图标点击打点图层的实现方法,核心都是按照Layer的属性visible来设置true或者false来控制的。
一、谈谈本篇本身认为对照重要的几个专业术语名称的理解: 1.TileLayerTileLayer,加载缓存舆图处事的瓦片图层,缓存的处事访谒缓存中的瓦片,而不是动态地绘制图像。由于缓存机制,所以衬着的速度比MapImageLayers快多了,适合叠加瓦片切图使用,而不是前端动态衬着的。
2.MapImageLayerMapImageLayer,允许显示和分析在一个舆图处事界说层数据,输出图像取代特征。舆图处事图像是按照请求动态生成的。
3. ElevationLayerElevationLayer,即为加载地形高程的图层,,应用在三维模式下显示。
4. SceneLayerSceneLayer,即为加载三维场景图层,应用在三维模式下显示。
5. LayerListLayerList,图层列表控制控件,供给了一种要领来显示一个列表的层以及供给控制图层隐藏或者显示。
二、LayerList具体实现思路: 1.上面描述的几个类型图层有个属性listMode,默认show,便是这些图层叠加在舆图上,默认是在LayerList里面了的,要是LayerList创建的话 2.配置图层信息:/*图层配置*/ MapConfig.feconomic_sublayers = [ {id: 35,title:"行政区划",visible:false,sublayers:[ {id: 38,title:"都市界线",visible: false},{id: 37,title:"省界",visible: true}]}, {id: 28,title:"海洋规划",visible:true,sublayers:[ {id:34,title:"海岸根基成果区 ",visible: true},{id: 33,title:"经济合作圈",visible: true},{id: 32,title:"经济成长区",visible: true},{id: 31,title:"经济湾区",visible:true},{id: 30,title:"经济岛群",visible: true}]}, {id: 27,title:"海域权属",visible:false}, {id: 24,title:"岸线资源",visible:false,sublayers:[ {id: 26,title:"海岸带",visible: true},{id: 25,title:"岸线",visible: true}]}, {id: 14,title:"海洋生态掩护 ",visible:false,sublayers:[ {id:23,title:"海洋成果区划 ",visible: true}, {id:22,title:"限制开发区 ",visible: true}, {id:21,title:"禁止开发区 ",visible: true}, {id:18,title:"海洋自然掩护区 ",visible: true,sublayers:[{id:20,title:"海洋自然掩护区 ",visible: true},{id:19,title:"海洋自然掩护区点 ",visible: true}]}, {id:15,title:"海洋出格掩护区 ",visible: true,sublayers:[{id:17,title:"海洋出格掩护区 ",visible: true},{id:16,title:"海洋出格掩护区点 ",visible: true}]} ]}, {id: 9,title:"渔业资源 ",visible:false,sublayers:[ //{id:13,title:"渔业资源",visible: false}, {id:12,title:"渔场",visible: true}, {id:11,title:"渔区",visible: true}, {id:10,title:"渔港",visible: true} ]}, {id: 8,title:"地质钻孔",visible: false}, {id: 7,title:"不雅观测站",visible: false}, {id: 6,title:"海岛",visible: false}, {id: 2,title:"海洋资源 ",visible:false,sublayers:[ {id:5,title:"其他资源",visible: true}, {id:4,title:"石油资源",visible: true}, {id:3,title:"矿产资源",visible: true} ]}, //{id: 1,title:"海洋企业",visible:false}, {id: 0,title:"视频监控",visible:false} ];
3.图层创建:var waterdepthLayer = new TileLayer({ url: MapConfig.waterdepthLayerUrl, title:"水深栅格图", opacity:0.45, visible:false, id: "BaseMapWater" }); var waterLayer = new MapImageLayer({ url: MapConfig.waterLayerUrl, title:"叶绿素", opacity:0.45, visible:false, id: "BaseMapWater" }); var feconomicLayer = new MapImageLayer({ url: MapConfig.FEconomiclayerUrl, title:"专题图层", visible:true, sublayers: MapConfig.feconomic_sublayers }); var elevationLayer = new ElevationLayer({ url: MapConfig.elevationLayer.Url }); var map = BX.MapVars.map = new Map({ basemap: imgBasemap, layers:[waterdepthLayer,hdyxLayer,waterLayer,feconomicLayer], ground: new Ground({layers:[elevationLayer,hddxLayer]}) });
4.LayerList创建: