OpenLayers2.13.1知識整理

 

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

因玩webgis只有一周左右，肯定很水~~

我資料中的目錄結構如下：

html

　　map

　　　　js（自己封裝的js目錄）

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

　　　　　　ol2

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

　　　　sdk

　　　　　　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

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

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

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

比較常用control：

　　map.addControl(new OpenLayers.Control.Navigation());//鼠標導航，包括平移放大縮小，觸摸事件等

　　map.addControl(new OpenLayers.Control.ZoomBox());// 拉框縮放控件

 　　map.addControl(new OpenLayers.Control.PanZoomBar({position:new OpenLayers.Pixel(2,6)}));//平移縮放工具條 左上

　　map.addControl(new OpenLayers.Control.MousePosition());//顯示鼠標所在位置坐標  右下

　　map.addControl(new OpenLayers.Control.ScaleLine());//比例尺

　　map.addControl(new OpenLayers.Control.Permalink());//永久鏈接，即該鏈接可以定位到當前位置及縮放級別

　　map.addControl(new OpenLayers.Control.KeyboardDefaults());//鍵盤按鍵操作控件

 

 

其他的就不說了，自己下載示例直接看源碼，注釋很少~~