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设置点的半径 单位degreeradius: 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)
 原理详解与实例)
