openlayers with Google maps 简单教程
来源:互联网 发布:软件项目计划安排 编辑:程序博客网 时间:2024/06/05 05:07
转自:http://www.07net01.com/2015/07/867199.html
what is openlayer
openlayers是一个高性能、功能全面的地图库。有以下特性:
- 支持各种格式的tiled layers数据
- 使用canvas的高性能vector layer
- 细粒度丰富的交互操作
- 支持commanjs风格
- 开源免费
why use it
一般来说google map api就满足需求了,但是当需要在地图上绘制大量节点时,使用svg来显示部件就会出现很严重的性能问题,一般情况下google maps等的编辑操作也不够流畅。而openlayers使用canvas作为矢量层,大量的点线面信息对于canvas的影响是较小的,而且canvas的交互也更加流畅。
why write this article
- 与高德地图、google maps、百度地图等国内常用地图没有很方便的接口
- 大版本更新后官方文档不全面而且不够清晰,没有guild
- 而且网上简明详细的教程很少
针对以上几点,觉得自己的小经验会对大家有所帮助,可以少走些弯路,也是对自己这几天工作的一个总结。
a simple example(step by step)
下面通过一个简单地小例子介绍openlayers的一些基本用法,以及我觉得重要的地方。
需求
需要使用google map或者高德地图作为底图,在地图上绘制一个矩形,实现矩形的编辑并且能够得到矩形被修改之后的回调函数。大概会涉及到这些技术点:
- 如何与google map等地图组合使用
- 知道坐标数组或者某格式的geo数据,如何在地图上添加feature
- 完成feature的修改
- 得到feature修改后的回调方法
初始化地图
我们希望openlayer能和google map等组合使用,但是由于google等地图厂商不愿意向openlayer“妥协”,因此现在无法直接使用Tiled Layers
,但我们可以将openlayer与地图api组合起来使用。
只使用地图的底图,在底图上覆盖一层 openlayer 的 canvas 层来显示数据并拦截与底图之间的交互,通过地图的 api 来重设状态。
此方案还有以下优点:
- 解决了页面节点过多之后的性能问题
- 底图可以被抽象出去,能够在不影响交互逻辑的基础上更换底图。
代码如下:
<!DOCTYPE html><html><head> <title>Snap interaction example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <style type="text/css"> div.fill { width: 100%; height: 100%; } .map { width: 800px; height: 400px; } </style></head><body><div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"> <!-- gmap用于加载google maps, olmap用于加载openlayer canvas。 目标是加载完毕之后olmap覆盖与gmap之上并且拦截交互操作。 开始时放在同一层的好处是都能根据父节点来设置长宽。也可以在js中动态生成div,渲染后插入 --> <div id="gmap" class="fill"></div> <div id="olmap" class="fill"></div> </div> </div> </div></div><script type="application/Javascript"> // 加载google map并禁用地图的交互操作 var gmap = new google.maps.Map(document.getElementById('gmap'), { disableDefaultUI: true, keyboardShortcuts: false, draggable: false, disableDoubleClickZoom: true, scrollwheel: false, streetViewControl: false }); // ol.View 是openlayers用于控制地图的 坐标系标准 zoom center rotate等操作的对象,在实例化map时候需要使用 var view = new ol.View({ // make sure the view doesn't go beyond the 22 zoom levels of Google Maps maxZoom: 21, projection: 'EPSG:4326' // 设置为标准经纬度的坐标标准,十分重要! 默认是'EPSG:3857' }); // view 拖动时触发事件,根据当前的坐标转化为经纬度,调用谷歌地图setCenter方法同步地图位置 view.on('change:center', function () { var center = view.getCenter(); gmap.setCenter(new google.maps.LatLng(center[1], center[0])); // 注意顺序 }); // 同上,更改焦距时触发的时间 view.on('change:resolution', function () { gmap.setZoom(view.getZoom()); }); // ol.source.Vector 作为 ol.layer.Vector的数据集,增删改feature的方法由source提供 var vectorSource = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: vectorSource }); var olMapDiv = document.getElementById('olmap'); var map = new ol.Map({ layers: [vector], // 所使用的图层 // 禁用掉默认的拖动、旋转等交互 interactions: ol.interaction.defaults({ altShiftDragRotate: false, dragPan: false, rotate: false }).extend([new ol.interaction.DragPan({kinetic: null})]), target: olMapDiv, view: view // 这里可以使用 new ol.View({options}) 但是在这里需要通过手动设置来触发google maps调节到正确地zoom与center }); view.setCenter([10.689697265625, -25.0927734375]); // 如果未设置view的坐标标准,这里千万要注意不要直接写经纬度 view.setZoom(6); // 设置缩放等级 // 将openlayers容器放置到google地图容器中 olMapDiv.parentNode.removeChild(olMapDiv); gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);</script></body></html>
有了这段代码应该就有了一个可以拖动缩放的地图了。
添加feature
当然光有一个地图是不行的,如果需要往地图上面添加feature怎么办呢?大致有以下两种场景:
- 提供整个地图的信息描述数据,比如geoJson,WKT或者自定义的数据结构等,需要解析整个数据并批量显示在地图上。
- 拿到某个feature的坐标数据,需要添加到地图上,并实现特异化的控制。
批量添加数据
先上代码
/** * 将geoJson字符串解析后添加到地图中 * @param vectorSource {ol.source.Vector} 需要添加feature的矢量层数据对象 * @param data {string} geoJson字符串 */ function addFeatures(vectorSource, data){ vectorSource.addFeatures(ol.format.GeoJSON.readFeatures(data, { // 数据的坐标code dataProjection: 'EPSG:3857', // 地图view使用的坐标code featureProjection: 'EPSG:4326' })); }
ol.format
下有很多种数据类型,选择匹配的数据格式。
比如WKT
使用ol.format.WKT.readFeature
readFeature
返回的是ol.Feature
的数组,可以通过遍历其来获得feature对象,从而按需求修改或者挂载监听事件。
添加单个feature
如果现有的数据是geoJson等标准格式的数据,可以通过ol.format
中的类进行转换。如果有需求则使用ol.proj.transform
进行坐标系转换。
// 返回单个feature对象var feature = ol.format.GeoJSON.readFeature(data)// 添加到sourcevectorSource.addFeature(feature);
如果拿到的是经纬度信息,添加一个polygon
// data 是一个coordinates的二维数组 需要注意var feature = new ol.feature(new ol.geom.Polygon(data));
修改feature
介绍如何修改feature以及挂载监听事件。
初始化修改添加、修改交互
// 声明选择交互 var select = new ol.interaction.Select({ // 根据 feature editable 选项来判断是否可以选中 filter: function(feature) { if (_this._featureMap[feature.getId()].editable) { return true; } } });// 得到被选中元件的对象var selected = select.getFeatures();// 声明修改交互,可以修改被选中的featurevar modify = new ol.interaction.Modify({ features: selected});// 当新元件被选中时触发selected.on('add', event => { var feature = event.element})// 当元件被取消选中时触发,一般把元件的修改回调放在这 selected.on('remove', evt => { var feature = evt.element; var fid = feature.getId(); // 判断元件是否被修改还是需要feature的change事件 console.log(fid); });// 在interactions中添加this._map = new ol.Map({ layers: [vector], interactions: ol.interaction.defaults({ altShiftDragRotate: false, dragPan: false, rotate: false }).extend([new ol.interaction.DragPan({kinetic: null}), select, modify]), target: $olMapDiv, view: this._view });
一般来说如果需要后续对feature进行操作,可以使用getId
方法拿到feature
的id
,可以通过setId
来设置自己想要的id
,否则会自动生成。 将id
存在常驻的对象中供以后使用。
假设拿到ol.Feature
对象 feature
feature.on('change:geometry', function(e){ var feature = e.element; // do what you want 比如标记元件已被修改})
需要注意的是这个onChange
事件在修改的过程中会不断地触发,如果需要的是修改完成之后的回调,需要使用select
的remove
事件。
select.getFeatures().on('remove', function(e){})
修改feature对象
设置id
feature.setId(id)
得到geometry
对象
var geometry = feature.getGeometry();// 通过调用geometry类的方法修改元件坐标
feature to string
var format = new ol.format.GeoJSON();format.writeFeature(feature);
需要注意的地方
- openlayers默认的坐标系是
'EPSG:3857'
,标准经纬度坐标系是'EPSG:4326'
- 看openlayer文档最重要的技巧是注意类型
- geometry接受的coordinates其实是一个三维数组,一定要注意
常用操作
坐标系转换
根据当前坐标系与目标坐标系进行转换。
ol.proj.transform(coordinate, source, destination)
coordinate
在文档中得类型是 Coordinate
其实就是一个有横纵坐标组成的数组,因此一定要注意官方文档中得数据类型。source
当前坐标编码 string类型destination
目标坐标编码 string类型
从经纬度转化到指定坐标系
ol.proj.fromLonLat(coordinate, opt_projection)
opt_projection
目标坐标编码 string类型
从某坐标转经纬度
ol.proj.toLonLat(coordinate, opt_projection)
数据格式化
ol.format
- openlayers with Google maps 简单教程
- Google Maps Mashups with Google Mapplets
- Google Maps API用法教程
- Google Maps API用法教程
- Google Maps API用法教程
- Google Maps API用法教程 .
- Google Maps API简易教程
- Visualisation with R and Google Maps
- Android working with Google Maps V2
- Google Maps
- google maps
- Using Google Maps V2 for Android with Android Studio
- OpenLayers教程
- Google Maps API(Flash 版)- FlexBuilder 教程
- google maps js v3 api教程(1) -- 创建一个地图
- google maps js v3 api教程(3) -- 创建infowindow
- Google Maps API V3学习--- 简单地图显示
- google maps api的调用之简单示例
- sublime text3配置sublimelinter配合pep8和pyflakes检查python书写规范和语法
- HDU 5831 Rikka with Parenthesis II (模拟)
- Netty高性能大容量Socket并发
- springmvc + form:form 上传文件配置。
- Qt中显示复杂列表
- openlayers with Google maps 简单教程
- Unity 3D - 光源组件( Light )
- poll实现I/O多路复用
- Oracled的OCA、OCP、OCM详细介绍
- Android 开发工具集合
- #518 Super Ugly Number
- 利用PopupWindow和RecyclerView来实现头像的选择(在电视上选择头像)
- Nginx直接跳转
- ZeroMQ研究与应用分析