openlayers加點加圓加圖標圖片

前言：基于Vue，學習openlayers，根據官網demo，記錄常用功能寫法。本人不是專業GIS開發，只是記錄，方便后續查找。

參考資料：
openlayers官網：https://openlayers.org/
geojson下載網站：https://datav.aliyun.com/portal/school/atlas/area_selector
地圖坐標拾取網站：https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map對象、View視圖、Layer圖層、Source來源、Feature特征等

// 這里就不一點點刪了，按需引入即可 import GeoJSON from 'ol/format/GeoJSON' import Feature from 'ol/Feature' import { Point, Circle as CircleGeo } from 'ol/geom' import VectorSource from 'ol/source/Vector' import Cluster from 'ol/source/Cluster' import TileArcGISRest from 'ol/source/TileArcGISRest' import { Fill, Stroke, Style, Icon, Circle, Text } from 'ol/style' import { Vector as VectorLayer, Tile } from 'ol/layer' import { Draw } from 'ol/interaction' import {boundingExtent} from 'ol/extent' import Overlay from 'ol/Overlay'

加圖標圖片

// 主要思想構建Feature，構建Source，構建Layer，最后添加Layer到map即可 // 相關變量在data中申明即可，eg：iconLayer: null, // 添加圖標 addIcon () {this.removeIcon()const vectorSource = new VectorSource()this.iconLayer = new VectorLayer({source: vectorSource})// 添加圖層this.map.addLayer(this.iconLayer)// 設置圖片位置const iconFeature = new Feature({geometry: new Point([118.339408, 32.261271])})// 設置樣式，這里使用圖片iconFeature.setStyle(new Style({image: new Icon({src: require('@/assets/logo.png')})}))// 將圖片Feature添加到Sourcethis.iconLayer.getSource().addFeature(iconFeature) }, // 取消圖標 removeIcon () {if (this.iconLayer) {// 移除圖層this.map.removeLayer(this.iconLayer)this.iconLayer = null} }

最后效果

加點

// 核心思想和加圖標圖片一樣，構建Feature，構建Source，構建Layer，最后添加Layer到map即可 // 加點 addPoint () {this.removeCircle()// 創建Feature 設置點的位置const pointFeature = new Feature({geometry: new Point([118.339408, 32.261271])})const source = new VectorSource({features: [pointFeature]})this.pointLayer = new VectorLayer({source: source,style: new Style({image: new Circle({radius: 9,// 圓的半徑fill: new Fill({color: 'red'}) // 填充顏色})})})// 最后別忘了把圖層加到地圖上this.map.addLayer(this.pointLayer) }

加圓

// 核心思想同上 // 加圓形 addCircle () {this.removeCircle()// 圓心位置和半徑const circleFeature = new Feature({geometry: new CircleGeo([118.339408, 32.261271], 0.02)})const source = new VectorSource({features: [circleFeature]})// 圖層this.layer = new VectorLayer({source: source,// 設置樣式style: new Style({fill: new Fill({ // 填充color: 'rgba(255, 255, 255, 0.6)'}),stroke: new Stroke({ // 邊框color: '#319FD3',width: 3})})})// 圖層加到地圖上this.map.addLayer(this.layer) }, // 清除圓形 removeCircle () {if (this.layer) {// 移除圓形圖層this.map.removeLayer(this.layer)this.layer = null}if (this.pointLayer) {// 移除點圖層this.map.removeLayer(this.pointLayer)this.pointLayer = null} }

最后效果

總結

以上是生活随笔為你收集整理的openlayers学习——3、openlayers加点加圆加图标图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。