上节我们讲述如何将地图展示在页面，本节我们继续学习如何在地图上进行图形的绘制，废话不多说，开撸。
基本流程
-
new map()---买块地 -
new VectorLayer()、new TileLayer()---盖个房 -
new Feature()---建个屋 -
new Polygon()、new LineString()、new Point()---整点家具 -
new Style()---搞搞装修
流程有了，接下来一步一步进行代码实现
1.初始化地图（买块地）
new Map({
layers: [
new TileLayer({ source: new OSM() }), // 地图图层
],
view: new View({
projection: 'EPSG:4326', // 投影类型
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
}),
target: 'initMap'
});
- 第一篇中参数详细介绍，这里不做过多讲解
2.初始化图层（盖个房）
// 初始化地图（买块地）
let map = new Map({
layers: [
new TileLayer({ source: new OSM() }), // 地图图层
],
view: new View({
projection: 'EPSG:4326', // 投影类型
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
}),
target: 'initMap'
});
// 新建一个空白矢量图层（盖个房子）
let drawLayer = new VectorLayer({ // 矢量图层
source: new VectorSource({ wrapX: false }), // 提供矢量层要素的来源
opacity: 0.5, // 图层透明度
zIndex: 2, // 图层层级
map, // 将图层追加到 指定map中
})
-
VectorLayer-矢量图层用来进行图形绘制（地基） -
VectorSource-提供矢量层要素的来源，图形信息都将追加到此（房屋外墙）
3.初始化图形容器（建个屋）
// 创建一个容器（建个屋子）
let featurePoint = new Feature({
});
-
Feature图形容器，用来存放各种图形（点，线，面）
4.初始化图形（整点家具）
// 创建一个容器（建个屋子）
let featurePoint = new Feature({
// 创建一个点（来点家具）
geometry: new Point([100, 38]),
});
// 创建一个容器（建个屋子）
let featureLineString = new Feature({
// 创建一条线（来点家具）
geometry: new LineString([[80, 40], [120, 30]]),
});
// 创建一个容器（建个屋子）
let featurePolygon = new Feature({
// 创建一个面（来点家具）
geometry: new Polygon([[[80, 50], [130, 50], [130, 20], [80, 20]]]),
});
-
Point-绘制点LineString-绘制线Polygon-绘制多边形
5.追加样式（搞搞装修）
// 创建一个容器（建个屋子）
let featurePoint = new Feature({
// 创建一个点（来点家具）
geometry: new Point([100, 38]),
});
// 设置样式信息（搞搞装修）
featurePoint.setStyle(() => {
return new Style({
image: new CircleStyle({
stroke: new Stroke({
color: 'red',
width: 1,
}),
radius: 4
}),
})
})
- 我们给点绘制一个圆形
-
CircleStyle-提供圆的绘制，stroke-为圆提供基础样式 ，radius-圆的半径
最终效果
// 初始化地图（买块地）
let map = new Map({
layers: [
new TileLayer({ source: new OSM() }), // 地图图层
],
view: new View({
projection: 'EPSG:4326', // 投影类型
center: [100, 38], // 地图中心点经纬度
zoom: 5, // 地图缩放级别
}),
controls: [mousePositionControl], // 插件导入
target: 'initMap'
});
// 新建一个空白矢量图层（盖个房子）
let drawLayer = new VectorLayer({ // 矢量图层
source: new VectorSource({ // 提供矢量层要素的来源
wrapX: false,
}),
opacity: 0.5, // 图层透明度
zIndex: 2, // 图层层级
map, // 将图层追加到 指定map中
})
// 创建一个容器（建个屋子）
let featurePoint = new Feature({
// 创建一个点（来点家具）
geometry: new Point([100, 38]),
});
// 设置样式信息（搞搞装修）
featurePoint.setStyle(() => {
return new Style({
image: new CircleStyle({
stroke: new Stroke({
color: 'red',
width: 1,
}),
radius: 4
}),
})
})
// 创建一个容器（建个屋子）
let featureLineString = new Feature({
// 创建一条线（来点家具）
geometry: new LineString([[80, 40], [120, 30]]),
});
// 创建一个容器（建个屋子）
let featurePolygon = new Feature({
// 创建一个面（来点家具）
geometry: new Polygon([[[80, 50], [130, 50], [130, 20], [80, 20]]]),
});
// 将容器追加到layer图层中
drawLayer.getSource().addFeatures([featurePoint, featureLineString, featurePolygon]);
效果图
到此为止，图形的基本绘制功能就搞定了，看起来是不是很简单。
下一节我们再来详细看一下交互的功能，比如图形不是根据提供已知的数据进行绘制，而是由用户手动绘制，该如何进行操作~
整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下哦~