本案例结合天地图，需要天地图token

<template>
     <div ref="cesiumContainer" class="container"></div>
  <operate-box>
    <el-button type="primary" @click="onStartEntity"
      >开始(entity渲染)</el-button
    >
    <el-button type="primary" @click="onStartPimitive"
      >开始(primitive渲染)</el-button
    >
    <el-button type="primary" @click="onClear">清除</el-button>
  </operate-box>
</template>
<script setup>
import * as Cesium from "cesium";
import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
import RoadThroughLine from "@/utils/cesium/roadThrough.js";
import { getGeojson } from "@/utils/cesium/api.js";

// 天地图TOKEN
const token = "05be06461004055923091de7f3e51aa6";
const cesiumContainer = ref(null);
let viewer = null;

// const jsonUrl = "/json/qdRoad_less.geojson";
const jsonUrl = "/qingdaoRoad.geojson";

onMounted(() => {

//   modifyMap({ viewer });
 // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    geocoder: false, // 关闭地理编码搜索
    homeButton: false, // 关闭主页按钮
    sceneModePicker: false, // 关闭场景模式选择器
    baseLayerPicker: false, // 关闭底图选择器
    navigationHelpButton: false, // 关闭导航帮助
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: false, // 关闭全屏按钮
    baseLayer: false, // 关闭默认地图
    terrain: Cesium.Terrain.fromWorldTerrain(), // 加载全球地形 此处若不加载地形，会导致有些3D建筑 下面是悬空的
  });
  viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
  viewer.camera.setView({
  // 从以度为单位的经度和纬度值返回笛卡尔3位置。
       destination: Cesium.Cartesian3.fromDegrees(120.188, 36.67, 200000),
   });
    initMap();
});


let _dataSource = null;
const material = new RoadThroughLine(1000, "/spriteline.png");
const onStartEntity = () => {
  // 道路闪烁线
  _dataSource = new Cesium.GeoJsonDataSource();
  _dataSource.load(jsonUrl).then(function (dataSource) {
    const entities = dataSource.entities.values;
    // 聚焦
    // viewer.zoomTo(entities);
    for (let i = 0; i < entities.length; i++) {
      let entity = entities[i];
      entity.polyline.width = 1.7;
      entity.polyline.material = material;
    }
  });
  viewer.dataSources.add(_dataSource);
};
let primitives = null;
const onStartPimitive = async () => {
  getGeojson(jsonUrl).then((res)=>{
     const  features  = res.res.features;
     console.log("-----res-----", res);
     console.log("-----features-----", res.res);
  const instance = [];
  if (features?.length) {
    features.forEach((item) => {
      const arr = item.geometry.coordinates;
      arr.forEach((el) => {
        let arr1 = [];

        el.forEach((_el) => {
          arr1 = arr1.concat(_el);
        });
        const polyline = new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray(arr1),
          width: 1.7,
          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
        });
        const geometry = Cesium.PolylineGeometry.createGeometry(polyline);
        instance.push(
          new Cesium.GeometryInstance({
            geometry,
            // attributes: {
            //   color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
            // },
          })
        );
      });
    });
    console.log("-----instance-----", Cesium.Material.Spriteline1Source);
    let source = `czm_material czm_getMaterial(czm_materialInput materialInput)
                          {
                             czm_material material = czm_getDefaultMaterial(materialInput);
                             vec2 st = materialInput.st;
                             vec4 colorImage = texture(image, vec2(fract((st.s - speed * czm_frameNumber * 0.001)), st.t));
                             material.alpha = colorImage.a * color.a;
                             material.diffuse = colorImage.rgb * 1.5 ;
                             return material;
                          }`;

    const material = new Cesium.Material({
      fabric: {
        uniforms: {
          color: Cesium.Color.fromCssColorString("#7ffeff"),
          image: "/spriteline.png",
          speed: 10,
        },
        source,
      },
      translucent: function () {
        return true;
      },
    });
    const appearance = new Cesium.PolylineMaterialAppearance();
    appearance.material = material;
    const primitive = new Cesium.Primitive({
      geometryInstances: instance,
      appearance,
      asynchronous: false,
    });

    primitives = viewer.scene.primitives.add(primitive);
   }
  });


};
const onClear = () => {
  // 此处注意不要使用removeAll，将实例都删除的话，再次添加会报错
  _dataSource && viewer.dataSources.remove(_dataSource, false);
  primitives && viewer.scene.primitives.remove(primitives);
};
onUnmounted(() => {
  onClear();
  viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
    url: "http://data.marsgis.cn/terrain",
  });
});

// 加载天地图
const initMap = () => {
  // 以下为天地图及天地图标注加载
  const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({
    url:
      "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
      token,
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w", // 天地图使用 Web 墨卡托投影（EPSG:3857），需确保 tileMatrixSetID: "w"
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });

  // 添加地理标注
  const labelProvider = new Cesium.WebMapTileServiceImageryProvider({
    url:
      "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&tileMatrix={TileMatrix}&tileRow={TileRow}&tileCol={TileCol}&style=default&format=tiles&tk=" +
      token,
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名轮询
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });
  // 天地图影像添加到viewer实例的影像图层集合中
  viewer.imageryLayers.addImageryProvider(tiandituProvider);
  // 天地图地理标注（后添加的会覆盖前面的）
  viewer.imageryLayers.addImageryProvider(labelProvider);
};
</script>

<style scoped lang="less"></style>