如何用OpenLayer绘制一个长尾词坐标点？

本文共计530个文字，预计阅读时间需要3分钟。

目录+实现步骤+引入相关库+自定义图标+获取当前地图所有图层+判断是否需要重新绘制图标+效果展示+实现步骤+引入相关库javascriptimport 'ol/ol.css';import Map from 'ol/Map';import OSM from 'ol/source/OSM';

目录

• 实现步骤
• 引入相应的库
• 绘制自定义图标
• 获取当前地图所有图层
• 判断重新绘制图标位置
• 效果展示

实现步骤

引入相应的库

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自定义坐标点内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！