博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
OpenLayers2.13.1知识整理
阅读量:7005 次
发布时间:2019-06-28

本文共 2353 字,大约阅读时间需要 7 分钟。

 

对于地图的默认加载等,网上很多资料,就不细说了,主要整理解决一些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:false10         ,numZoomLevels:v.maxzoom+111     }12 );13 map.addLayer(esriMap);
View Code

比较常用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());//键盘按键操作控件

 

 

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

 

 

转载于:https://www.cnblogs.com/skey_chen/p/5048581.html

你可能感兴趣的文章
java web 人脸识别技术
查看>>
RabbitMQ 与 AMQP路由
查看>>
s闭包(转载)
查看>>
微软整合实验(二):Hyper-V安装和虚拟网络详解
查看>>
linux下解压命令大全
查看>>
Linux学习之CentOS(三十一)--Linux远程管理之SSH、VNC
查看>>
rsync 常见错误 - 总结
查看>>
无线数据采集器设计
查看>>
开通博客的第一天
查看>>
SQL 获取数据
查看>>
android 实现 JNI NDK 入门例子教程+源码
查看>>
微信小程序把玩(三十六)Storage API
查看>>
16次课( lvm讲解、 磁盘故障小案例)
查看>>
Windows Embedded Compact 7数据库开发(下)
查看>>
TypeScript 开发系列(一)——简介与简单创建
查看>>
优化网站架构,最大限度减少重复劳动
查看>>
BeanComparator实现ArrayList中的元素按多个属性复合排序
查看>>
对license数据的挖掘与分析
查看>>
listview当选中某一个item时设置背景色其他的不变
查看>>
debian打包
查看>>