如何解决OpenLayers 6-自定义标记未显示
我创建了地图并放置了一个标记。我唯一可以使用的标记是OpenLayers托管的标记。我在“ img / marker.png”中有自己的标记,但是没有显示?有任何想法吗?我尝试将其移至根文件夹,并使用“ ./img/marker”成功。
import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import {Icon,Style} from 'ol/style';
import {Vector as VectorLayer} from 'ol/layer';
const ukCenterLonLat = [-4.5,55];
const ukCenterWebMercator = fromLonLat(ukCenterLonLat);
const GYLonLat = [1.728,52.5982];
const GYWebMercator = fromLonLat(GYLonLat);
const iconFeature = new Feature({
geometry: new Point(GYWebMercator),//This marker will not move.
name: 'Great Yarmouth',});
const map = new Map({
target: 'map',layers: [
new TileLayer({
source: new OSM()
}),new VectorLayer({
source: new VectorSource({
features: [iconFeature]
}),style: new Style({
image: new Icon({
anchor: [0.5,46],anchorXUnits: 'fraction',anchorYUnits: 'pixels',crossOrigin: 'anonymous',// src: "marker.png",src: 'https://openlayers.org/en/latest/examples/data/icon.png'
})
})
})
],view: new View({
center: ukCenterWebMercator,zoom: 5
})
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。