SuperMap iClient for JavaScript 客户端基于openlayers 开发。
目前最高版本为811,9D产品后推荐客户使用leaflet、openlayers客户端开发。
问题说明:
iClient for JavaScript(classic)在客户端做动态出图选择SuperMap.Layer.TiledDynamicRESTLayer,对接 SuperMap iServer 的 REST 地图服务的分块动态栅格图层。简单说就是加载iServer发布的地图服务在客户端用栅格瓦片出图。
1、默认的瓦片尺寸是256*256,地图数据较大,不经常更新的情况,建议使用缓存,客户端的请求直接访问iServer端配置的缓存。需要开启iServer端和客户端的参数,以及对应比例尺。
2、1中适合不怎么变化的地图数据,如底图。但有一些业务图层,由于经常性更新数据,则不能使用缓存,需要动态更新。但一屏幕256*256的瓦片如果加上底图服务,会出现地图加载一块一块显示,卡顿不流畅。
解决方法:
根据超图API,SuperMap.TiledDynamicRESTLayer继承与SuperMap.CanvasLayer,SuperMap.CanvasLayer继承与SuperMap.Layer.Grid。在Grid的属性找到了singletile的属性。
使用范例如下:
1 <html> 2 3 <head> 4 <title></title> 5 <script type="text/javascript" src="./libs/SuperMap.Include.js"></script> 6 <script type="text/javascript"> 7 var map, layer, layer1; 8 var url = "http://IP:8090/iserver/services/map-test/rest/maps/map"; 9 var url1 = "http://IP:8090/iserver/services/map-test/rest/maps/test"; 10 11 12 13 14 function initMap() { 15 map = new SuperMap.Map("mapDiv", { 16 controls: [ 17 new SuperMap.Control.ScaleLine(), 18 new SuperMap.Control.MousePosition(), 19 new SuperMap.Control.PanZoomBar({ showSlider: true }), 20 new SuperMap.Control.Navigation({ 21 dragPanOptions: { 22 enableKinetic: true 23 } 24 })], allOverlays: true 25 }); 26 27 layer = new SuperMap.Layer.TiledDynamicRESTLayer("basemap", url, { transparent: true, cacheEnabled: false }, { maxResolution: "auto", transitionEffect: "null", }); 28 layer.events.on({ "layerInitialized": addLayer }); 29 30 } 31 function addLayer() { 32 layer1 = new SuperMap.Layer.TiledDynamicRESTLayer("Business", url1, { transparent: true, cacheEnabled: false }, { singleTile: true },{ maxResolution: "auto", transitionEffect: "null"}); 33 layer1.events.on({ "layerInitialized": addLayer1 }); 34 } 35 function addLayer1() { 36 map.addLayers([layer, layer1]); 37 map.setCenter(new SuperMap.LonLat(90.35, 23.74)); 38 39 var maxExtent = new SuperMap.Bounds(90.260418, 23.687934, 90.467785, 23.785266); 40 map.setExtent(maxExtent); 41 42 43 } 44 </script> 45 </head> 46 47 <body onload="initMap();"> 48 <div id="mapDiv" style=" 1500px;height: 750px"></div> 49 </body> 50 51 </html>