上节我们讲述如何将地图展示在页面,本节我们继续学习如何在地图上进行图形的绘制,废话不多说,开撸。
基本流程
-
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]);
效果图
到此为止,图形的基本绘制功能就搞定了,看起来是不是很简单。
下一节我们再来详细看一下交互的功能,比如图形不是根据提供已知的数据进行绘制,而是由用户手动绘制,该如何进行操作~
整理不易,觉得有帮助的朋友可以帮忙点赞分享支持一下哦~
网友评论