zoukankan      html  css  js  c++  java
  • Rest服务下,二维地图的加载与图层显隐控制

    map2D.JS代码:初始化二维地图,并加载所有其他图层

    下方红色"ZHDGX2D"可自定义命名,随便起。红色"mapContainer"为二维地图的div的id 

    $(function(){
    //一引入该js文件后,页面加载完毕后,直接执行该方法
        init2DMap();
     });
     
    // 声明加载二维地图变量,将map设置为全局变量,因为后面图层控制,要从map.layers中取到图层
    var map, baseLayer;
    //maps后面即为要加载的地图,底图设为常量
    const url = "http://172.16.8.123:8099/iserver/services/map-ZHDGX/rest/maps/";
    //要叠加的layer图层
    const array2DMap = "["PL_YS@PipeLine","PL_TR@PipeLine","PL_GD@PipeLine","PL_JS@PipeLine","PL_WS@PipeLine","PL_XH@PipeLine","PL_DX@PipeLine","PL_LT@PipeLine","PL_YD@PipeLine","PL_JK@PipeLine","PL_DT@PipeLine","PL_LD@PipeLine","PL_RL@PipeLine"]";
    // 加载二维地图
     function init2DMap() { 
              map = new SuperMap.Map("mapContainer", { controls: [ new SuperMap.Control.Navigation(),          // 放大缩小控件 new SuperMap.Control.Zoom(),
         // 点击地图显示坐标点
    new SuperMap.Control.MousePosition() ] }); // 定义layerWorld图层,获取图层服务地址 baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("ZHDGX2D", url+"ZHDGX2D", { transparent : true, cacheEnabled : true }, { maxResolution : "auto" }); // 为图层初始化完毕添加layerInitialized事件 baseLayer.events.on({"layerInitialized":function(){ debugger; addLayer(); debugger;     //添加所有图层 addAllRestLayer(array2DMap); }}); } function addLayer() { debugger; //添加底图 map.addLayer(baseLayer); // 设置中心点,缩放比例 map.setCenter(new SuperMap.LonLat(113.8 , 34.79), 1); } //添加所有管线图层,WMS服务 function addAllRestLayer(layerNames){ for(var i = 0;i<layerNames.length;i++){ debugger; //循环添加管线图层 var pipelineLayer = new SuperMap.Layer.TiledDynamicRESTLayer(layerNames[i], url+ layerNames[i], {transparent:true,cacheEnabled:true},{maxResolution:"auto", useCanvas: false, useCORS: true}); debugger; pipelineLayer.isBaseLayer = false; map.addLayer(pipelineLayer);     //设置添加的layer图层为显示 pipelineLayer.setVisibility(true); } }

    初始化地图后,在此基础上添加和隐藏图层:

    需要注意的几点,

    1.想控制的图层要从map.layers中取到。

    2.图层加载完毕后,如果要进行隐藏,有两种方法,removeLayer和setVisibility,前者直接移除图层,后者设置为false,即图层不可见,但并不是删除。但是,虽然隐藏可以实现,

    但是想要重新显示刚才隐藏的图层就有点尴尬了,重点来了。如果隐藏的时候用第一种方法,直接移除,添加的时候想用addLayer方法,会出现bug,图层并没有明显显示,甚至页面根本没反应。(就算正常出现,来回添加图层,也要消耗内存,会慢,这都是要考虑到的。)

    那setVisibility方法怎么样呢,设置为true不就显示了吗?错,因为,你已经移除了图层,页面没有这个图层,所以你没有办法控制。

    那么如果,隐藏的时候用第二种方法呢,将图层设置为false,也不行。显示的时候用同方法设置为true还是不灵。

    所以终极办法就是,用setOpacity方法,隐藏就把透明度设为0,显示就把透明度设为1。

                           //二维添加图层
                            for (var s = 0; s < map.layers.length; s++) {
                                var layer2D = map.layers[s];
                                var layer2DName = map.layers[s].name;
                                if (layer2DName == "ZHDGX2D") {
                                    basic2D = layer2D;
                                }
                                if (name.indexOf(layer2DName) != -1) {
                                    // map.removeLayer(layer2D);
                                    //layer2D.setVisibility(false);
                                    layer2D.setOpacity(1);
                                    if (s == map.layers.length) {
                                        // map.removeLayer(basic2D);
                                        //basic2D.setVisibility(false);
                                       //设置为0即为透明度0隐藏,设置为1即为显示
                                        basic2D.setOpacity(1);
                                    }
                                }
                            }    
  • 相关阅读:
    Android 按键消息处理Android 按键消息处理
    objcopy
    SQLite多线程读写实践及常见问题总结
    android动画坐标定义
    Android动画效果translate、scale、alpha、rotate
    Android公共库(缓存 下拉ListView 下载管理Pro 静默安装 root运行 Java公共类)
    Flatten Binary Tree to Linked List
    Distinct Subsequences
    Populating Next Right Pointers in Each Node II
    Populating Next Right Pointers in Each Node
  • 原文地址:https://www.cnblogs.com/wanlige/p/12485871.html
Copyright © 2011-2022 走看看