前言：初学GIS开发是痛苦的，复杂的API加上复杂的样式算法和交互功能，总让人感觉到无从下手。从事GIS开发有一段时间，整理了一些基础，和自己所理解流程，希望能够帮助到需要的人。
- 准备工作：我们采用Vue端进行开发，省去基本Vue搭建部分，直接在文件中入手
初始化地图 初始化map
OpenLayers采用面向对象方式开发，对于前端来说比较容易上手。
下面着手初始化数据：
-
效果图展示
image
简单介绍下Map所用到的几个简单配置项
target
- 用来设置指定的HTML容器
layers
- 用来存放底图（底图）、绘制图层、交互图层等。更多配置项 openlayers官网
layers: [new TileLayer({ source: new OSM() })],
new TileLayer()表示即将请求的图层的类型
TileLayer:瓦块图层 VectorLayer：矢量图层 等等
new OSM()为openlayers 提供的地图图层
LayerGroup
- 这里用到了LayerGroup，可用作对layers的分组，易于管理，地图可理解为一个layer，layer可被追加到map中的layers中，当使用的layer很多时容易照成layers中图层混乱，这是我们引入LayerGroup图层组概念，对layer进行划分储存。
import LayerGroup from 'ol/layer/Group';
let LayerGroup1 = new LayerGroup({ // 地图group
groupName: "baseLayerGroup", // LayerGroup名称
layers: [new TileLayer({ source: new OSM() })], // 在线OSM地图 (可追加多个layer)
zIndex: 100, // 层级
});
let LayerGroup2 = new LayerGroup({ // 绘制图层
groupName: "drawLayerGroup", // LayerGroup名称
zIndex: 100, // 层级
});
new Map({
layers: [LayerGroup1, LayerGroup2],
view: new View({
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
}),
target: 'initMap'
});
view
- 视图的配置项，可在初始中设置地图中心点、缩放等级、投影类型等。更多配置项 openlayers官网
view: new View({
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
projection: 'EPSG:4326', // 投影类型
minZoom: 1, // 最小缩放级别
maxZoom: 19, // 最大缩放级别
}),
controls
- 注册地图中的控件
- 例如注册一个可以在地图上显示鼠标位置的经纬度显示控件
new MousePosition() -
format是openlayers提供格式化工具，第一个参数坐标点，第二个参数为显示模板，第三个选择保留小数点后几位数字
import MousePosition from "ol/control/MousePosition.js";
import { format } from "ol/coordinate";
//鼠标经过显示经纬度
let mousePositionControl = new MousePosition({
coordinateFormat: (coordinate) => {
return format(coordinate, "经度:{x} 纬度:{y}", 2);
},
projection: "EPSG:4326",
target: 'mouse-position',
});
new Map({
layers: [
new TileLayer({ source: new OSM() }), // 地图图层
],
view: new View({
projection: 'EPSG:4326', // 投影类型
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
}),
controls: [mousePositionControl], // 插件导入
target: 'initMap'
});
示例：
image
到此为止，openlayer基础配置结束，下一章将讲述如何在地图上交互、绘制等操作~
整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下哦~