SuperMap iClient for JavaScript image出圖

SuperMap iClient for JavaScript 客戶端基於openlayers 開發。javascript

目前最高版本爲811,9D產品後推薦客戶使用leaflet、openlayers客戶端開發。html

 

問題說明: java

 iClient for JavaScript(classic)在客戶端作動態出圖選擇SuperMap.Layer.TiledDynamicRESTLayer,對接 SuperMap iServer 的 REST 地圖服務的分塊動態柵格圖層。簡單說就是加載iServer發佈的地圖服務在客戶端用柵格瓦片出圖。緩存

一、默認的瓦片尺寸是256*256,地圖數據較大,不常常更新的狀況,建議使用緩存,客戶端的請求直接訪問iServer端配置的緩存。須要開啓iServer端和客戶端的參數,以及對應比例尺。ide

二、1中適合不怎麼變化的地圖數據,如底圖。但有一些業務圖層,因爲常常性更新數據,則不能使用緩存,須要動態更新。但一屏幕256*256的瓦片若是加上底圖服務,會出現地圖加載一塊一塊顯示,卡頓不流暢。url

 

解決方法:spa

根據超圖API,SuperMap.TiledDynamicRESTLayer繼承與SuperMap.CanvasLayer,SuperMap.CanvasLayer繼承與SuperMap.Layer.Grid。在Grid的屬性找到了singletile的屬性。rest

使用範例以下:code

 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
相關文章
相關標籤/搜索