SuperMap下切换图层

最新推荐文章于 2023-09-26 21:26:55 发布

八年程序员下岗落魄一年

最新推荐文章于 2023-09-26 21:26:55 发布

阅读量2.8k

点赞数

分类专栏： gis 文章标签： supermap

本文链接：https://blog.csdn.net/u012374381/article/details/77828917

版权

gis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在supermap中做图层切换功能发现比 ol3简单多了，不解释上代码

控件用来控制地图的显示和对交互操作的响应，在没有明确指定的情况下，地图默认添加Navigation、PanZoomBar控件。常见控件如下：

可见控件：

PanZoomBar：地图平移缩放控件，提供对地图的平移和缩放的控制操作。
ScaleLine：比例尺控件，显示地图的比例关系。
LayerSwitcher：地图图层切换控件，可以查看图层信息和控制图层显示。
OverviewMap：地图鹰眼控件，辅助查看地图更大范围的显示。
MousePosition：该控件显示鼠标移动时，所在点的地理坐标。

不可见控件：

Navigation：地图浏览控件，监听鼠标点击、平移、滚轮等事件来实现对地图的浏览操作。
SelectFeature：要素选择控件，监听鼠标悬停，点击事件来选择vector图层上面的要素。
DrawFeatue：要素绘制控件，监听鼠标事件来实现要素的绘制。

1.supermap 构建天地图WMTS服务地图

什么是WMTS服务？
WMTS，切片地图Web服务（Web Map Tile Service）当前版本是1.0.0。该服务符合 OGC（Open Geospatial Consortium，开放地理信息联盟）制定的 WMTS 实现规范。
WMTS 是 OGC 提出的缓存技术标准，即在服务器端缓存被切割成一定大小瓦片的地图，对客户端只提供这些预先定义好的单个瓦片的服务，将更多的数据处理操作如图层叠加等> 放在客户端，从而缓解 GIS 服务器端数据处理的压力，改善用户体验。

SuperMap iClient for JavaScript 支持访问第三方 WMTS 地图服务。本例针对天地图的 WMTS 服务进行调用演示。

天地图官网提供的服务资源：http://www.tianditu.com/service/query.html

Step1：这次先贴出演示代码，再做剖析。

layerMarker = new SuperMap.Layer.WMTS({
                name: "cva",  //WMTS服务名称。
                url: "http://t0.tianditu.com/cva_c/wmts",  //WMTS图层的服务地址，必设属性。
                layer: "cva",  //图层名称。
                style: "default",  //发布的图层样式，默认为”default”。 
                matrixSet: "c",  //发布的标识符矩阵集，必设属性。
                format: "tiles",  //图像的MIME类型，默认为 “image/png”。
                requestEncoding: "KVP"  //请求编码。可以是“REST”或者“KVP”，默认为”KVP”。
            });

2.加载服务端数据并且换

var map, layerDay, layerNight,bt=false;
            var url1="http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/世界地图_Day";
            var url2 ="http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/世界地图_Night";
            function init(){
                map = new SuperMap.Map("map",{controls: [
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.OverviewMap(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    })], allOverlays: false
                });
                layerDay = new SuperMap.Layer.TiledDynamicRESTLayer("世界地图_Day", url1, {transparent: true, cacheEnabled: true});
                layerDay.events.on({"layerInitialized":addLayer1});
            }
            function addLayer1()
              {
                 layerNight = new SuperMap.Layer.TiledDynamicRESTLayer("世界地图_Night", url2, {transparent: true, cacheEnabled: true});
                 layerNight.events.on({"layerInitialized":addLayer2});
               }
            function addLayer2()
              {
                 layerDay.isBaseLayer=true;
                 layerNight.isBaseLayer=true;
                 map.addLayers([layerDay,layerNight]);
                  map.setCenter(new SuperMap.LonLat(109.797986,39.628674), 6);
              }
            function changeMap() {
                if (bt == false) {
                     layerDay.setVisibility(false);
                     layerNight.setVisibility(true);
                     map.setBaseLayer(layerNight);
                     bt = true;
                  } else if (bt == true) {
                   layerDay.setVisibility(true);
                   layerNight.setVisibility(false);
                   map.setBaseLayer(layerDay);
                   bt= false;
               }
            }

<div id="toolbar">
            <input id="btn" class="btn" type="button" value="底图切换" οnclick="changeMap()" />
        </div>
        <div id="map"></div>

源代码下载链接

http://download.csdn.net/download/u012374381/9962755