OpenLayers2.13.1知識整理

時間 2019-12-14

標籤 openlayers2.13.1 openlayers 知識整理简体版

原文原文鏈接

對於地圖的默認加載等，網上不少資料，就不細說了，主要整理解決一些api不明顯或不全的內容css

因玩webgis只有一週左右，確定很水~~html

我資料中的目錄結構以下：web

htmlapi

　　map服務器

　　　　js（本身封裝的js目錄）jsp

　　　　　　dswork.map.js（自定義的全局api接口，僅上傳了部分）ide

　　　　　　ol2工具

　　　　　　　　ol2.js（針對dswork.map.js接口的OpenLayers2.13.1的實現）this

　　　　sdkspa

　　　　　　ol2（解壓openlayers2.13.1的全部文件到此）

　　　　　　　　img（覆蓋了的圖片）

　　　　themes

　　　　　　img（示例使用的一些圖片）

　　　　　　map.css（本身頁面上封裝的css文件，用於覆蓋和設置地圖的全局樣式）

　　　　indexol2.html地圖示例頁面

相關下載：整個示例下載 (僅部分示例)

注：css中，把OpenLayers.Control.ScaleLine控件的比例尺下半部分給設置爲不可見了

xy使用EPSG:3857，返回和設置的均改用經緯度值EPSG:3857

修改鷹眼樣式（只須要修改小部分css便可，不須要從新制做插件，詳看map.css）

拉框放大縮小（非開發版api對拉框縮小是沒有描述的，只須要簡單設置ZoomBox組件的out屬性便可）

自定義地圖的縮放級別（包括導航條的長度、可縮放範圍）

　　api自己並不支持（多是我沒發現），因此地圖load時，初始化參數自定義增長minzoom和maxzoom用於設置縮放的最小級別和最大級別

　　須要修改map對應的三個默認方法isValidZoomLevel、getNumZoomLevels和getMinZoom

1 map.isValidZoomLevel = function(zoomLevel) {
2     var valid = ( (zoomLevel != null) && (zoomLevel >= this.options.minzoom) && (zoomLevel <= this.options.maxzoom) );
3     return valid;
4 };
5 map.getNumZoomLevels = function(){return this.options.maxzoom+1;};
6 map.getMinZoom = function(){return this.options.minzoom;};

View Code

使用自定義瓦片地圖，可以使用OpenLayers.Layer.XYZ，而且支持多個地址引用，用於支持多服務器響應，在引入的地圖中，設置numZoomLevels爲自定義的（maxzoom+1）值

 1 var esriMap = new OpenLayers.Layer.XYZ("捷泰地圖", [
 2         "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/${z}/${y}/${x}"
 3         //,"http://127.0.0.1:777/web/gis.jsp?z=${z}&x=${x}&y=${y}"
 4         //,"http://127.0.0.1:777/web/gis.jsp?z=${z}&x=${x}&y=${y}"
 5         //,"http://127.0.0.1:777/web/gis.jsp?z=${z}&x=${x}&y=${y}"
 6     ], {
 7         attribution:"ArcGIS Tiles &copy; "
 8         ,sphericalMercator:true
 9         ,wrapDateLine:false
10         ,numZoomLevels:v.maxzoom+1
11     }
12 );
13 map.addLayer(esriMap);