iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >OpenLayer实现自定义坐标点的绘制
  • 868
分享到

OpenLayer实现自定义坐标点的绘制

2024-04-02 19:04:59 868人浏览 泡泡鱼
摘要

目录实现步骤引入相应的库绘制自定义图标获取当前地图所有图层判断重新绘制图标位置效果展示实现步骤 引入相应的库 import 'ol/ol.CSS'; import Map f

实现步骤

引入相应的库

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

--结束END--

本文标题: OpenLayer实现自定义坐标点的绘制

本文链接: https://www.lsjlt.com/news/146667.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作