前端地图引擎 OpenLayers

  1. 常识
  2. Map
  3. ol.proj
  4. ol.style
  5. ol.source
  6. 取得要素
  7. Layer
  8. Heatmap
  9. imagelayer
  10. vectorlayer
  11. 添加覆盖物的原理

常识

坐标系是球形墨卡托投影坐标系(EPSG:3857)。
百度地图 屏幕的左下角
天地图 屏幕的左上角
谷歌地图 屏幕的左上角
bing地图 屏幕的左上角
意玛海图 屏幕的左上角

球面墨卡托投影在OpenLayers community版本和其他OSG community版本中都有使用。Google Maps,微软Virtual Earth,Yahoo Maps和其他商业地图API的提供者都使用该投影。
该投影是将地球当作一个球体而不是椭球体,然后应用墨卡托投影的方法,将地图投影到一个地图平面上。
为了正确的在商业地图API上叠加地图数据,就必须使用该投影。最基本的是在商业地图API上显示栅格瓦片地图——例如TMS,WMS以及其他类似的瓦片。
为了更好的使用商业地图API,基于Google Maps的数据生成人员也需要使用该投影。最基本的例如OpenStreetMap,栅格地图瓦片都是使用的“球面墨卡托投影”。
GIS中,通常用“EPSG”的代码来表示一种地图投影。最常用的“EPSG:4326”,在地图上将经纬度直接当作X /Y对待。球面墨卡托投影在官方指定的代码为EPSG:3857。但是在官方发布之前,很多软件已经使用了EPSG:900931代码来表示该投影,OpenLayers仍然使用这个非官方的代码。看到“EPSG:4326”字符,就是经纬度坐标的描述,看到“EPSG:900931”则是用“米”做单位的x/y坐标的描述。
EPSG:4326 经纬度坐标
EPSG:3857 球面墨卡托投影 官方叫法 用“米”做单位的x/y坐标的
EPSG:900931 球面墨卡托投影 民间叫法 用“米”做单位的x/y坐标的

Map

要初始化一幅地图,需要一个view,一个或多个图层(layers),一个目标容器(target)。

ol.proj

ol.proj.transform([37.41, 8.82], ‘EPSG:4326’, ‘EPSG:3857’),
transform函数是将给定的坐标从4326转到3857坐标系下,
4326即是WGS84坐标系!
3857是墨卡托投影坐标系

ol.style

geometry,要素的属性,或者要素,或者一个返回一个地理要素的函数,用来渲染成相应的地理要素;
fill,填充要素的样式;
iamge,图片样式,类型为 ol.style.Image;
stroke,要素边界样式,类型为 ol.style.Stroke;
text,要素文字的样式,类型为 ol.style.Text;
zIndex,CSS中的zIndex,即叠置的层次,为数字类型。

  1. geometry - 地理属性
    geometry 可以是要素的地理属性,或者 geometry,或者一个返回 geometry 类型的函数。一般与 image 样式配合使用,表示 image 放置的位置,如下面的例子:

ol.source

ol.source.TileImage
首先,初始化一个图片切片地图数据源,var baidu_source = new ol.source.TileImage({}),ol.source.TileImage 是 OpenLayers 中专门负责调用地图以切片图片存放的类,其中给定了三个参数,projection 参数指定了地图切片使用的坐标系,一般是 EPSG:3857(球形墨卡托投影坐标系)

source 是 layer 中必须的选项,定义着地图数据的来源,与数据有关的函数,如addfeature、getfeature等函数都定义在 source 中,而且数据源支持多种格式。
ol.source.BingMaps ,必应地图的切片数据,继承自ol.source.TileImage;
ol.source.Cluster,聚簇矢量数据,继承自ol.source.Vector;
ol.source.ImageCanvas,数据来源是一个 canvas 元素,其中的数据是图片,继承自 ol.source.Image;
ol.source.ImageMapGuide,Mapguide 服务器提供的图片地图数据,继承自 ol.source.Image,fire ol.source.ImageEvent;
ol.source.ImageStatic,提供单一的静态图片地图,继承自ol.source.Image;
ol.source.ImageVector,数据来源是一个 canvas 元素,但是其中的数据是矢量来源 ol.source.Vector,继承自 ol.source.ImageCanvas;
ol.source.ImageWMS,WMS 服务提供的单一的图片数据,继承自 ol.source.Image,触发 ol.source.ImageEvent;
ol.source.MapQuest,MapQuest 提供的切片数据,继承自 ol.source.XYZ;
ol.source.OSM,OpenStreetMap 提供的切片数据,继承自 ol.source.XYZ;
ol.source.Stamen,Stamen 提供的地图切片数据,继承自 ol.source.XYZ;
ol.source.TileVector,被切分为网格的矢量数据,继承自 ol.source.Vector;
ol.source.TileDebug,并不从服务器获取数据,而是为切片渲染一个网格,继承自 ol.source.Tile;
ol.source.TileImage,提供切分成切片的图片数据,继承自 ol.source.Tile,触发 ol.source.TileEvent;
ol.source.TileUTFGrid,TileJSON 格式 的 UTFGrid 交互数据,继承自 ol.source.Tile;
ol.source.TileJSON,TileJSON 格式的切片数据,继承自 ol.source.TileImage;
ol.source.TileArcGISRest,ArcGIS Rest 服务提供的切片数据,继承自 ol.source.TileImage;
ol.source.WMTS,WMTS 服务提供的切片数据。继承自 ol.source.TileImage;
ol.source.XYZ,XYZ 格式的切片数据,继承自 ol.source.TileImage;
ol.source.Zoomify,Zoomify 格式的切片数据,继承自 ol.source.TileImage。

取得要素

那么,在一个矢量图层中怎么取得它的某个 feature 呢,一般的想法是 vector.getFeature(),其实不是的,vector 的数据包含在 source 中,要取得 vector 的 feature 数据,要在 source 中,例如 vector.getSource().getFeatures(),该函数会返回一个 feature array,直接使用 [ ],取用即可,或者根据要素的 ID 取得(getFeatureById())。
同样的,只要数据相关的操作,都要得到 vector 的 source 实例,然后进行操作,例如 添加要素(addFeature)、删除要素(removeFeature),对每个要素进行相同的操作(forEachFeature)。
取得要素的 geometry
利用 getGeometry() 可以获得要素的地理属性,这个函数当然返回要素包含的 geometry,geometry 包含很多类型,主要有 point、multi point、linear ring、line string、multi line string、polygon、multi polygon、circle。
取得 geometry 后,就可以获得要素的坐标了,可以根据坐标做一些地理判断,比如判断 一个坐标是否位于要素内(containsCoordinate(coordinate)或者 containsXY(x, y)),取得要素的中心坐标等。
也可以map.foreachfeatureatcoordinate

Layer

map:map

这样写地图没反应,除非map.addlayer()

Heatmap


heatmap 使用KML格式,本地文件data/kml/2012_Earthquakes_Mag5.kml 作为 heatmap 的来源,数据是2012年全球地震发生的位置和震级等简单的描述信息,然后将 heatmap 图层加到 map 中:

imagelayer

主要是指服务器端渲染的图像,可能是已经渲染好的图像,或者是每一次请求,都根据请求内容定制化地生成一幅图片,该图层类型支持任意的范围和分辨率。

与 heatmap 一样,首先需要传入 URL 参数,即图片地址,这里可以是网络图片的地址,或者是本地的文件地址;然后需要传入参考坐标系 projection,code 是一个标识,可以是任何字符串,如果是EPSG:4326 或者是 EPSG:3857 ,那么就会使用这两个坐标系,如果不是,就使用默认的坐标系,extent 是一个矩形范围,上面已经提到;imageLayer 的第三个参数是 imageExtent 表示图片的尺寸,这里我们不能改变图片的原来的比例,图片只会根据原来的比例放大或缩小。
最后将 imageLayer 加到地图中:

vectorlayer

在 OpenLayers之使用Vector Layer 中曾经使用过,即矢量图层,矢量图层实际上是在客户端渲染的图层类型,服务器返回的数据或者文件会通过 OpenLayers 进行渲染,得到相应的矢量图层。

添加覆盖物的原理


拷贝我们的element到 ol自己的di下面


转载请注明来源。 欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。 可以在下面评论区评论,也可以邮件至 sharlot2050@foxmail.com。

文章标题:前端地图引擎 OpenLayers

字数:1.9k

本文作者:夏来风

发布时间:2017-11-18, 12:46:11

原始链接:http://www.demo1024.com/blog/front-openlayers/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。