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

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 © " 8 ,sphericalMercator:true 9 ,wrapDateLine:false 10 ,numZoomLevels:v.maxzoom+1 11 } 12 ); 13 map.addLayer(esriMap);

OpenLayers2.13.1知识整理

相关推荐