使用OpenLayers 5在地图上添加一个图标
使用OpenLayers 5在地图上添加一个图标
提问于 2019-04-01 11:32:29
我正试图用OpenLayers 5在地图上添加一个图标。
我试过在站点上遵循Open层示例，但没有成功(https://openlayers.org/en/latest/examples/icon.html)
我认为问题可能是样式，因为当我从功能中删除它时，会在地图上显示一个点，但是当我试图向该点添加样式(即它是图标)时，地图上什么都不会显示。
我在下面发送我使用的代码：
import Point from 'ol/geom/Point'
import { Icon, Style } from 'ol/style.js'
// or
// import Icon from 'ol/style/Icon'
// import Style from 'ol/style/Style'
...
const vectorMarkerSource = new VectorSource()
const vectorMarkerGroup = new VectorLayer({
source: vectorMarkerSource
})
...
this.olmap = new Map({
target: 'map',
layers: [
baseLayerGroup, vectorMarkerGroup
],
view: this.view
})
...
var iconFeature = new Feature({
geometry: new Point([0, 0]),
projection: 'EPSG:4326'
})
// I've already tried the two options of 'src'
var iconStyle = new Style({
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '@/assets/img/marker/marker-blue.png'
// src: '../../assets/img/marker/marker-blue.png'
}))
})
iconFeature.setStyle(iconStyle)
vectorMarkerSource.addFeature(iconFeature)提前谢谢你。
Stack Overflow用户
回答已采纳
发布于 2019-04-01 12:19:06
我偶然发现了一个解决办法。我正在阅读另一段代码以解决另一个问题，在这段代码上，创建者使用以下方法插入一个图标。
import markerIconBlue from '@/assets/img/marker/marker-icon-2x-blue.png'
var iconStyle = new Style({
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: markerIconBlue
}))
})幸运的是，这种方法对我是有效的，我希望这能帮助其他人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55454119
复制相关文章
相似问题
腾讯云开发者
