OpenLayer實現(xiàn)自定義坐標點的繪制
更新時間:2022年04月20日 14:37:22 作者:秦浩鋮
OpenLayers?是一個專為Web?GIS?客戶端開發(fā)提供的JavaScript?類庫包,用于實現(xiàn)標準格式發(fā)布的地圖數(shù)據(jù)訪問。本文將利用OpenLayer實現(xiàn)自定義坐標點的繪制,感興趣的可以了解一下
實現(xiàn)步驟
引入相應(yīng)的庫
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]) } } } } },
效果展示
到此這篇關(guān)于OpenLayer實現(xiàn)自定義坐標點的繪制的文章就介紹到這了,更多相關(guān)OpenLayer自定義坐標點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS區(qū)分Object與Aarry的六種方法總結(jié)
下面小編就為大家?guī)硪黄狫S區(qū)分Object與Aarry的六種方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件,有時在下載時發(fā)現(xiàn)服務(wù)器無法接收iframe的流,因為在模式窗口中沒有觸發(fā)iframe的src重新定向事件2013-10-10JavaScript實現(xiàn)通過鍵盤彈鋼琴的效果實例代碼
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)通過鍵盤彈鋼琴效果的相關(guān)資料,通過JS代碼實現(xiàn)了鋼琴鍵盤的交互效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03