SuperMap iClient for JavaScript image出图

Posted yaohuimo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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出图的主要内容，如果未能解决你的问题，请参考以下文章

SuperMap iClient3D for WebGL教程（地形篇）-CesiumTerrainProvider

SuperMap iClient3D for WebGL教程（模型篇）-倾斜摄影

无插件猴赛雷！SuperMap iClient3D for WebGL的4大“网红 ”潜质

vue 使用 supermap iclient-classic

原创SuperMap iServer搭建

supermap 能与arcgis兼容吗