电脑商城网站模板,个人自助网站,浙江省城乡建设网站,域名托管本篇介绍一下使用 vue3-openlayers marker 光晕扩散#xff08;光环扩散#xff09;#xff08;postrender 事件和 render 方法#xff09;
1 需求
marker 光晕扩散#xff08;光环扩散#xff09;
2 分析
marker 光晕扩散#xff08;光环扩散#xff09;使用 post…本篇介绍一下使用 vue3-openlayers marker 光晕扩散光环扩散postrender 事件和 render 方法
1 需求
marker 光晕扩散光环扩散
2 分析
marker 光晕扩散光环扩散使用 postrender 事件和 render 方法 关于即时渲染的知识点请看上篇《openlayers marker 光晕扩散光环扩散postrender 事件和 render 方法》
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-layer refvectorLayerRef postrenderhandlePostRenderol-source-vectorol-featureol-geom-point :coordinates[110, 30]/ol-geom-pointol-styleol-style-icon :srciconSrc :scale0.05/ol-style-icon/ol-style/ol-featureol-featureol-geom-point :coordinates[112, 31]/ol-geom-pointol-styleol-style-icon :srciconSrc :scale0.05/ol-style-icon/ol-style/ol-feature/ol-source-vector/ol-vector-layer/ol-mapdiv classtoolbarel-button typeprimary clickhandleClick{{ animationFlag ? 停止 : 开始 }}/el-button/div
/templatescript setup langts
import iconSrc from /assets/image/truck.png;
import { getVectorContext } from ol/render.js;
import { easeOut } from ol/easing.js;
import { Circle, Stroke, Style } from ol/style;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 vectorLayerRef ref(null);
const animationFlag ref(false);
const duration ref([3000, 1000]);
const start ref([0, 0]);const handleClick () {if (!animationFlag.value) {start.value start.value.map(i Date.now());vectorLayerRef.value.vectorLayer.changed();}animationFlag.value !animationFlag.value;
};const handlePostRender e {if (animationFlag.value) {const time e.frameState.time;vectorLayerRef.value.vectorLayer.getSource().getFeatures().forEach((f, idx) {// 时间戳差毫秒let elapsedTime time - start.value[idx];if (elapsedTime duration.value[idx]) {start.value[idx] Date.now();elapsedTime duration.value[idx];}// 获取矢量上下文const vectorContext getVectorContext(e);// elapsedRatio值0到1之间const elapsedRatio elapsedTime / duration.value[idx];const radius easeOut(elapsedRatio) * 25 5;const opacity easeOut(1 - elapsedRatio);const style new Style({image: new Circle({radius: radius,stroke: new Stroke({color: rgba(255, 0, 0, opacity ),width: 1 opacity})})});// 将feature渲染到画布中。vectorContext.drawFeature(f.clone(), style);});mapRef.value.map.render();}
};
/script
style scoped langscss
.toolbar {position: absolute;top: 20px;left: 100px;display: flex;justify-content: center;align-items: center;
}
/style
