openLayers开源地图框架

什么是OpenLayers？

OpenLayers是一个开源的JavaScript库，用于在网页上显示地图。它可以显示从各种资源，如Google Maps、Bing Maps、OpenStreetMap等获取的地图数据。OpenLayers支持广泛的地图数据格式和服务，包括矢量数据和瓦片地图。

官网：https://openlayers.org/

如何使用？

npm i ol

基础示例

<style>
  .map-x {
    width: 600px;
    height: 600px;
  }
</style>
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
 new Map({
  target: 'map', // 绑定html元素
  layers: [ // 图层
    new Tile({
      source: new OSM() // 图层数据源（OSM可以在练习时使用，千万别用在真实项目！！！）
    })
  ],
  view: new View({ // 地图视图
    projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
    center: [114.064839, 22.548857], // 深圳坐标
    zoom: 12 // 地图缩放级别（打开页面时默认级别）
  })
})
</script>

起步：

1.引入 ol.js 和 ol.css

2.创建地图容器 ol.Map

3.设置地图容器宽高

4.ol绑定地图容器 target （传容器标签的id）

5.创建地图底图 layers（支持多图层配置，所以值是数组）

6.设置地图中心 view （配置地图的缩放、中心点、旋转角度等）

常规配置

view视图配置

投影坐标系：

ol默认是EPSG:3857 （通常用于web地图），还有国际通用坐标系代码：EPSG:4326（用于高德地图、百度地图等）

配置方式：ol.view中的projection配置项

中心点

配置方式：ol.view中的center，示例[113.267252,23.137949]为广州的坐标

缩放

配置方式：ol.view中的zoom 数字大地图就放大，可缩放范可以通过maxZoom和minZoom设置

旋转

配置方式：ol.view中的rotation 示例旋转45° Math.PI / 180*45

layers 图层配置

ol.layer.Tils用于加载瓦片地图

Tile里的配置项：

source：图源

visible：图层显示隐藏 值：true/false

opacity：透明度 值：0-1

ol.layer.Vector 用于加载矢量图（优点，不会失真）需要json格式数据

controls 基础控件

比例尺：

`controls: ol.control.defaults.defaults().extend([

const scaleLineControl = new ol.control.ScaleLine({ units: 'degrees' }) // 单位：degrees度、imperial英制英尺、us美制英尺、nautical海里、metric公制。

])`

全屏控件：

controls: ol.control.defaults.defaults().extend([ new ol.control.FullScreen() // 全屏控件 ])

导览控件（缩放到指定范围）：

controls: ol.control.defaults.defaults().extend([ new ol.control.ZoomToExtent({ // 定义要展示区域的4个角的坐标 extent: [ 813079.7791264898, 5929220.284081122, 848966.9639063801, 5936863.986909639 ] }) ])

缩放控件：

controls: ol.control.defaults.defaults().extend([ // 缩放滑块控件 new ol.control.ZoomSlider() ])