基础认知

坐标系（投影）的认知

EPSG:4326：地理坐标系，也是国际标准坐标系，参考平面地是椭球面；是WGS84的代码，经/纬度的坐标数据就是这种格式。
EPSG:3857：投影坐标系，参考平面地是水平面；openlayers的默认坐标系，是google的墨卡托坐标系

openlayers概览

new Map()

最底层，用来装载图层（地图展示图层，地图上的点、线、图片等图层），设置地图容器，设置视图（地图的缩放、中心点等属性）；
一般一个地图里面有一个容器，一个视图，一个或者多个图层。

图层（layer）

地图的核心东西，常用的有地图图层(TileLayer)、图片图层（ImageLayer）、矢量图图层(VectorLayer)等。一个图层可以有多个数据源（source）

数据源（source）

数据源可以是图片，矢量图等；
一个数据源可以包含多个要素（feature）

要素（feature）

要素有很多种类，比如点、线、面等
要素基类有两个部分
Geometry对象：几何对象
attributes属性：包含要素相关的数据

坐标信息(Geometry)

为矢量图层提供特性源；
Geometry有多种格式，例如WKT, GML, KML等格式。

WKT：是一种文本标记语言，用于表示矢量几何对象、空间参照系统及空间参照系统之间的转换。
WKT可以表示的几何对象包括：点，线，多边形，TIN （不规则三角网)及多面体。可以通过几何集合的方式来表示不同维度的几何对象。

点：POINT(6 10, 6 20, 40 20)
线：LINESTRING(3 4,10 50,20 25)

几何图形：

// PLYGON((图形的坐标),(图形的坐标))
POLYGON(
    (1 1, 5 1, 5 5, 1 5, 1 1),
    (2 2, 2 3, 3 3, 3 2, 2 2)
)

多个点：MULTIPOINT(3.5 5.6, 4.8 10.5)

多条线：

MULTILINESTRING(
    (3 4, 10 50, 20 25),
    (-5 -8, -10 -8, -15 -4)
)

多个多边形：

MULTIPOLYGON(
    (
        (1 1, 5 1, 5 5, 1 5, 1 1),
        (2 2, 2 3, 3 3, 3 2, 2 2)
    ),
    ( (6 3, 9 2, 9 4, 6 3) )
)

也可以用：

POLYGON(
    (1 1, 5 1, 5 5, 1 5, 1 1),
    (2 2, 2 3, 3 3, 3 2, 2 2),
    (6 3, 9 2, 9 4, 6 3)
)

图形集合：

GEOMETRYCOLLECTION(
    POINT(4 6),
    LINESTRING(4 6,7 10)
)

范围的认知（exent）

范围就是一个区域范围，如一张图片要在地图上展示，这时候就需要一个范围值来确定这张图片的展示。一般为左上点的坐标和右下点的坐标。

格式为：
// [最小经度，最小纬度，最大经度，最大纬度]
[minX, minY, maxX, maxY]

常用API介绍 —— 地图加载（Map）

这里介绍常用的一些，具体请自己在官网查找（官网API）

import {Map, View} from 'ol'

用于矢量特征渲染样式的容器。通过 set * () 方法对样式或其子样式所做的任何更改都不会生效，直到使用样式的特性或图层被重新呈现。

Map

渲染地图，用于绘制地图绘制文字、线、点

单独引用
```
import Map from 'ol/style/Map'
```

常用参数

名称	说明
controls	设置地图的默认控件（放大/缩小按钮、旋转按钮等）
interactions	设置地图的交互（双击缩放、手机端的旋转地图等） *import as olInteractions from 'ol/Interaction' 中的 olInteractions.defaults**进行设置
layers	图层。如果没有定义，则会呈现一个没有图层的映射
target	映射的容器，元素本身或元素的 id。如果在构建时未指定；则必须调用模块Map.setTarget() 来呈现
view	设置地图的一些信息（坐标系、中心点、初始缩放大小等），除非在构建时或通过模块指定，否则不会获取任何层源

View

设置地图的视图

单独引用
```
import View from 'ol/style/View'
```
常用参数
名称说明
projection 地图的坐标系
center 中心点(一般需要用olProj.fromLonLat转换相对于的坐标系)
zoom 缩放大小，不同的地图有不同的缩放等级限制

名称	说明
projection	地图的坐标系
center	中心点(一般需要用olProj.fromLonLat转换相对于的坐标系)
zoom	缩放大小，不同的地图有不同的缩放等级限制

使用方法

可以去看openlayers学习之路（一）

**import * as olProj from 'ol/proj'**

一般用于转换坐标系

方法

名称	说明
olProj.fromLonLat	将坐标从经/纬度转换成坐标系（投影）用于转换单个点的坐标系，如初始化地图是中心点
olProj.transform	将一个坐标从源投影转换为目标投影。这将返回一个新的坐标(不修改原始坐标)
olProj.transformExtent	从源投影到目标投影转换范围。这将返回一个新的范围(不修改原始范围)

常用API介绍 —— 图层（Layers）

import VectorLayer from 'ol/layer/Vector'

矢量图层
一个矢量图层由数据（source）和样式（style）组成，数据构成矢量图层的要素，样式规定要素显示的方式和外观。

常用参数

名称	说明
className	为这个图层设置 CSS 类名。
source	图层数据源，通过 new VectorSource() 设置
style	图层样式。当设置为 null 时，将只呈现具有自己样式的特性。可通过 new Style() 设置
opacity	设置图层的不透明度
visible	设置图层的能见度

使用方法

    const myLayer = new VectorLayer({
        source: new VectorSource(),
        style: (feature) => {
            return new Style()
        }
    })

    map.addLayer(myLayer)

import ImageLayer from 'ol/layer/Image'

单张图片的矢量图层，可用于任意区段和分辨率的服务器呈现映像；
主要是指服务器端渲染的图像，可能是已经渲染好的图像，或者是每一次请求，都根据请求内容定制化地生成一幅图片，该图层类型支持任意的范围和分辨率。

常用参数

名称	说明
className	为这个图层设置 CSS 类名。
source	图层数据源，通过new Static() 设置
properties	设置自定义属性。
visible	设置图层的能见度
extent	图层渲染的边界范围。图层不会在此范围之外渲染。

用法

    const myLayer = new ImageLayer({
        source: new Static(), // import Static from 'ol/source/ImageStatic'
    })

    map.addLayer(myLayer)

import Static from 'ol/source/ImageStatic'

用于显示单个静态图像的图层源
用于在地图上叠加单张图片，放在 ImageLayer.source

常用参数

名称	说明
url	图片地址
imageSize	图像的大小(以像素为单位)。通常图像的大小是自动检测的，所以只有在自动检测因为某些原因失败时才需要设置。
projection	设置图片投影，需要跟地图的投影相同。如：EPSG:3857
imageExtent	图像在地图坐标中的范围。可以通过 olProj.transformExtent 转换投影类型

用法

    const newSource = new Static({
        url: imgUrl,
        projection: 'EPSG:3857',
        imageExtent: [70, -10, 170, 70],
    })
    
    const myLayer = new ImageLayer({
        source: newSource,
    })

    map.addLayer(myLayer)

import TileLayer from 'ol/layer/Tile'

矢量瓦片图层，对于层来源，提供预先渲染，相当于设置渲染地图的一些信息
一般用于放在 Map.layers。简单的说就是 加载瓦片地图

import VectorLayer from 'ol/layer/Vector'

矢量图层，用于地图上添加矢量数据的图层；一般用于添加 地理特征的矢量元素 （具有几何 geometry() 和其他属性）

常用参数

名称	说明
className	为这个图层设置 CSS 类名。
source	图层数据源，通过 new VectorSource() 设置
style	图层样式。当设置为 null 时，将只呈现具有自己样式的特性。可通过 new Style() 设置
zIndex	设置图层的层级
visible	设置图层的能见度

用法

    const myVectorLayer = new VectorLayer{
        source: new VectorSource({  features: [], }),
        style: (feature) => {
            return new Style()
        },
        zIndex: 20,
    })
    
    map.addLayer(myVectorLayer)

常用API介绍 —— 其他常用（样式、要素、几何等）

import {Style, Fill, Stroke, Cicle, Text} from 'ol/style'

用于矢量特征渲染样式的容器；
一般用来在地图上添加图标、文字、自定义矢量图等；
通过 set * () 方法对样式或其子样式所做的任何更改都不会生效，直到使用样式的特性或图层被重新呈现。

方法

名称	说明
Style	总设置，其他设置都可以通过Style来设置
Fill	设置填充颜色
Stroke	设置画笔大小、颜色、线冒风格等
Text	设置文字大小、文字内容、对齐、文字偏移等
Cicle	设置圆的半径、画笔风格、弧度旋转等

import LineString from 'ol/geom/LineString'

绘制线、几何图形 appendCoordinate：添加坐标;

绘制线过程：

添加线的坐标(地理属性geometry)后放到Feature.geometry中，

const geometry = new LineString([
    olProj.fromLonLat([117, 40]),
    olProj.fromLonLat(118, 41])
])

const lineFeature = new Feature()
lineFeature.setGeometry(geometry)

然后吧Feature(要素)放入VectorSource.feature，

const lineSource = new VectorSource()
lineSource.addFeature(lineFeature)

最后放入 VectorLayer.source中。最后把添VectorLayer加入Map中

const lineLayer = new VectorLayer()
lineLayer.setSource(lineSource)

map.addLayer(lineLayer)

import Feature from 'ol/Feature'

具有几何和其他属性属性的地理特征的向量对象，用于设置线、几何图形的显示，矢量图的要素；
是VectorSource 类用来在地图上展示几何对象，是Vector图层类一个属性。这个属性是个要素数组。
矢量图的要素：由由地理属性（geometry）和多个其他的属性（Othter Properties），也可以设置setStyle来单独设置样式。

用法

    const myLayer = new VectorLayer({
        source: new VectorSource({
            features: [],
        })
    })
    const feature = new Feature() // 创建要素
    
    feature.setProperties({}) // 设置自定义属性
    feature.getProperties() // 获取自定义属性
    feature.setStyle(new Style()) // 设置样式
    
    myLayer.getSource().addFeature(feature);
    map.addLayer(myLayer)

import WKT from 'ol/format/WKT'

以 WellKnownText (WKT)格式读写数据的几何格式。
如： POINT(6 10, 6 20, 40 20)
WKT.readFeature() 可以根据wkt数据创建feature，

常用传参：

名称	说明
extent	TILE_pixels单位，以TILE的像素范围为扩展的数据投影，目前一般用WKT数据格式
dataProjection	数据的投影方式
featureProjection	要素（feature）的投影方式

import Overlay from 'ol/Overlay'

主要用于增加弹窗或者一些显示的图层（台风名称、弹窗等），里面用的是HTML展示的，具体参数可以看官方文档用法：用JS创建element（HTML），然后放入Overlay.element中，如果显示的HTML中有关闭功能，则用Overlay.setPosition(undefined) 来影藏

import Point from 'ol/geom/Point'

几何点。

用法

    const myPoint = new Point(new olProj.fromLonLat(point)) // point 是[经度、纬度]
    // 把创建的 点放入Feature.geometry中，或者直接在新建要素中加入
    const feature = new Feature(myPoint) // 创建要素

**import * as olControl from 'ol/control'**

用于添加到映射的控件。如果未指定，则使用模块默认配置。一般地图新建时设置地图控件。

defaults

渲染地图，单独引用：import {defaults} from 'ol/control'

常用传参：

名称	说明
attribution	控件显示映射中与图层源关联的所有属性。此控件是映射中包含的默认控件之一。默认情况下，它将显示在地图的右下角，但是这可以通过使用 css 选择器。
rotate	用于将旋转重置为0的按钮控件。
zoom	一个有两个按钮的控件，一个用于放大，一个用于缩小。此控件是映射的默认控件之一。使用 css 选择器来设计这个控件的样式。
zoomOptions	设置zoom

用法

    new Map({
        controls: olControl.defaults({
            attribution: false, 
            rotate: false, // 用于将旋转重置为0的按钮控件。
            zoom: false,
            zoomOptions: {
                className: '', // 放大缩小控件的类名
                delta: 0.5, // 每次单击时应用缩放增量
                zoomInClassName: '', // 放大按钮的 CSS 类名。
                zoomOutClassName: '', // 缩小按钮的 CSS 类名。
                zoomInLabel: ''; // 放大按钮的文本标签。也可以使用元素(例如 span 元素)代替文本。
                zoomOutLabel: ''; // 缩小按钮的文本标签。也可以使用元素(例如 span 元素)代替文本。
            },
        })
    })

import {unByKey} from 'ol/Observable'

用于解除地图绑定的监听事件

用法
绑定事件：const eventFn = map.on(typeName, (event) => {})
解除事件：unByKey(eventFn)

常用API介绍 —— 地图事件

Map.on()

绑定事件

用法

    Map.on(typeName, fun(event)) // typeName： 事件类型

事件类型：

名称	说明
click	单击
dblclick	双击
singleclick	单击，延迟250毫秒，就算双击不会触发
moveend	鼠标滚动事件
pointermove	鼠标移动事件
pointerdrag	鼠标拖动事件
precompose	地图准备渲染，为渲染
postcompose	地图渲染中
postrender	地图渲染全部结束
change:layerGroup	地图图层增删时触发
change:size	地图窗口发生变化就会触发
change:target	地图绑定的div发生更改时触发
change:view	地图view对象发生变化触发
propertychange	Map对象中任意的property值改变时触发

Map.getEventPixel(event)

获取浏览器事件相对于视区的映射像素位置，可以用event.pixel代替 event一般放的是event.originalEvent

Map.hasFeatureAtPixel(pixel)

检测特征是否与视区中的像素相交，检测中包含的图层可以通过opt_layerfilte进行配置。

Map.getViewport()

获取用作地图视口的元素。就是获取地图的HTML的元素

Map.getView()

获取与此映射关联的视图。视图管理诸如中心和分辨率等属性。

openlayers学习之路（二）—— 基础认知和常用API介绍

基础认知

坐标系（投影）的认知

openlayers概览

new Map()

图层（layer）

数据源（source）

要素（feature）

坐标信息(Geometry)

范围的认知（exent）

常用API介绍 —— 地图加载（Map）

import {Map, View} from 'ol'

Map

View

使用方法

import * as olProj from 'ol/proj'

常用API介绍 —— 图层（Layers）

import VectorLayer from 'ol/layer/Vector'

import ImageLayer from 'ol/layer/Image'

import Static from 'ol/source/ImageStatic'

import TileLayer from 'ol/layer/Tile'

import VectorLayer from 'ol/layer/Vector'

常用API介绍 —— 其他常用（样式、要素、几何等）

import {Style, Fill, Stroke, Cicle, Text} from 'ol/style'

import LineString from 'ol/geom/LineString'

import Feature from 'ol/Feature'

import WKT from 'ol/format/WKT'

import Overlay from 'ol/Overlay'

import Point from 'ol/geom/Point'

import * as olControl from 'ol/control'

defaults

import {unByKey} from 'ol/Observable'

常用API介绍 —— 地图事件

Map.on()

Map.getEventPixel(event)

Map.hasFeatureAtPixel(pixel)

Map.getViewport()

Map.getView()

**import * as olProj from 'ol/proj'**

**import * as olControl from 'ol/control'**