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>