openlayers+vue入门 附代码（1）

因为工作上接触地图相关的开发，浏览网站发现资料并不多 以下是自己总结的一部分 可供参考学习 后续还会慢慢更新，目前已经离线地图已经实现，正在上手交互的功能。

准备工作:

下载openlayers依赖  npm i ol

引入JS文件

https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js

可以直接引入或者下载后自己再引入

创建地图:

<div id='map'></div>

var map = new ol.Map({

      layers: [

        new ol.layer.Tile({

          source: new ol.source.OSM(),

        }),

      ],

      target: "map",

      view: new ol.View({

        projection: "EPSG:4326",

        center: [104, 30],

        zoom: 10,

      }),

    }); 

layers下的属性:

Brightness 亮度，默认为 0 ；

Contrast 对比度，默认为 1 ；

Hue 色调，默认为0 ；

Opacity 透明度，默认为 1 ，即完全透明；

Saturation 饱和度，默认为 1 ；

Source 图层的来源，如果在构造函数中没有传入相应的参数，可以调用 ol.layer.Layer#setSource方法来设置来源： layer.setSource(source) ；

visible，是否可见，默认为 true ；

Extent 图层渲染的区域，即浏览器窗口中可见的地图区域。extent 是一个矩形范围，格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。如果没有设置该参数，图层就不会显示；

minResolution 图层可见的最小分辨率，当图层的缩放级别小于这个分辨率时，图层就会隐藏；

maxResolution 图层可见的最大分辨率，当图层的缩放级别等于或超过这个分辨率时，图层就会隐藏。

view比较重要的属性:

center 是一个坐标[x， y]，表示地图视图的中心位置；
extent 是一个数组对象 – [left, bottom, right, top]，表示地图视图的初始范围；
projection 是地图的投影坐标系统；
resolution 表示地图的分辨率，单位并不是普通的单位面积的像素，而是单位像素表示的距离单位，比如 米/像素；
rotation 表示地图的旋转角度；
zoom 表示地图初始的缩放级别。

常用坐标系：

projection: 'EPSG:4326'与projection: 'EPSG:3857'

系统默认使用EPSG：3857。

坐标系相互转换：用ol.proj

将地理坐标转为投影坐标

//坐标，源投影，目标投影 transform(coordinate, 'EPSG:4326', 'EPSG:3857')

将投影坐标转为地理坐标

//坐标，源投影，目标投影 transform(coordinate, 'EPSG:3857', 'EPSG:4326')

限制地图范围：

view: new View({

        projection: "EPSG:4326",    //使用这个坐标系

        //限制图像范围 [minX,minY,maxX,maxY]

        // 限制地图缩放最大级别为12，最小级别为10

        extent: [113.9, 22.5, 114.3, 22.6],

        zoom:10,

        minZoom: 10,

        maxZoom: 12,

        center: [114.064839,22.548857],  //深圳

      })