OpenLayer自定义坐标点
秦浩铖 人气:0实现步骤
引入相应的库
import 'ol/ol.css'; import Map from 'ol/Map'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile'; import View from 'ol/View'; import Projection from 'ol/proj/Projection'; import ImageLayer from 'ol/layer/Image' import Static from 'ol/source/ImageStatic' import { getCenter } from 'ol/extent' import Feature from 'ol/Feature' import VectorSource from 'ol/source/Vector' import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style' import { Heatmap as HeatmapLayer } from "ol/layer"; import VectorLyr from 'ol/layer/Vector' import { Overlay } from 'ol' import { Polygon, Point } from "ol/geom"; import { fromLonLat } from "ol/proj"; import Modify from 'ol/interaction/Modify'; import Draw from 'ol/interaction/Draw'; import Snap from 'ol/interaction/Snap'; import MousePosition from 'ol/control/MousePosition' import * as olCoordinate from 'ol/coordinate' import FullScreen from 'ol/control/FullScreen' import Text from 'ol/style/Text'
绘制自定义图标
// 添加标签 addTag() { let src = require('../../../assets/ceshi.png') var element = document.createElement('div') element.className = 'point_icon' var p = document.createElement('p') var img = document.createElement('img') img.setAttribute('id', '123') var div = document.createElement('div') element.appendChild(p) element.appendChild(img) element.appendChild(div) // debugger img.style.width = '25px' img.style.height = '25px' img.src = src div.style.marginTop = '0px' div.innerText = '123' div.style.fontWeight = 'bold' div.style.fontSize = '12px' var pointOverlay = new Overlay({ id: '123', stopEvent: false, element: element, positioning: 'center-center' }) this.map.addOverlay(pointOverlay) // debugger pointOverlay.setPosition([50, 30]) },
获取当前地图所有图层
let overlays = this.map.getOverlays()
判断重新绘制图标位置
setPosition() { let overlays = this.map.getOverlays() if (overlays.array_ && overlays.array_.length > 0) { for (let i = 0; i < overlays.array_.length; i++) { if (overlays.array_[i].element.children[0].children[1] !== undefined) { let name = overlays.array_[i].element.children[0].children[1].attributes['id'].value if (name=== '123') { haveOverlay = true overlays.array_[i].setPosition([116, 67]) } } } } },
效果展示
加载全部内容