OpenLayers 在 map 上显示图标的问题
[英]OpenLayers problem with displaying icons on map
问题描述
我遇到了 OpenLayers 6.5.0 的问题。 我想在 map 上显示一个图标，但尽管多次尝试我都失败了。 我认为这不是坐标的问题。 我尝试了 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.57609], [15.94497, 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, 51.57557], '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>
1 条回复
1楼 Mike 1 已采纳 2021-01-25 20:22:56
样式不需要图标属性，只需包含带有笔划样式的图像
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'
})
})
使用PNG或JPEG进行OpenLayers地图（缩放/缩放问题）
[英]Using an PNG or JPEG for Map with OpenLayers (Scale/Zoom Problem)
Leaflet：标记图标和 markerCluster 一起显示在 map 上，带 fetch
[英]Leaflet : marker icons and markerCluster displaying together on the map with fetch
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.