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)