工具

高德坐标选取

基础概念

GeoJSON

坐标系

GIS地理信息系统的坐标系统:

• ·WGS-84：GPS坐标系，是国际标准，GPS坐标（Google Earth使用、或者GPS模块）

• ·GCJ-02：火星坐标系，国测局02年发布的坐标体系，中国坐标偏移标准，Google Map、高德、腾讯使用

• ·BD-09：百度坐标系，百度自研，百度地图使用。

projection：投影

• ·投影：地球大家都知道不是正圆形的球体，他是一个不规则的椭圆体，所以如果我们把把展开在桌面上，发现地图都会和实际有出入。所以人们发明了各种各样的方式来缩小失真的程度，这种方式就是投影

• ·projection为source、view提供投影选项

• ·EPSG：

• -- 什么是EPSG：

•  WGS84是目前最流行的地理坐标系统。在国际上，每个坐标系统都会被分配一个EPSG代码，EPSG:4326就是WGS84的代码。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。一般我们在存储数据时，仍然按WGS84存储。
  

• -- 常见的EPSG：

•  -- EPSG:4326 (WGS84)：一种国际上采用的地心坐标系。坐标原点为地球质心。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。
  

•  -- EPSG:3857 (Pseudo-Mercator)：伪墨卡托投影，也被称为球体墨卡托，Web Mercator。它是基于墨卡托投影的，把 WGS84坐标系投影到正方形。我们前面已经知道WGS84是基于椭球体的，但是伪墨卡托投影把坐标投影到球体上，这导致两极的失真变大，但是却更容易计算。这也许是为什么被称为”伪“墨卡托吧。另外，伪墨卡托投影还切掉了南北85.051129°纬度以上的地区，以保证整个投影是正方形的。因为墨卡托投影等正形性的特点，在不同层级的图层上物体的形状保持不变，一个正方形可以不断被划分为更多更小的正方形以显示更清晰的细节。很明显，伪墨卡托坐标系是非常显示数据，但是不适合存储数据的，通常我们使用WGS84存储数据，使用伪墨卡托显示数据。
  

•  -- EPSG:900931：在地图上用单位“米”当作坐标的X/Y对待
  

• ·实例化：var projection=new OpenLayers.Projection('EPSG:4326',{})

• ·方法：

• -- getCode：获取投影code

• -- getUnits：获取投影的单位，度or 米，这取决于我们使用的投影

• -- addTransform（from,to,method）：坐标系转换

• -- transform(point,source,destination)：坐标系转换

• ·坐标转换

• -- 使用ol的transform方法：

•   //创建两个投影对象
  

•   var proj_4326 = new OpenLayers.Projection('EPSG:4326');
  

•   var proj_900913 = new OpenLayers.Projection('EPSG:900913'); 
  

•   //再创建一个点
  

•   var Point_to_transform=new OpenLayers.LonLat(-79,42);
  

•   //开始转换
  

•   Point_to_transform.transform(proj_4326,proj_900913);
  

•   //打印结果
  

•   console.log(point_to_transform);
  

• -- 使用地理坐标转换工具：gcsTransUtil.js

分辨率：

• ·分辨率的简单定义是屏幕上的1像素表示的现实世界的地面实际距离：

• 以Google在线地图为例，层级0使用了一个瓦片，层级1使用了4个瓦片。通过计算可以知道层级0的整个地球图像（瓦片）为256256像素大小，层级1整个地球图像为512512像素大小。而层级0和层级1表示的地球范围都是一样的（经度[-180°, 180°]，纬度[-90°, 90°]）。在层级0的时候，一个像素在水平方向就表示360°/256 = 1.40625°这么长的经度范围（以度为单位），在竖直方向就表示180°/256 = 0.703125°这么长的纬度范围（以度为单位）。而这两个数字就是分辨率了，即一个像素所表示的现实世界的范围是多少，这个范围可能是度（在地理坐标系统中），可能是米（在投影坐标系统中），或者其他单位，根据具体的情况而定。

• ·因为不同的在线瓦片地图可能采用不一样的分辨率，比如百度在线瓦片地图。所以在使用在线瓦片地图或者自己制作的瓦片地图时，都需要知道使用的分辨率是多少。如若不然，可能会出现位置偏移。

• ·瓦片数量计算：

• 层级0的瓦片数是 1 = 2^0 ∗ 2^0

• 层级1的瓦片数是 4 = 2^1 * 2^1

• 层级2的瓦片数是 16 = 2^2 * 2^2

• 层级3的瓦片数是 64 = 2^3 * 2^3

• 层级z的瓦片数是 2^z * 2^z

• ·OpenLayers默认采用的分辨率和Google在线瓦片地图一样，他们都是采用的ESPG:3857

• ·ol获取默认分辨率：map.getView().getResolution()

• ·根据EPSG获取各层级分辨率：

• var projectionExtent = ol.proj.get("EPSG:3857").getExtent();  //获取EPSG:3857投影的范围
  

• var tilePixel = 256;  //单张瓦片的像素，通常都为256，也有少部分为512，根据不同的源而定
  

• var maxResolution = ol.extent.getWidth(projectionExtent) / tilePixel;  //最大分辨率 = 0层投影范围的宽度 / 单张瓦片的像素
  

• var MaxZoom = 21;  //地图可放大层级数，要求服务端有相应的层级的瓦片、矢量地图包
  

• var resolutions = new Array(MaxZoom);  //分辨率数组
  

• var matrixIds = new Array(MaxZoom);  //层级数组
  

• for (var i = 0; i < MaxZoom; i++) {
  

•   resolutions[i] = maxResolution / Math.pow(2, i);
  

•   matrixIds[i] = i;
  

• }
  

名词解释

• layer 层

• contorl 控件

• feature 元素

• interaction 交互

• Vector 矢量的

• Tile 瓦片

• source 资源

• format 转换

• projection 投影

注意事项

位置信息转换

后端返回的数据多GPS采用的是【EPSG4326】，在实际绘投影坐标系地图时需要转换为【EPSG3857】

EPSG4326是基于WGS84椭球的经纬度坐标系（大地坐标系，BL）。

EPSG3857是基于球体的、web墨卡托投影（伪墨卡托投影）的投影坐标系，范围为纬度85度以下，由于google地图最先使用而成为事实标准。至今，大多互联网地图都使用EPSG3857，主要是因为该投影是等角投影，适合地图定向及导航，但是纬度越高，面积变形越大。

常见的openlayers 转换方式

• new LineString(coordinates).transform("EPSG:4326", "EPSG:3857")

常用封装

框架结构

[图片上传失败...(image-6085e4-1668731860272)]

Map

Map的属性

• target

• view

• layers

• interaction

• controls

• overlay

• event

{
    target: 'map',//对象映射：要将`map`对象附加到div，` map`对象将`target`作为参数，值是`div`的`id`
    layers: [//图层
      new ol.layer.Tile({//这里定义的是平铺图层
        source: new ol.source.OSM()//图层源 定义图层映射协议
      })
    ],
    view: new ol.View({//视图
      center: ol.proj.fromLonLat([37.41, 8.82]),//地图中心
      zoom: 4//缩放层级
    }),
    controls:[//最初添加到映射中的控件  如未设置 使用默认控件
        new ol.control.Control({
            element:,//元素是控件的容器元素(DOM)。只有在开发自定义控件时才需要指定这一点
            render: ,//控件重新呈现时调用的函数
            target: //如果想在映射的视图端口之外呈现控件，指定目标
        })
    ],
    interactions:[//最初添加到映射中的交互 如未设置 使用默认交互
        new ol.interaction.Interaction({
            handleEvent
        })
    ],
    overlays:[
        new ol.Overlay()
    ],
    maxTilesLoading:16,//同时加载的最大瓷砖数 默认16
    loadTilesWhileAnimating:false,//
    loadTilesWhileInteracting:false,//   
    moveTolerance:1,//光标必须移动的最小距离(以像素为单位)才能被检测为map move事件，而不是单击。增加这个值可以使单击地图变得更容易
    pixelRatio:window.devicePixelRatio,//
    keyboardEventTarget:,//要监听键盘事件的元素
}

Map的方法

地图方法	功能
addControl(control)	将给定的控件添加到地图中
removeControl(control)	从地图中移除已给定的控件
addInteraction(interaction)	将给定的交互添加到地图中
removeInteraction(interaction)	从地图中移除已给定的交互
addLayer(layer)	将给定的图层添加到地图的顶部
removeLayer(layer)	从地图中移除已给定的图层
addOverlay(overlay)	将给定的叠加层添加到地图中
removeOverlay(overlay)	从地图中移除已给定的叠加层
forEachFeatureAtPixel(pixel, callback, opt_options)	检测与视图端口上的像素相交的特性，并对每个相交的特性执行回调。检测中包含的层可以通过opt_options中的layerFilter选项配置
forEachLayerAtPixel(pixel, callback, opt_options)	检测在视图端口上的像素处具有颜色值的层，并对每个匹配的层执行回调。检测中包含的层可以通过opt_layerFilter配置
getControls()	获取地图控件
getCoordinateFromPixel(pixel)	获取给定像素的坐标。这将返回地图视图投影中的坐标。
getEventCoordinate(event)	返回浏览器事件的视图投影中的坐标
getEventPixel(event)	返回浏览器事件相对于视图端口的地图像素位置
getFeaturesAtPixel(pixel, opt_options)	获取视图端口上与像素相交的所有特性
getInteractions()	获取地图交互
getLayerGroup()	获取与此地图关联的图层组
setLayerGroup(layerGroup)	设置与此地图关联的图层组
getLayers()	获取与此地图关联的图层的集合
getOverlayById(id)	通过其标识符获取覆盖(overlay. getId()返回的值)。注意，索引将字符串和数字标识符视为相同的。getoverlaybyid(2)将返回id为2或2的叠加层。
getOverlays()	获得地图叠加
getPixelFromCoordinate(coordinate)	获取坐标的像素。它接受地图视图投影中的坐标并返回相应的像素
getSize()	获取地图尺寸
setSize(size)	s设置地图尺寸
getTarget()	获取呈现此映射的目标。注意，这将返回作为选项或setTarget中输入的内容。如果这是一个元素，它将返回一个元素;如果是字符串，它会返回这个字符串
setTarget(target)	设置要将地图呈现的目标元素
getTargetElement()	获取呈现此映射的DOM元素。与getTarget相反，这个方法总是返回一个元素，如果映射没有目标，则返回null
getView()	获取地图视图。视图管理中心和分辨率等属性。
setView(view)	设置地图视图
getViewport()	获取作为map视图端口的元素
hasFeatureAtPixel(pixel, opt_options)	检测在viewport上是否与一个像素相交。可以通过opt_layerFilter配置在检测中包含的层。

View

• ·设置中心点：view.setCenter([x,y])

• ·获取层级：view.getZoom()

• ·设置层级：view.setZoom(5)

• ·获取projection：view.getProjection()

Layer

new VectorLayer({
        source: new VectorSource({
            features: [new Feature({
                geometry: new LineString(coordinates, 'XY'),
                name: 'Line'
            })]
        }),
      })

**Source**和**Layer**是一对一的关系，有一个**Source**，必然需要一个**Layer**，然后把这个**Layer**添加到**Map**上，就可以显示出来了

- source

- Tile 【瓦】

对应的是瓦片数据源

- Image【图片】

对应的是一张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图

- Vector【矢量】

对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了

矢量图层Vector通过样式（Style）来设置矢量要素渲染的方式和外观

    - VectorTile

    - Heatmap

• 地图数据根据数据源（Source）可分为Image、Tile、Vector三大类型的数据源类，对应设置到地图图层（Layer）的Image、Tile、Vector三大类的图层中。其中，矢量图层Vector通过样式（Style）来设置矢量要素渲染的方式和外观。

Tile

平铺图层。

对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织

Image

图像图层。

服务器呈现的映像，可用于任意范围和分辨率。

//以下为图层的属性选项， 都可设置，所以皆有getter/setter
new ol.layer.Tile/Image({
    opacity:2,//透明度 区间范围为(0, 1) 默认为1
    visible:true,//显示属性 布尔值 默认为true
    extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
    //  图层渲染的索引层级。在渲染时，图层将被排序，首先是z-idnex，然后是位置，当为undefined时，对于添加到映射的layers集合中的层，zIndex为0，或者当使用该层的setMap()方法时，zIndex为无穷大
    zIndex:2,
    minResolution:3,//该层可见的最小分辨率(包括在内)
    maxResolution:6,//该层可见的最大分辨率（包括在内）
    repload:0,//预加载。将低分辨率瓦片加载到预加载级别。0表示没有预加载 默认为0
    source:new ol.source.TileSource()/ImageSource(),//图层源
    map:  ,//把图层覆盖在地图上，地图不会在它的图层集合中管理这个图层，这个图层将被呈现在顶部，这对于临时层非常有用。
})

Vector

矢量图层。

在客户端呈现矢量数据，其属性具备getter和setter

//以下为图层的属性选项， 都可设置，所以皆有getter/setter
    opacity:2,//透明度 区间范围为(0, 1) 默认为1
new ol.layer.Vector({
    visible:true,//显示属性 布尔值 默认为true
    extent:[],//图层渲染的边界范围。该层将不会在此范围之外呈现
    zIndex:2,//图层渲染的索引层级。在渲染时，图层将被排序，首先是z-idnex，然后是位置，当为undefined时，对于添加到映射的layers集合中的层，zIndex为0，或者当使用该层的setMap()方法时，zIndex为无穷大
    minResolution:3,//该层可见的最小分辨率(包括在内)
    maxResolution:6,//该层可见的最大分辨率（包括在内）
    renderOrder:,//呈现顺序。函数用于在呈现前对特性进行排序。默认情况下，特性是按照创建它们的顺序绘制的。使用null来避免排序，但是得到一个未定义的绘制顺序
    renderBuffer:100,//默认为100 缓冲区
    renderMode:'vector',//默认为'vector' 矢量图层的渲染模式
    source:new ol.source.VectorSource(),//图层源
    map:  ,//把图层覆盖在地图上，地图不会在它的图层集合中管理这个图层，这个图层将被呈现在顶部，这对于临时层非常有用
    declutter:false,//默认为false 整理图片和文字。清理应用于所有图像和文本样式，优先级由样式的z-index定义。z-index指数越低，优先级越高
    style:new ol.style.Style(),//图层样式
    updateWhileAnimating:false,//默认为false 
    updateWhileInteracting:false,//默认为false
})

其中渲染模式有两种：

• 'image'：矢量图层被渲染为图像。性能很好，但是点符号和文本总是随着视图旋转，像素在缩放动画中缩放

• 'vector'：矢量图层被呈现为向量。即使在动画期间也有最准确的渲染，但性能较慢

-- Feature

• 添加矢量元素：通过vectorsource().addFeature(feature)添加到矢量图层上。

• 移除图层所有的矢量元素：vectorsource().clear()

let feature = new ol.Feature({
  geometry: new ol.geom.Polygon(polyCoords),
  labelPoint: new ol.geom.Point(labelCoords),
  style:new ol.style.Style({}), // 新版本中没有style 属性，只能setStyle进行设置
  name: 'My Polygon'
});

• 定义矢量元素：new ol.Feature()，；

• 矢量元素样式：

  • 设置样式：new ol.style.Style()，也可以使用feature.setStyle(style)，未定义的话，可以使用它的盛放容器layer的样式；

  • 获取样式：feature.getStyle()

• 一个feature只有一个默认几何属性geometry，可以有任意数量的命名几何图形：

  • 获取默认几何属性：feature.getGeometry()；

  • 设置几何属性：feature.setGeometry(geometry)；

  • 设置几何属性名：feature.setGeometryName(name)；

  • 矢量元素要呈现的几何图形的特征属性、几何图形或函数由geometry属性选项设定，主要有以下几种子类模块：

    • ol.geom.Circle()：圆形

    • ol.geom.Geometry()：几何图形

    • ol.geom.GeometryCollection()：

    • ol.geom.LinearRing()：环线

    • ol.geom.LineString()：线段

    • ol.geom.Point()：点

    • ol.geom.Polygon()：多边形

    • ol.geom.MultiLineString()

    • ol.geom.MultiPoint()

    • ol.geom.MultiPolygon()

    • ol.geom.SimpleGeometry()

• feature的稳定标识符ID：feature.setId(id + "featureName");

  • 设置feature的id：feature.setId(id)，当id可能相同时，可以这样加以区分

  • 获取feature的id：vector.getSource().getFeatureById()或者vectorsource().getFeatureById()

• feature的set(key, value, opt_silent)：

  • 设置key：feature.set("keyName",name)，keyName是字符串，自己根据情况设置

  • 获取key：之前设置的什么，就获取什么，feature.get("keyName")，会得到设置的值

--- Style

矢量特征呈现样式的容器。在重新呈现使用样式的特性或图层之前，通过set*()方法对样式及其子元素所做的任何更改都不会生效。

new ol.style.Style({
    geometry:new ol.geom.LineString(),//有以上ol.geom模块的几何图形可以参考
    fill:new ol.style.Fill({//填充样式
        color:color//颜色、渐变或图案
    }),
    
    image:new ol.style.Image({//图像
        opacity:,//数值
        rotateWithView:,//布尔值
        rotation:,//数值
        scale://数值
    }),
    
    image:new ol.style.Icon({//可以使用图片资源
        anchor:[0.5，0.5]，//锚。默认值是图标中心 默认值是[0.5,0.5]
        anchorOrigin:'top-left',//锚的原点:左下角、右下角、左上方或右上方。默认是左上
        anchorXUnits:'fraction',//指定锚点x值的单位。'fraction'的值表示x值是图标的'fraction'。'pixels'的值表示像素中的x值,默认为'fraction'
        anchorYUnits:'fraction',//指定锚点y值的单位。'fraction'的值表示y值是图标的'fraction'。'pixels'的值表示像素中的y值,默认为'fraction'
        color:color,//颜色、渐变或图案
        crossOrigin:,
        img:,//图标的图像对象  如果没有提供src选项，则必须已经加载了提供的图像
        imgSize:,//
        offset:[0,0].//偏移值，默认为[0,0]
        offsetOrigin:'top-left',//偏移量的原点，bottom-left, bottom-right, top-left or top-right. 默认是`top-left`
        opacity:1,//默认是1  （0，1）
        scale:1,//默认是1
        rotation：0，//以弧度旋转(顺时针方向正旋转) 默认为0
        size：,//图标大小(以像素为单位)。可与偏移量一起用于定义要从原点(sprite)图标图像使用的子矩形
        src:'',//图像URL源
        rotateWithView：false,//是否旋转视图中的图标  默认为false            
    }),
    
    stroke:new ol.style.Stroke({//描绘
        width: ,//宽
        color:color,//颜色、渐变或图案
        lineCap:'round',//线帽风格  butt, round, 或者 square 默认 round
        lineJoin:'round',//线连接方式 bevel, round, 或者 miter 默认 round
        lineDash： []，//线间隔模式 这个变化与分辨率有关 默认为undefined Internet Explorer 10和更低版本不支持
        lineDashOffset:0,//线段间隔偏移 默认0
        miterLimit:10,// 默认10                   
    }),
        
    text:new ol.style.Text({//文字
        font:'',//默认是'10px sans-serif'
        text:'',//文本内容
        textAlign：'center',//文本对齐 'left', 'right', 'center', 'end' 'start'.针对于placement: 'point',默认为'center'；针对于placement: 'line'，默认是让渲染器选择不超过maxAngle的位置
        textBaseline:'middle',//文本基线  'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic' 默认'middle'
        placement:'',//文本布置
        scale：，
        padding:[0,0,0,0],//文本周围的像素填充。数组中值的顺序是[top, right, bottom, left]
        fill:new ol.style.Fill(),//如果未设置，默认未#333
        stroke:new ol.style.Stroke(),
        offsetX:0,//水平文本偏移量(以像素为单位)。正值将把文本右移。默认0
        offsetY:0,//垂直文本偏移量(以像素为单位)。正值会将文本向下移动。默认0
        rotation：0，//默认0
        rotateWithView:false,
        backgroundFill:  ,//当placement:“point”时，填充文本背景的样式。默认为无填充 
        backgroundStroke: ,//当placement:“point”时，描绘文本背景的样式。默认为无描绘
    }),
    
    zIndex:,
})

--- geomtry

方法	功能
set(key, value)	设置值。key：关键名字（字符串）；value：值
get(key)	获取值
setProperties(values, opt_silent)	设置键值对的集合。注意，这将更改任何现有属性并添加新属性(它不会删除任何现有属性)。
getProperties()	获取一个包含所有属性名和值的对象
getClosestPoint(point, opt_closestPoint)	将几何图形的最近点作为坐标返回到经过的点
getExtent(opt_extent)	获取几何的范围
getKeys()	获取对象属性名称列表
getRevision()	获取此对象的版本号。每次修改对象时，它的版本号都会增加。
intersectsCoordinate(coordinate)	如果该几何图形包含指定的坐标，则返回true。如果坐标位于几何图形的边界上，则返回false
rotate(angle, anchor)	围绕给定的坐标旋转几何图形。这将修改现有的几何坐标
scale(sx, opt_sy, opt_anchor)	缩放几何图形(可选原点)。这将修改现有的几何坐标。sx：x方向上的缩放因子；sy：Y轴上的缩放因子；opt_anchor`：缩放原点(默认为几何范围的中心)
simplify(tolerance)	创建这个几何图形的简化版本
transform(source, destination)	将圆的每个坐标从一个坐标系变换到另一个坐标系。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数。在内部，一个圆目前由两点表示:圆心[cx, cy]和圆心右边的点[cx + r, cy]。这个transform函数只变换这两点。所以得到的几何形状也是一个圆，而这个圆并不等同于通过变换原圆的每一点得到的形状
translate(deltaX, deltaY)	翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体，那么首先clone()这个几何体

以下为Geomtry子模块

---- Circle

new ol.geom.Circle({
    center:[],//中心点
    radius:2,//圆半径
    layout://布局
})

方法	功能
applyTransform(transformFn)	对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
clone()	把几何图形复制一份
getCenter()	返回中心坐标
getFirstCoordinate()	返回几何图形的第一个坐标
getLastCoordinate()	返回几何图形的最后一个坐标
getLayout()	返回几何图形的layout
getRadius()	返回圆的半径
getType()	获取这个几何图形的类型
intersectsExtent(extent)	测试几何形状和经过的区域是否相交，返回布尔值
rotate(angle, anchor)	围绕给定的坐标旋转几何图形。这将修改现有的几何坐标。angle：以弧度为单位的旋转角度；anchor：旋转中心
scale(sx, opt_sy, opt_anchor)	缩放几何图形(可选原点)。这将修改现有的几何坐标。sx：x方向上的缩放因子；sy：Y轴上的缩放因子；opt_anchor：缩放原点(默认为几何范围的中心)
setCenter(center)	将圆心设置为coordinate
setCenterAndRadius(center, radius, opt_layout)	设置圆的中心(coordinate)和半径(number)
setRadius(radius)	设置圆的半径。半径的单位是投影的单位。
transform(source, destination)	将圆的每个坐标从一个坐标系变换到另一个坐标系。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数。在内部，一个圆目前由两点表示:圆心[cx, cy]和圆心右边的点[cx + r, cy]。这个transform函数只变换这两点。所以得到的几何形状也是一个，而这个圆并不等同于通过变换原圆的每一点得到的形状
translate(deltaX, deltaY)	f翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体，那么首先clone()这个几何体

---- LineString

new ol.geom.LineString({
    coordinate:[],//坐标。对于内部使用，平面坐标结合opt_layout也可以接受
    layout: //Layout
})

方法	功能
appendCoordinate(coordinate)	将经过的坐标追加到linestring的坐标里
applyTransform(transformFn)	对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
clone()	把几何图形复制一份
forEachSegment(callback)	遍历每条线段，调用提供的回调函数。如果回调函数返回一个真值，则函数立即返回该值。否则函数返回false
getCoordinateAt(fraction, opt_dest)	沿着线段返回给定部分的坐标。fraction是一个介于0和1之间的数字，其中0是线段的开始，1是线段的末尾
getCoordinates()	返回线段的坐标
setCoordinates(coordinates, opt_layout)	s设置线段的坐标
getFirstCoordinate()	返回几何图形的第一个坐标
getLastCoordinate()	返回几何图形的最后一个坐标
getLayout()	返回几何图形的Layout
getLength()	在投影平面上返回线段的长度
getType()	得到这个几何图形的类型
intersectsExtent(extent)	测试几何形状和通过的范围是否相交
rotate(angle, anchor)	围绕给定的坐标旋转几何图形。这将修改现有的几何坐标
scale(sx, opt_sy, opt_anchor)	缩放几何图形(可选原点)。这将修改现有的几何坐标。sx：x方向上的缩放因子；sy：Y轴上的缩放因子；opt_anchor`：缩放原点(默认为几何范围的中心)
translate(deltaX, deltaY)	翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体，那么首先clone()这个几何体

---- Point (coordinates, opt_layout)

方法	功能
applyTransform(transformFn)	对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
clone()	把几何图形复制一份
getCoordinates()	返回点的坐标
setCoordinates(coordinates, opt_layout)	设置点的坐标
getFirstCoordinate()	返回几何图形的第一个坐标
getLastCoordinate()	返回几何图形的最后一个坐标
getLayout()	返回几何图形的Layout
getType()	得到这个几何图形的类型
intersectsExtent(extent)	测试几何形状和通过的范围是否相交
rotate(angle, anchor)	围绕给定的坐标旋转几何图形。这将修改现有的几何坐标
scale(sx, opt_sy, opt_anchor)	缩放几何图形(可选原点)。这将修改现有的几何坐标。sx：x方向上的缩放因子；sy：Y轴上的缩放因子；opt_anchor`：缩放原点(默认为几何范围的中心)
translate(deltaX, deltaY)	翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体，那么首先clone()这个几何体

---- Polygon

new ol.geom.Polygon({
    coordinates:[],//定义多边形的线性环的数组
    layout:,
    ends:[],//末端（平面坐标内部使用）
})

方法	功能
applyTransform(transformFn)	对几何图形的每个坐标应用一个变换函数。在适当的位置修改几何图形。如果不想修改几何图形，请首先clone()它，然后在克隆上使用此函数
appendLinearRing(linearRing)	在多边形上追加线性环
clone()	把几何图形复制一份
getCoordinates()	返回点的坐标
setCoordinates(coordinates, opt_layout)	设置点的坐标
getFirstCoordinate()	返回几何图形的第一个坐标
getLastCoordinate()	返回几何图形的最后一个坐标
getInteriorPoint()	返回多边形的内部点
getLinearRing(index)	返回多边形几何的第n个线性环。如果给定索引超出范围，则返回null。外部线性环在索引0处可用，而内部环在索引1及以上处可用
getLinearRings()	返回多边形的线性环
getLinearRingCount()	返回多边形的环数，这包括外部环和任何内部环
getLayout()	返回几何图形的Layout
getType()	得到这个几何图形的类型
getArea()	返回投影平面上多边形的面积
intersectsExtent(extent)	测试几何形状和通过的范围是否相交
rotate(angle, anchor)	围绕给定的坐标旋转几何图形。这将修改现有的几何坐标
scale(sx, opt_sy, opt_anchor)	缩放几何图形(可选原点)。这将修改现有的几何坐标。sx：x方向上的缩放因子；sy：Y轴上的缩放因子；opt_anchor`：缩放原点(默认为几何范围的中心)
translate(deltaX, deltaY)	翻转几何图形。这将修改现有的几何坐标。如果您想要一个新的几何体，那么首先clone()这个几何体

• VectorTile

矢量平铺图层。

图层用于客户端呈现矢量平铺数据

图层定义

//这里定义的是图层类型(Image/Title/Vector)
const layer = new ol.layer.Vector({
    //矢量图层源  源是用于获取映射块的协议【必须】
    source:new ol.source.Vector(),
    style:[],//图层样式 【必须】
    feature:[],//图层元素 【必须】
})

创建图层

var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
  });
设置值：layer.set("layername", "points");
·添加feature：layer.getSource().addFeature(feature);
·设置要在地图上其他图层之上呈现的图层：layer.setMap(map)
·设置图层的显示与隐藏：layer.setVisible(false)
·ol.layer.Group：是一个用于将多个图层存储在一起的集合类

热力图

var heatmapLayer = new ol.layer.Heatmap({
      gradient: ['#8ea2fb', '#0ff', '#0f0', '#ff0', '#f00'],
      source: new ol.source.Vector({
        features: [new ol.Feature({geometry: new ol.geom.Point([lontitude,latitude])]
      })
    });
    heatmapLayer.set("layername", "heatmap");
    map.addLayer(heatmapLayer);

Overlay (叠置层)

feature为vector图层的数据源提供数据，而叠置层的原理是将DOM元素动态地移动并覆盖到地图中的指定位置，它不属于图层

·创建叠置层：

var overlay = new ol.Overlay({

position: viennaPos,

positioning: 'center-center',

element: document.getElementById('marker'),

stopEvent: false

})

·设置位置：

overlay.setPosition(coordinate)

·清空叠置层：

map.getOverlays().clear()

interaction（交互）

交互需要指定source参数来指定可以对哪些地图源进行交互，例如产生图形、图形编辑、数据捕获等

创建绘图交互

var draw = new ol.interaction.Draw({
        source: vectorSource,
        type: type,
        geometryFunction: geometryFunction
  });

创建移动交互

var modify = new ol.interaction.Modify({    
    source: vectorSource
  });

controls

常用控件

• -- 归属控件（Attribution） —— 用于展示地图资源的版权或者归属，它会默认加入到地图中。

• -- 全屏控件（FullScreen） —— 控制地图全屏展示

• -- 坐标拾取控件（MousePosition） —— 用于在地图上拾取坐标

• -- 鹰眼控件（OverviewMap） —— 生成地图的一个概览图

• -- 旋转控件（Rotate） —— 用于鼠标拖拽旋转地图，它会默认加入到地图中。

• -- 比例尺控件（ScaleLine） —— 用于生成地图比例尺

• -- 滑块缩放控件（ZoomSlider） —— 以滑块的形式缩放地图

• -- 缩放至特定位置控件（ZoomToExtent） —— 用于将地图视图缩放至特定位置

• -- 普通缩放控件（Zoom） —— 普通缩放控件，它会默认加入到地图中。

Event

openlayers中实现注册和解除监听函数功能的类是 ol.Observable，因此任何继承于 ol.Observable 的类的对象实例都具有注册或者解除注册监听器的能力，并且可以分发事件

地图事件	含义
click	无拖动单击
dblclick	无拖动双击
moveend	移动地图结束时
movestart	移动地图开始时
pointerdrag	当拖动指针时触发
pointermove	当指针移动时触发。注意，在触摸设备上，这是在地图平移时触发的，因此与mousemove不同
postcompose
postrender	在映射帧呈现后触发
precompose
propertychange	当属性被更改时触发
rendercomplete	渲染完成时触发，即当前视图的所有源和tile都已加载完毕，所有tile都将淡出
singleclick	一个真正的无拖放和无双击的单击。注意，这个事件被延迟了250毫秒，以确保它不是双击

ol.Observable的方法：

• -- changed()，增加事件对象的版本号（每次事件对象变化，都会增加版本号），并分发 change 事件；

• -- dispatchEvent(event)，分发事件，并调用所有的监听该类型事件的监听器；

• -- getRevision()，获取事件对象的版本号；

• -- on(type, listener, opt_this)，监听 type 类型的事件，若事件触发，则调用 listener 函数；

• -- once(type, listener, opt_this)，监听 type 类型的事件（仅一次），若事件触发，则调用 listener 函数，并移除该监听器；

• -- un(type, listener, opt_this)，移除监听 type 类型的监听函数 listener；

• -- unByKey(key)，移除对应 key 的监听器，key 一般是由 on() 或者 once() 返回的。

• ·常见事件type：https://blog.csdn.net/freeland1/article/details/50127427

• -- click：无论单击，还是双击事件，必定先触发click事件。只不过双击触发两次，单击触发一次

• -- singleclick：单击事件

• -- dblclick：双击事件

• -- pointerdrag：鼠标拖拽事件。是鼠标按下pan地图时触发，在拖拽地图时，pointermove事件也会触发。部分功能类似一般地图的’moving’事件。

• -- pointermove：鼠标移动事件。pointermove很像是mousemove事件，但他们之间并不是一回事。在移动触屏设备中，pointermove是当地图panned之后触发，性质相当于web页面上moveend之后的意思

• -- change:

-- change:layerGroup :地图图层增删时触发。

-- change:size :地图窗口发生变化就会触发，与我们常用的窗口resize接近。

-- change:target :地图绑定的div发生更改时触发，如map.setTartget方法就会触发该事件。

-- change:view :地图view对象发生变化触发。

• -- select：鼠标经过事件

• -- mouseenter：鼠标进入事件

• -- moveend：地图被移动后触发

• -- movestart：地图开始移动时触发

• -- postrender：地图被渲染后触发

• -- drawend：划线完成

• -- postcompose：地图渲染中。

• -- precompose：准备渲染，未渲染。

• -- postrender：渲染全部结束。

• ·propertychange：当属性更改时触发

• ·contextmenu：鼠标右键事件名

绘制要素

选择要素

修改要素

删除要素

Source

为layer的子类、interaction的子类提供数据源

数据源

• -- Tile类为瓦片抽象基类，其子类作为各类瓦片数据的数据源。

• -- Vector类为矢量数据源基类，为矢量图层提供具体的数据来源，包括直接组织或读取的矢量数据（Features）、远程数据源的矢量数据（即通过url设置数据源路径）等。若是url设置的矢量数据源，则通过解析器Format（即ol.format.Feature的子类）来解析各类矢量数据，如XML、Text、JSON、GML、KML、GPS、WFS、WKT、GeoJSON等地图数据。

• -- Image类为单一图像基类，其子类为画布（canvas）元素、服务器图片、单个静态图片、WMS单一图像等的数据源。它与Tile类的区别在于，Image类对应的是一整张大图片，而不像瓦片那样很多张小图片，从而无需切片，也可以加载一些地图，适用于一些小场景地图。

清除数据：source.clear()

openLayers现在支持的Source

 ol.source.Source
    ├─ol.source.Tile
    │     ├─ol.source.TileDebug：可用于调试瓦片坐标系
    │     ├─ol.source.TileUTFGrid
    │     └─ol.source.UrlTile
    │           ├─ol.source.VectorTile
    │           └─ol.source.TileImage
    │                 ├─ol.source.TileArcGISRest
    │                 ├─ol.source.BingMaps
    │                 ├─ol.source.TileJSON
    │                 ├─ol.source.TileWMS
    │                 ├─ol.source.WMTS
    │                 ├─ol.source.Zoomify
    │                 └─ol.source.XYZ
    │                       ├─ol.source.CartoDB
    │                       ├─ol.source.OSM
    │                       └─ol.source.Stamen
    ├─ol.source.Image
    │     ├─ol.source.ImageArcGISRest
    │     ├─ol.source.ImageCanvas
    │     ├─ol.source.ImageMapGuide
    │     │─ol.source.ImageStatic
    │     ├─ol.source.ImageWMS
    │     └─ol.source.Raster
    └─ol.source.Vector
          └─ol.source.Cluster

• ·从复杂度来分析，Image类和Vector类都不复杂，其数据格式和来源方式都简单。而Tile类则不一样，由于一些历史问题，多个服务提供商，多种标准等诸多原因，导致要支持世界上大多数的瓦片数据，就需要针对这些差异（这些差异主要是瓦片坐标系不同、分辨率不同等）提供不同的Tile数据源支持

• ·最为复杂的ol.source.Tile，其叶子节点类有很多，大致可以分为几类：

• -- 在线服务的Source：包括ol.source.BingMaps（微软提供的Bing在线地图数据）、ol.source.Stamen（Stamen提供的在线地图数据）。没有自己的地图服务器的情况下，可直接使用它们，加载地图底图。

• -- 支持协议标准的Source：包括ol.source.TileArcGISRest、ol.source.TileWMS、ol.source.WMTS、ol.source.UTFGrid、ol.source.TileJSON。如果要使用它们，首先你得先学习对应的协议，之后必须找到支持这些协议的服务器来提供数据源，这些服务器可以是底图服务提供商提供的，也可以是自己搭建的服务器，关键是得支持这些协议。

• -- ol.source.XYZ：这个需要单独提一下，因为是可以直接使用的，而且现在很多地图服务（在线的，或者自己搭建的服务器）都支持xyz方式的请求。国内在线的地图服务，高德、天地图等，都可以通过这种方式加载，本地离线瓦片地图也可以，用途广泛，且简单易学

Feature

• Feature（要素），即地图上的几何对象，包括点（Point），线（LineString）,多边形（Polygon），圆（Circle），通过ol.interaction.Drew绘制

• Feature为vector图层的数据源提供数据

• Feature类是Vector类用来在地图上展示几何对象，是Vector图层类一个属性。

Feature类有3个部分

• -- Geometry对象:Geometry类是feature对象的基本组成部分，Vector类采用Geometry类来存储一个要素的几何信息

• -- attributes属性：attributes包含要素相关的数据

• -- style属性

方法

• -- destroy():销毁要素对象

• -- clone：复制要素对象

• -- getVisibilrty():判断指定要素是否显示出来

• -- move():将要素对象移动到location，location一般是OpenLayers.LonLat对象

创建

• var feature = new ol.Feature(new ol.geom.Point([lon, lat]),attributes,style)

设置样式

var style = new ol.style.Style({
    image: new ol.style.Icon(({
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: '../image/hdCameraPoint.png'
    }))
  });
  feature.setStyle([style]);

将feature添加到矢量图层中的数据源中

vectorSource.addFeature(feature);

设置值

feature.setProperties({})
feature.set("sign", "车辆布控");
feature.set("camera", camera);

获取值

feature.getProperties({})
feature.get("sign");

动画

划线

选点粘连

插件

ol-ext 实现矢量图层的3D渲染

参考链接

教程