openlayers地图实现地点标注

出现的问题是:我每次添加标注后删除,确实删除了,但是当我再次添加不同的标注时,第一次删除的标注再次一块和第二次的标注同时显示在地图上。

后来发现是iconFeature不能设置全局变量,我设置它为全局变量就会有这个问题,而且点集合(数组)如果设置的是全局变量,删除时也要都先清空数组,不然还会出现这个问题,但是这样还会有一个问题,就是我添加一次然后删除,再添加再删除是没有问题的,如果我添加一次,再添加一次,然后最后再删除,那么只会删除第二次添加的,就是只会删除最近添加的,这个问题等以后在研究吧。现在先把这次解决的代码记下来。页面完整代码。

import 'ol/ol.css';
import {Map, View} from 'ol';
import OSM from 'ol/source/OSM';
import FullScreen from 'ol/control/FullScreen';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
i

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现根据坐标进行地图标注可以通过 `ol.Feature` 和 `ol.source.Vector` 来实现。下面是一个简单的示例代码: ```javascript var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([116.3975, 39.9082])), name: '北京天安门广场' }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9082]), zoom: 10 }) }); ``` 其中,`ol.Feature` 表示一个要素对象,可以包含几何信息和属性信息;`ol.source.Vector` 是数据源,可以包含多个要素对象;`ol.layer.Vector` 是图层对象,用于显示数据源中的要素对象。 在上面的示例代码中,创建了一个 `ol.Feature` 对象,并指定它的几何信息为 `ol.geom.Point` 类型,坐标为 `[116.3975, 39.9082]`,表示北京天安门广场的经纬度坐标。然后创建了一个 `ol.style.Icon` 类型的图标样式,并将其设置为 `ol.Feature` 对象的样式。接着将 `ol.Feature` 对象添加到 `ol.source.Vector` 数据源中,最后将 `ol.source.Vector` 添加到 `ol.layer.Vector` 图层中,并将图层添加到地图中即可。 需要注意的是,需要将经纬度坐标转换为地图坐标。在上面的示例代码中,使用了 `ol.proj.fromLonLat` 方法进行坐标转换。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值