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

最新推荐文章于 2018-02-11 14:57:55 发布

啄慕鸟kevinzeng

最新推荐文章于 2018-02-11 14:57:55 发布

阅读量369

点赞数

分类专栏： WebGIS地图开发解读WebGIS应用开发与领域应用

本文链接：https://blog.csdn.net/peckerzeng/article/details/79287894

版权

解读WebGIS应用开发与领域应用同时被 2 个专栏收录

40 篇文章 6 订阅

订阅专栏

WebGIS地图开发

21 篇文章 1 订阅

订阅专栏

地图开发的过程中，如果我们有很多的资源划分成了不同的图层，那往往有一个很简单的需求就是在需要的时候才显示目标图层，在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截图：
这里写图片描述
至此，关于业务图层的显示与否的功能需求到这里就完成了。如果你对这个面板的色彩不满意，甚至对这个面板不满意，那么可以自己去定义一个就可以了。

啄慕鸟kevinzeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
0303-二维地图开发-业务图层那么多，能不能只在需要的时候才显示

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

扫一扫