实现步骤
引入相应的库
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])
}
}
}
}
},效果展示
到此这篇关于OpenLayer实现自定义坐标点的绘制的文章就介绍到这了,更多相关OpenLayer自定义坐标点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
