自己做的网站怎么放视频,网站建设那家公司好,贵州省建设网站,学风网站建设本篇介绍一下使用vue3-openlayers轨迹回放#xff08;历史轨迹#xff09;#xff08;ol-animation-path实现#xff09;
1 需求
轨迹回放#xff08;历史轨迹#xff09;实时轨迹
2 分析
轨迹回放#xff08;历史轨迹#xff09;#xff0c;一般是一次性拿到所有…本篇介绍一下使用vue3-openlayers轨迹回放历史轨迹ol-animation-path实现
1 需求
轨迹回放历史轨迹实时轨迹
2 分析
轨迹回放历史轨迹一般是一次性拿到所有坐标点使用ol-animation-path可以直接实现
3 实现 templateol-map:loadTilesWhileAnimatingtrue:loadTilesWhileInteractingtruestylewidth: 100%; height: 100%refmapRefol-view refview :centercenter :zoomzoom :projectionprojection /ol-tile-layerol-source-tianditulayerTypeimg:projectionprojection:tkkey:hidpitruerefsourceRef/ol-source-tianditu/ol-tile-layerol-tile-layerol-source-tianditu:isLabeltruelayerTypeimg:projectionprojection:tkkey:hidpitrue/ol-source-tianditu/ol-tile-layerol-vector-layerol-source-vectorol-feature refanimationPathol-geom-line-string :coordinatesdata/ol-geom-line-stringol-style-flowlinecolorrgba(228, 147, 87, 1)color2rgba(228, 64, 0, 1):width10:width210:arrow1//ol-featureol-animation-pathrefpathRefv-ifanimationPath:pathanimationPath?.feature:duration4000:repeat0:speed0.005ol-featureol-geom-point :coordinatesdata[0]/ol-geom-pointol-style :zIndex10ol-style-icon :srciconSrc :width30 :height30 :rotationangle/ol-style-icon/ol-style/ol-feature/ol-animation-path/ol-source-vector/ol-vector-layer/ol-map
/templatescript setup langts
import iconSrc from /assets/image/truck.png;const center ref([121, 31]);
const projection ref(EPSG:4326);
const zoom ref(5);
const mapRef ref();
const key 替换为天地图key;
const sourceRef ref(null);
const animationPath ref(null);
const pathRef ref(null);
const data ref([[110, 30],[110.2, 30],[110.4, 30.2],[110.8, 30.4],[111, 31],[111.3, 31],[111.6, 31],[111.9, 31],[112, 31],[112.3, 31],[112.5, 31],[112.8, 31],[113, 31],[114, 31],[115.3, 32],[115.5, 32],[115.8, 31.8],[116, 31.4],[116.2, 31.1],[116.5, 30.5],[115, 30.2],[114, 29.8],[113, 29.6],[112, 29.4],[111, 30.2],[110, 30.4],[109, 30.6],[108, 31]
]);
const angle ref(0);
/script
style scoped langscss/style speed不存在时会取duation的值二者存一即可都存在speed优先 4 总结
动画比使用定时器丝滑拖拉机图标旋转角度不好根据path进行动态修改
