您的位置：首页 > 其它

0303-二维地图开发-业务图层那么多，能不能只在需要的时候才显示

2018-02-08 13:47 260 查看
地图开发的过程中，如果我们有很多的资源划分成了不同的图层，那往往有一个很简单的需求就是在需要的时候才显示目标图层，在GIS专业领域称为图层显示控制。早期之前的API版本如果要对图层进行显示控制，需要编写很多的代码来完成，譬如图层显示控制按钮的位置和样式、显示或隐藏的逻辑判断代码等等。但是图层显示控制的关键点只有一个，就是所有的Layer对象都有一个visible属性，这个属性用于控制图层显示或者隐藏。下面这个截图是官方API里对visible属性的解释：



幸运的是，从4.2版本的API开始，Esri就提供了LayerList组件来帮助开发者完成图层显示与隐藏这一功能需求。我们只需要在上一个samples的基础上再加上以下几行代码就可以实现：



完整的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>二维地图开发-业务图层显示与隐藏</title>
<link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" />
<style>
html,
body,
#mapViewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://192.168.1.144/4.6/dojo/dojo.js"></script>
<script>
var myMap, mapView;
require([
"esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"dojo/domReady!"
], function (Basemap, TileLayer, Map, MapView, MapImageLayer,FeatureLayer,LayerList){

/**
**TileLayer接口负责加载ArcGIS Server发布的MapServer缓存切片服务
**http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer是GeoQ提供的以中国区域为主的缓存切片服务
**TileLayer将作为Basemap对象的一个图层添加到Map对象中。
**/
var layer = new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
});

/**
**Basemap:负责管理所有自定义的基础地图
**我们可以把所有的基础地图都放在Basemap对象中
**每个基础地图服务在Basemap对象中都作为一个图层
**/
var customBasemap = new Basemap({
baseLayers: [layer],
title: "基础地图",
id: "gisBasemap"
});

myMap = new Map({
basemap: customBasemap
});

mapView = new MapView({
center: [-102.56, 37.55], //初始化地图居中时的中心经度、维度
container: "mapViewDiv",    //地图展示区域，对应页面上的DIV
map: myMap,   //MapView包含Map对象
zoom: 5     //初始显示地图级别
});

//美国行政区划地图，以MapServer添加到地图中，调用的是MapImageLayer接口，每次请求时服务器都将根据请求的地图范围动态出图，和缓存切片地图虽然也是MapServer，但是没有预先做好缓存切片。
var usaLayer = new MapImageLayer({url:"http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"});
myMap.add(usaLayer);

//2000年以来俄克拉何马州地震分布图，以FeatureServer添加到地图中，调用的是
var quakesUrl ="http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Oklahoma_earthquakes/FeatureServer/0";
var quakesLayer = new FeatureLayer({url: quakesUrl});
myMap.add(quakesLayer);

//当mapView对象已经构建完毕，并且资源都已经加载完成之后，再执行函数中的代码
mapView.when(function() {
var layerList = new LayerList({view: mapView});
//将LayerList组件添加到mapView的右上方
mapView.ui.add(layerList, "top-right");
});
});


运行效果截图：



上图中右上角就是LayerList组件的面板，可以很清楚的看到，图层的控制粒度可以达到地图服务中的图层级别。上面的例子中，USA地图服务中包含了4个图层，包括Cities、Highways、States和Counties。同时，你会发现LayerList默认会去读取除了基础地图之外的所有图层，这个对于开发者来说还是比较贴心的。

另外一个，开发者比较关心的是LayerList组件中的图层名称能不能自定义的问题，答案肯定是可以的，每一个layer它都有一个属性叫title，譬如下面的MapImageLayer截图：



至此，关于业务图层的显示与否的功能需求到这里就完成了。如果你对这个面板的色彩不满意，甚至对这个面板不满意，那么可以自己去定义一个就可以了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航