如何解决OpenLayers 在地图上显示图标的问题
我在使用 OpenLayers 6.5.0 时遇到了问题。我想在地图上显示一个图标,但尽管多次尝试都失败了。我认为这不是坐标的问题。我尝试了 EPSG 转换。我查看了文档和其他可用示例,但不知道可能导致此问题的原因。
var locations = [
[15.94606,51.57557],[15.94602,51.57572],[15.94604,51.57576],[15.946,51.57581],[15.94588,51.57586],[15.94567,51.57591],[15.94543,51.57597],[15.94527,51.57602],[15.94513,51.57605],[15.94502,51.57607],[15.94497,51.57609],[15.94499,51.57611],[15.94501,51.57616],[15.94525,51.57636]
];
var lineString = new ol.geom.LineString(locations).transform('EPSG:4326','EPSG:3857')
var startMarker = new ol.Feature({
type: 'icon',geometry: new ol.geom.Point(ol.proj.transform([15.94606,'EPSG:4326','EPSG:3857'))
});
var endMarker = new ol.Feature({
type: 'icon',geometry: new ol.geom.Point(lineString.getCoordinateAt(1))
});
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: lineString,name: 'Line'
}),startMarker,endMarker
]
}),style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',opacity: 0.5,width: 5
}),'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5,1],src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
})
})
})
});
var view = new ol.View({
center: ol.proj.fromLonLat([15.94616,51.57555]),zoom: 13
});
var map = new ol.Map({
target: 'map',layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),lineLayer
],target: 'map',controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),view: view
});
body,html,.map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<div id="map" class="map"></div>
解决方法
样式不需要图标属性,只需包含带有笔触样式的图像
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',opacity: 0.5,width: 5
}),image: new ol.style.Icon({
anchor: [0.5,1],src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
})
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。