当前位置：首页 > news >正文

Openlayers基础教程|从前端框架到GIS开发系列课程（19）地图控件和矢量图形绘制

news 2025/8/11 10:56:25

1. 地图控件

本篇教程主要介绍以下地图控件：

视图跳转控件
放大缩小控件
全屏控件

实现步骤

1. 初始化地图

上一篇已经介绍了，这一篇直接跳过该步骤。

2. 视图跳转控件

/* 视图跳转控件 */const ZoomToExtent = new ol.control.ZoomToExtent({  extent: [110, 30, 160, 30]});
map.addControl(ZoomToExtent);

3. 放大缩小控件

/* 放大缩小控件 */const zoomslider = new ol.control.ZoomSlider();map.addControl(zoomslider);

4. 全屏控件

//全屏控件 const fullScreen = new ol.control.FullScreen(); map.addControl(fullScreen)

代码示例：

/* 视图跳转控件 */ const ZoomToExtent = new ol.control.ZoomToExtent({   extent: [110, 30, 160, 30], }) map.addControl(ZoomToExtent) /* 放大缩小控件 */ const zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider) //全屏控件 const fullScreen = new ol.control.FullScreen(); map.addControl(fullScreen)

以上我们实现视图跳转、放大缩小和全屏控制三个控件，openlayers中还有很多控件，本篇主要介绍到这里，接下来我们学习一下矢量图形绘制。

2.矢量图形绘制

2.1绘图步骤

1、通过几何信息和样式信息构建要素

2、将要素添加到 矢量数据源

3、将矢量数据源添加到 矢量图层

4、将 矢量图层 添加到地图容器

绘制步骤还是遵循下图逻辑来进行

2.2代码和实现步骤

首先实现地图初始化：

导入ol依赖——设置地图容器的挂载点——初始化openlayers地图——点要素绘制

①.绘制点要素

通过样式信息和几何信息构建点要素

// 通过样式信息和几何信息构建点要素const point = new ol.Feature({  geometry: new ol.geom.Point([114.30, 30.50])});
let style = new ol.style.Style({  // image属性设置点要素的样式  image: new ol.style.Circle({    // radius设置点的半径 单位degree    radius: 10,    fill: new ol.style.Fill({      color: "#ff2d51"    })  })});
point.setStyle(style);

②. 将要素添加到矢量数据源

let source = new ol.source.Vector({  features: [point]});

③.将矢量数据源添加到矢量图层

let layer = new ol.layer.Vector({  source: source});

④. 添加矢量图层到地图容器

map.addLayer(layer)

呈现效果：

⑤. 我们再给点要素设置描边：

stroke: new ol.style.Stroke({  width: 2,  color: "#333"})

代码示例：

/* 1、构建要素 */ var point = new ol.Feature({   geometry: new ol.geom.Point([114.30, 30.50]) }) let style = new ol.style.Style({   image: new ol.style.Circle({     radius: 10,     fill: new ol.style.Fill({       color: "#ff2d51"     }),     stroke: new ol.style.Stroke({       color: "#333",       width: 2     })   }) }) point.setStyle(style); /* 2、将要素添加到矢量数据源 */ const source = new ol.source.Vector({         features: [point] })   /* 3、将矢量数据源添加到矢量图层 */ const layer = new ol.layer.Vector({         source })   /* 4、将矢量图层添加到地图容器 */ map.addLayer(layer)