openlayers加點(diǎn)加圓加圖標(biāo)圖片

前言：基于Vue，學(xué)習(xí)openlayers，根據(jù)官網(wǎng)demo，記錄常用功能寫法。本人不是專業(yè)GIS開(kāi)發(fā)，只是記錄，方便后續(xù)查找。

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

openlayers核心：Map對(duì)象、View視圖、Layer圖層、Source來(lái)源、Feature特征等

// 這里就不一點(diǎn)點(diǎn)刪了，按需引入即可 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'

加圖標(biāo)圖片

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

最后效果

加點(diǎn)

// 核心思想和加圖標(biāo)圖片一樣，構(gòu)建Feature，構(gòu)建Source，構(gòu)建Layer，最后添加Layer到map即可 // 加點(diǎn) addPoint () {this.removeCircle()// 創(chuàng)建Feature 設(shè)置點(diǎn)的位置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,// 設(shè)置樣式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) {// 移除點(diǎn)圖層this.map.removeLayer(this.pointLayer)this.pointLayer = null} }

最后效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。