欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • WebGL?多重紋理的使用介紹

    WebGL?多重紋理的使用介紹

    這篇文章主要為大家介紹了WebGL 多重紋理的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • JS區(qū)分Object與Aarry的六種方法總結(jié)

    JS區(qū)分Object與Aarry的六種方法總結(jié)

    下面小編就為大家?guī)硪黄狫S區(qū)分Object與Aarry的六種方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • javascript實現(xiàn)列表切換效果

    javascript實現(xiàn)列表切換效果

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)列表切換效果的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • JAVASCRIPT模式窗口中下載文件無法接收iframe的流

    JAVASCRIPT模式窗口中下載文件無法接收iframe的流

    模式窗口中下載文件,有時在下載時發(fā)現(xiàn)服務(wù)器無法接收iframe的流,因為在模式窗口中沒有觸發(fā)iframe的src重新定向事件
    2013-10-10
  • JavaScript實現(xiàn)通過鍵盤彈鋼琴的效果實例代碼

    JavaScript實現(xiàn)通過鍵盤彈鋼琴的效果實例代碼

    這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)通過鍵盤彈鋼琴效果的相關(guān)資料,通過JS代碼實現(xiàn)了鋼琴鍵盤的交互效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-03-03
  • JavaScript阻止回車提交表單的方法

    JavaScript阻止回車提交表單的方法

    如何防止回車(enter)鍵提交表單,其實很簡單,就一句話。onkeydown="if(event.keyCode==13)return false;"把這句寫在from標簽里面就好了
    2015-12-12
  • 通過大白話理解微信小程序獲取授權(quán)

    通過大白話理解微信小程序獲取授權(quán)

    最近由于公司需要研究了一下微信小程序的開發(fā),特此記錄一下小程序獲取授權(quán)的流程,便于自己理解,下面這篇文章主要給大家介紹了關(guān)于如何通過大白話理解微信小程序獲取授權(quán)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • js簡單實現(xiàn)自動生成表格功能示例

    js簡單實現(xiàn)自動生成表格功能示例

    這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結(jié)合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2020-06-06
  • ES6新特性八:async函數(shù)用法實例詳解

    ES6新特性八:async函數(shù)用法實例詳解

    這篇文章主要介紹了ES6新特性八:async函數(shù)用法,結(jié)合實例形式分析了async函數(shù)的功能、原理、使用方法與相關(guān)注意事項,需要的朋友可以參考下
    2017-04-04
  • 在線編輯器中換行與內(nèi)容自動提取

    在線編輯器中換行與內(nèi)容自動提取

    這幾天在寫在線編輯器,碰到個問題,當使用回車換行時不是你希望的<br>而是<p></p>對或是<div></div>對。使用google搜索,在網(wǎng)上找不到滿意的答案。
    2009-04-04

最新評論