使用 OpenLayers 5 在地图上添加图标
Add an icon on the map with OpenLayers 5
我正在尝试使用 OpenLayers 5 在地图上添加图标。
我尝试按照网站上的 Openlayers 示例进行操作,但没有成功 (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)
提前致谢。
无意中发现了解决办法。我正在阅读另一段代码来解决另一个问题,在此代码上,创建者使用以下方法插入图标。
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
}))
})
幸运的是,这种方法对我有用,我希望这对其他人有帮助。
我正在尝试使用 OpenLayers 5 在地图上添加图标。
我尝试按照网站上的 Openlayers 示例进行操作,但没有成功 (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)
提前致谢。
无意中发现了解决办法。我正在阅读另一段代码来解决另一个问题,在此代码上,创建者使用以下方法插入图标。
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
}))
})
幸运的是,这种方法对我有用,我希望这对其他人有帮助。