Openlayers 实例

https://openlayers.org/en/latest/doc/tutorials/bundle.html

第三方库

• https://github.com/Viglino/ol-ext
• https://github.com/jonataswalker/ol-contextmenu

项目初始化

• 新建文件夹，并进入： mkdir ol-demos && cd ol-demos
• 初始化项目，自动创建：package.json文件
• 安装最新版 ol： npm i -S ol

推荐使用淘宝源

• 安装项目打包工具：npm i -D parcel-bundler

parcel-bundler 的功能与webpack类似，都是资源打包压缩、代码转换、热模块替换等等

编写代码

• index.js
• index.html

编译运行

• 修改package.json 中内容。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
• 命令行中运行：npm start 启动开发服务器
• 浏览器中访问地址：http://localhost:1234
• 命令行中使用快捷键ctrl+c结束开发服务器

交互式绘制矢量图形

普通的点线面图形，通过设置type为相应的要素类型，如Polygon，即可由用户自行绘制（ol/interaction/Draw）。 规则图形：https://openlayers.org/en/latest/examples/draw-shapes.html?q=freehand 使用Draw 的 geometryFunction 选项。

• 正方形是边为4的正多边形。因此，绘制正方形时，Draw 的 type选项为Circle，同时 geometryFunction = createRegularPolygon(4);;
• 绘制长方形时，Draw 的 type选项同样为Circle，但 geometryFunction = createBox();;
• 其他的特殊多边形，例如五角星等，需要根据其与circle 的中心坐标及角度来关系绘制。 按住Shift键自由绘制图形

坐标与投影

ProjectionLike字符串:类似"EPSG:XXXX"

ol.proj模块

主要提供坐标系的转换等操作，默认是4326和3857的转换。

• proj.addCoordinateTransforms()：添加地理转换方法
• proj.fromLonLat()：将经纬度坐标转换到目标坐标系的坐标（默认4326到3857）
• proj.get()：根据给定ProjectionLike字符串获取Projection对象
• proj.getTransform()：获取地理转换方法
• proj.toLonLat()：和fromLonLat是反运算
• proj.transform()：转换坐标值，根据给定的原坐标系和目标坐标系，有可能需要地理转换
• proj.transformExtent()：转换矩形边界框，参数同transform

转换要素

feature.getGeometry().transform('EPSG:3857', 'EPSG:4326')

转换坐标

import {Projection,transform} from 'ol/proj'
//transform(coordinate, source, destination)
transform([x, y], new Projection("EPSG:4326"), new Projection("EPSG:3857"));

转换范围的投影

transformExtent(extent, source, destination)