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

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

 

上一篇:cesium页面小控件的隐藏


下一篇:利用pixi.js制作精灵动画