我正在尝试为我的OpenLayers图标功能设置一个png图像。这是我一直在尝试的代码:
// CREATE MAP
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(mapJSON)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var projection = ol.proj.get('EPSG:29738');
var rotateControl = ol.control.defaults({rotate: false});
var map = new ol.Map({
layers: [vectorLayer],
target: 'floormap',
logo : false,
controls: rotateControl,
interactions: ol.interaction.defaults({mouseWheelZoom: false}),
view: new ol.View({
center: [130, 80],
zoom: 20.6,
minZoom: 20,
maxZoom: 29,
projection: projection,
rotation: 4.71239
})
});
// CREATE ICON STYLE (icon is in same directory)
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'icon.png'
}))
});
// CREATE ICON WHEN CLICKING ON MAP
map.on('click', function(evt) {
var coord = evt.coordinate;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(coord),
type: 'icon',
});
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var icon = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
map.addLayer(icon);
});
奇怪的是,这是我之前使用的代码完全像这样添加图标图像没有问题,但它现在不能正常工作!
我看不出代码有任何问题,可以吗?