实现步骤

引入相应的库

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

OpenLayer实现自定义坐标点的绘制的更多相关文章

  1. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  2. element-table如何实现自定义表格排序

    这篇文章主要介绍了element-table如何实现自定义表格排序,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. vue如何自定义地址设置@

    这篇文章主要介绍了vue如何自定义地址设置@,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  4. SpringBoot实现自定义事件的方法详解

    这篇文章将用实例来和大家介绍一下如何在SpringBoot中自定义事件来使用观察者模式。文中的示例代码讲解详细,对我们学习SpringBoot有一定的帮助,需要的可以参考一下

  5. React Native 中添加自定义字体的方法

    这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android 自定义View手写签名并保存图片功能

    这篇文章主要介绍了Android 自定义View手写签名并保存图片功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下

  7. Spring Cloud超详细i讲解Feign自定义配置与使用

    这篇文章主要介绍了SpringCloud Feign自定义配置与使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  8. 利用Android实现比较炫酷的自定义View

    自定义View、多线程、网络,被认为是Android开发者必须牢固掌握的最基础的三大基本功,这篇文章主要给大家介绍了关于如何利用Android实现比较炫酷的自定义View的相关资料,需要的朋友可以参考下

  9. Vue+OpenLayer实现测距功能

    OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。本文将通过Vue和OpenLayer实现测距功能 ,需要的可以参考一下

  10. Android自定义gridView仿头条频道拖动管理功能

    这篇文章主要介绍了Android自定义gridView仿头条频道拖动管理功能,本文通过实例代码效果图展示给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部