SuperMap iClient for JavaScript image出图

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="width: 1500px;height: 750px"></div>
49 </body>
50 
51 </html>

View Code

SuperMap iClient for JavaScript image出图

猜你喜欢