SuperMap iClient for Javascript地图切换显示

作者：柳惠珠

一.监听地图缩放事件来控制地图显示

这里使用的是缩放操作完成后触发的事件

//changelayer为触发事件后执行的方法名
map.events.on({"zoomend":changelayer});

二.用map的removeLayer()来移除已经加载的图层，然后新建要替换的图层

function changelayer(e){
console.log(e.object.zoom)//判断当前的缩放级别，当小于5时显示china地图，大于则显示world地图if(e.object.zoom <= 5){if(map.layers[0]){if(map.layers[0].name == "World"){map.removeLayer(layerWorld);layerchina= new SuperMap.Layer.TiledDynamicRESTLayer("china", url2);layerchina.events.on({"layerInitialized": addLayer1});map.events.un({"zoomend":changelayer});}}
}else{if(map.layers[0]){if(map.layers[0].name == "china"){map.removeLayer(layerchina);layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);   layerWorld.events.on({"layerInitialized": addLayer});map.events.un({"zoomend":changelayer});}}}
}
function addLayer(){
map.addLayer(layerWorld);
map.addControl(overviewmap);
map.setCenter(new SuperMap.LonLat(118, 40), 6);     setTimeout('map.events.on({"zoomend":changelayer})',1000);
}
function addLayer1(){
map.addLayer(layerchina);
map.addControl(overviewmap);
map.setCenter(new SuperMap.LonLat(118, 40), 6);        setTimeout('map.events.on({"zoomend":changelayer})',1000);
}

三.在地图上增加鹰眼，鹰眼在构造函数中没有传layer，则使用主图的baselayer。

var overviewmap = new SuperMap.Control.OverviewMap();
//属性minRectSize：鹰眼范围矩形边框的最小的宽度和高度。默认为8pixels
overviewmap.minRectSize = 20;
map.addControl(overviewmap);

四.也可将两个地图都添加到map（这种方式最好坐标系相同或者比例尺相同）
1.控制地图显隐：
可以通过图层的setVisibility()方法来控制图层的显示与隐藏。

layerWorld.setVisibility(true);
layerchina.setVisibility(false);

2.设置图层顺序控制底图
设置map属性allOverlays为false的时候，map是不会讲多个图层进行叠加显示的，显示的是底图即图层顺序索引为0的图层。
可以用map的setLayerIndex()方法来设置图层顺序。

map.setLayerIndex(layerWorld,0);

3.设置map底图
设置map属性allOverlays为false的时候，map是不会讲多个图层进行叠加显示的，显示的是底图，用map的setBaseLayer()设置map的底图

map.setBaseLayer(layerchina);

SuperMap iClient for Javascript地图切换显示相关推荐

SuperMap iClient for JavaScript常见问题解答集锦（十二）
作者:皇皇问:如果您在OpenStack平台中创建虚拟机时出现以下错误信息Build of instance aborted: Flavor is disk is too small for req ...
SuperMap iClient for JavaScript 实现拖动半径进行距离查询
作者:sniper 前一段时间有很多朋友问我,怎么用SuperMap iClient for JavaScript实现类似百度地图或高德地图那样拖动一个按钮选择半径,从而查询附近的地理要素.因此,我们 ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
SuperMap iClient for javaScript 动态线绘制（模拟飞机飞行）
作者:程溯使用方法:SuperMap.Geometry.Point(x, y) SuperMap.Feature.Vector 实现动态线绘制模拟飞机飞行效果使用 iClient 示范代码中的bu ...
SuperMap iClient for OpenLayers图层组控制实现方法
作者:Carlo 前景:在使用SuperMap iClient for JavaScript产品过程中,经常有一些小伙伴会问如何用iClient for OpenLayers实现类似于Classic官 ...
在SuperMap iClient 9D for MapboxGL中使用ECharts和MapV
作者: MR. SuperMap iClient 9D 是云GIS网络客户端开发平台.基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端.集成了领先的开 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
SuperMap iClient 9D for MapboxGL地图风格浅析
作者:dominating ###前言随着SuperMap iServer 9D的发布,iServer增加了许多的新功能,其中之一就是地图服务模块,矢量切片(tileFeature)资源增加了支持 ...
无法加载服务器指定地图,用javascript调用iserver服务器上的地图不显示
我用javascript调用我自己在iserver上发布的地图不显示,但是调用官网教程上的原始地图实例可以显示,代码使用的是教程中快速入门的代码,我修改了地图的目标坐标系为EPSG:3857,并且在调 ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...

SuperMap iClient for Javascript地图切换显示

SuperMap iClient for Javascript地图切换显示相关推荐

最新文章

热门文章