OpenLayers2.13.1知识整理

2022-12-13 17:11:01

对于地图的默认加载等，网上很多资料，就不细说了，主要整理解决一些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 &copy; "

         ,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());//键盘按键操作控件

其他的就不说了，自己下载示例直接看源码，注释很少~~

码农公寓

相关文章