如何使用iClient for JavaScript叠加地图
来源:互联网 发布:阿里云域名备案服务号 编辑:程序博客网 时间:2024/05/21 21:46
如何使用iClient for JavaScript叠加地图
作者:Hyacinth
本文主要介绍使用iclient for JavaScript加载rest图层,以及图层叠加中应注意的参数的设置,帮助你快速的找到问题,正确进行地图叠加。
当你刚接触SuperMap iServer Java,你可能会遇到下面的情况:
1.为什么在SuperMap iDesktop中显示正常的地图,经过iServer发布后,直接使用Flash,JavaScript浏览,出图空白,比例尺信息又是正常的?
2.直接在iserver的JavaScript浏览是正常的,自己参照示例代码对接地图服务,同样出图空白?
其实,这两种情况都是因为地图中心点的问题,我们先来看下面这张图
这个大家应该不会陌生,每个rest地图服务的地图都会有这样的详细信息页面。
出现上面第一种情况,主要是因为地图的全幅范围的问题,iserver自带的浏览都是根据全幅范围去计算的比例尺以及中心点信息,这时,你就可以按F12,打开浏览器的开发者工具,在控制台输入map.getCenter();就会得到当前地图的中心点,可以把这个数值与上面的中心点比较,你会发现差距还是挺大的;然后可以直接在控制台输入正确的中心点map.setCenter(new SuperMap.LonLat(125.13 , 46.62), 3);效果如图所示。(这种情况是因为在配图的时候,地图或者数据集的范围不太准确,可在iDesktop重新计算范围,或者是数据集中存在异常的数据导致)
那么第二种情况也就迎刃而解了,去修改中心点的值即可。这里有一个特殊情况,就是当地图的全幅范围很小的时候,
前面怎样去加载rest地图服务,对接WMTS图层在下面会讲到,但实际开发中,图层叠加即多幅地图叠加显示运用更多。这里要提醒大家一下,进行图层叠加的时候,一定要保证地图的坐标系一致。
那下面就以实际的例子出发,讲解几种不同的地图叠加
一.rest + rest
iserver自带的图层叠加范例,就属于这种场景,访问http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/examples.html#overlayLayer,点击显示源码即可查看,
这里就不列出一一讲解了,注意两点就可以了,一是map的allOverlays属性设置为true;二是一定要使用异步加载的方法,即需要监听地图加载完成的事件,否则会出现两幅地图加载比例尺错乱显示等现象。
二.wmts+rest 、SuperMap Cloud+rest
如果你对wmts服务不太了解,你可以查看http://support.supermap.com.cn/supportblog/Blog/tabid/88/EntryId/96/-SuperMap-iClient-WMTS.aspx 这个地址,里面对wmts做了详细的介绍。这里就简单介绍下JavaScript是如何对接的。
图层的url、matrixSet、layer、style、matrixIds、resolutions为必设属性. 当matrixIds设置字符串数组时,传入矩阵标识符列表,所设置的各级图层矩阵标识符要求与地图分辨率resolutions一一对应; 当matrixIds设置为对象数组时,此数组应与WMTS capabilities 中声明矩阵的描述一致,对象属性参考matrixIds属性描述。 如果未设置matrixIds,则矩阵标识符(identifier)默认为地图缩放级别的interger值:”0”、”1”、”2”…等。 resolutions属性继承于父类layer, 用户在创建WMTS图层时需要依照服务端出图的标准比例尺集( GlobalCRS84Scale、 GlobalCRS84Pixel、 GoogleCRS84Quad、 GoogleMapsCompatible)设置此属性,否则在出图时可能会出现地图偏差等问题。
下面是初始化wmts的代码片段
//wmts或许所需要的matrixID信息 var matrixIds = []; for (var i=0; i<15; ++i) { matrixIds[i] = {identifier:i}; };//当前图层的分辨率数组信息,和matrixIds一样,需要用户从wmts服务获取并明确设置,resolutions数组和matrixIds数组长度相同var resolutions = [165664.43905455674,82832.2195272785,41416.10976363925, 20708.054881819593,10354.027440909796,5177.0137204548855, 2588.506860227448,1294.2534301137255,647.1267150568613, 323.5633575284321,161.78167876421546,80.89083938210773, 40.44541969105401,20.222709845526946,10.111354922763473]; //新建wmts图层 layer = new SuperMap.Layer.WMTS({name: "wmts图层", url: wmtsurl, layer: "China", style: "default", matrixSet: "Custom_China", format: "image/png", resolutions:resolutions, matrixIds:matrixIds, opacity: 1, requestEncoding:"KVP"});
你不必填写所有的分辨率,可以自定义缩放级别,但是得保证resolutions数组的值与matrixIds数组中的identifier是一一对应的;同时当你的地图的全幅范围不是默认的全球范围时,需要设置map.maxExtent为相应的值。
下面就是添加rest图层,j代码片段如下:
//实例化rest图层 RestLayer=new SuperMap.Layer.TiledDynamicRESTLayer("REST图层",resturl,{transparent:true},{resolutions:[165664.43905455674,82832.2195272785,41416.10976363925, 20708.054881819593,10354.027440909796,5177.0137204548855, 2588.506860227448,1294.2534301137255,647.1267150568613, 323.5633575284321,161.78167876421546,80.89083938210773, 40.44541969105401,20.222709845526946,10.111354922763473]}); //监听图层信息加载完成事件 RestLayer.events.on({"layerInitialized":addLayer}) } function addLayer(){ //图层添加并显示指定级别 map.addLayers([layer,RestLayer]); map.setCenter(new SuperMap.LonLat(0 , 0), 2); }
可以看出,需要给rest图层设定与wmts对应的resolutions,这样两张地图叠加,就不会产生偏移。效果图如下
以此类推,使用超图云地图,天地图以及通过iserver直接发布的ugcv5,smtiles,mbtiles,mongodb缓存的rest服务叠加自己的矢量地图,由于前两者和wmts一样都属于瓦片地图,有自身的resolutions分辨率数组。因此需要rest图层设置一致的scales或者resolutions。
常见问题解答
1.在SuperMap iDesktop进行配图,若地图属性中勾选了“显示压盖对象”,这时iserver里的JavaScript浏览,会发现和iDesktop不一样,压盖对象并没有显示;这时,需要你通过前端去设置,在JavaScript客户端里,在地图初始化的时候,设置overlapDisplayed为true
//初始化地图 设置overlapDisplayedlayerJingjing = new SuperMap.Layer.TiledDynamicRESTLayer("京津地区地图", url2, {transparent: true, cacheEnabled: true},{overlapDisplayed:true});
如果设置还是不起作用,是因为output下的缓存,将output下的缓存以及浏览器的缓存删除即可。
2.SuperMap iDesktop 8C的地图属性新增了一个叫做“Alpha通道”,这个是在图层有设置透明色或者开启了线性反走样功能,这时需要你勾选上Alphy通道。iserver才能正常显示。
3.在做数据集的编辑的时候,如果本身的地图数据复杂度高,数据量大,实时刷新,地图加载慢;可以将你需要进行地物更新的数据集配成一幅地图A,将其他的数据集配成一幅图B,接着对地图A进行切图,在前端进行叠加显示。
- 如何使用iClient for JavaScript叠加地图
- SuperMap iClient 如何使用 WMTS 地图服务
- 仿百度地图,使用iClient for JavaScript实现客户端量算
- 仿百度地图,使用iClient for JavaScript实现客户端量算
- 浅谈SuperMap iClient for JavaScript中的标签使用
- SuperMap iClient for JavaScript矢量分块图层-地图快速渲染的利器
- 第一次使用iclient for silverlight
- SuperMap iClient 6R(2012) for JavaScript
- 浅谈Supermap iClient for JavaScript弹窗类
- 浅谈iClient for javascript 要素图层
- iClient for JavaScript VectorLayer详细使用指南
- iClient for JavaScript的几种图层显隐控制
- iClient for JavaScript 图层过滤
- iClient for JavaScript---客户端统计专题图
- iClient for Javascript拖拽绘制图标
- 使用Supermap iClient for javascript查询多边形并添加marker和信息框
- SuperMap iClient 6R for Flex 简单操作地图
- 超图IClient for Flex加载天地图经纬度地图
- oracle 游标变量REF Cursor
- 雅虎WEB前端网站优化 -- 34条军规
- VS如何安装WTL模板
- git新手学习和使用
- VB语言5“用户名”与“密码”实验报告
- 如何使用iClient for JavaScript叠加地图
- ucosIII内核文件分析-os_msg.c
- POJ 2778 (AC自动机 矩阵快速幂)
- 从配置文件读取数据连接信息,利用泛型和java反射机制,写一个公共的增删改查数据库操作类
- iOS利用GCDAsyncSocket发送语音,以及语音wav转码amr
- 观察者模式
- Windows释放端口
- linux重启系统
- UIScrollerView上AutoLayout的总结