如何在OpenLayers中实现带箭头标记的线串动画?
求助:OpenLayers实现带箭头标记的线串动画
我已经能基于数据在地图上绘制线串,但想实现带箭头标记的线串动画(如附图所示),恳请OpenLayers社区的各位帮忙解决此问题。
我的myLayerFeature中存储着一组带坐标的要素列表,目前通过循环遍历每个要素来绘制线条,并参考要素移动动画的实现逻辑添加箭头图像,相关代码如下:
遍历要素调用动画函数
$(myLayerFeature).each((index, mapitem1) => { moveArrowOnLine(mapitem1.geometry); });
箭头动画核心函数
function moveArrowOnLine(geometry) { debugger var startCoordinates = geometry.coordinates[0]; var endCoordinates = geometry.coordinates[1]; const startMarker = new ol.Feature({ type: 'icon', geometry: new ol.geom.Point(startCoordinates), }); const endMarker = new ol.Feature({ type: 'icon', geometry: new ol.geom.Point(endCoordinates), }); const position = startMarker.getGeometry().clone(); const geoMarker = new ol.Feature({ type: 'geoMarker', geometry: position, }); const styles = { 'route': new ol.style.Style({ stroke: new ol.style.Stroke({ width: 6, color: [237, 212, 0, 0.8], }), }), 'geoMarker': new ol.style.Style({ image: new ol.style.Icon({ scale: -0.04, anchor: [0, 0.8], anchorXUnits: 'fraction', anchorYUnits: 'fraction', opacity: 1, projection: '3857', src: './images/left-arrow.png', }), image: new ol.style.Circle({ radius: 20, fill: new ol.style.Fill({ color: 'red' }), stroke: new ol.style.Stroke({ color: 'black', width: 2, }), }), }), }; const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [geoMarker, startMarker, endMarker], }), style: function (feature) { return styles[feature.get('type')]; }, }); map.addLayer(vectorLayer); startAnimation(); }
内容的提问来源于stack exchange,提问作者Sanjay Singh
相关产品推荐
相关产品推荐

