vue+cesium线流动纹理

最新推荐文章于 2025-10-23 10:32:21 发布

原创

最新推荐文章于 2025-10-23 10:32:21 发布 · 373 阅读

index.vue页面

<!--线流动纹理实现-->
<template>
  <div id="mapContainerFirst"></div>
</template>
<script lang="ts" setup>
import { init as initPolylineTrailLinkMaterialProperty } from './PolylineTrailLinkMaterialProperty';
import { onMounted } from "vue";
import { intCesiumMap, flyTo } from "./../../utils/cesiumMapTool";
var viewer: any = null;
var Cesium = window.Cesium;
onMounted(() => {
  viewer = intCesiumMap(Cesium);//初始化地图
  flyTo(117.69344, 39.00051, 13000, 0, -35, 0, 2, viewer);
  Cesium.PolylineTrailLinkMaterialProperty = initPolylineTrailLinkMaterialProperty(Cesium);
  const line = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(getTestData()),
      width: 10,
      material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.fromCssColorString('red'), 5),
      clampToGround: true //贴地
    }
  });

  viewer.entities.add(line);

})
//测试数据
function getTestData() {
  var data =
    [117.55508, 38.99384, 117.56538, 38.99998, 117.56744, 39.00051, 117.57053, 38.99971, 117.57328, 38.99864, 117.57809, 38.9917, 117.57637, 38.98236, 117.58289, 38.9805, 117.59113, 38.98236, 117.59663, 38.98477, 117.59663, 38.9901, 117.59285, 38.99864, 117.58976, 39.00424, 117.59251, 39.00745, 117.59937, 39.00958, 117.60761, 39.01251, 117.61585, 39.01865, 117.61997, 39.02478, 117.62341, 39.02478, 117.62959, 39.02212, 117.63474, 39.01705, 117.63783, 39.01038, 117.64297, 39.00771, 117.6519, 39.01065, 117.66048, 39.01198, 117.66426, 39.01145, 117.66701, 39.00905, 117.6701, 39.00505, 117.6701, 38.99811, 117.66975, 38.99064, 117.66838, 38.9877, 117.67044, 38.9845, 117.67593, 38.98263, 117.68349, 38.98263, 117.68795, 38.9845, 117.68829, 38.9885, 117.68658, 38.99437, 117.68692, 38.99837, 117.69138, 39.00051, 117.69344, 39.00051, 117.69688, 38.99998, 117.70203, 38.99757, 117.70683, 38.99277, 117.70683, 38.98984, 117.71095, 38.9873, 117.71421, 38.98397, 117.71456, 38.9801, 117.71421, 38.97516, 117.71679, 38.97169, 117.71816, 38.97009, 117.72211, 38.96702, 117.77018, 38.9494, 117.80245, 38.94245, 117.91214, 38.9084]
  return data;
}

</script>

PolylineTrailLinkMaterialProperty.ts