vue3使用cesium绘制瓦片图、点云图

cesium加载点云图

1.需要在cesium官网申请token,天地图key
cesium官网地址：https://cesiun.com
天地图:https://www.tianditu.gov.cn
2.这里通过cdn方式引入了

  <link href="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>

3.绘制点云图

<div id="cesiumContainer"></div>

const TDT_tk = ref("689c05c21d2a662c7700b50a692f149e")
// cesiumtoken
const cesium_tk = ref("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmE0ODY4Mi1kNGJk" +
    "LTQ3MDUtODZhYS05MDljZmE4NjUxNjIiLCJpZCI6MTkwMjM0LCJpYXQiOjE3MDU0ODI4OTF9.35qWxPwV6a7CHbS-nN0fV" +
    "gJQCDsVDEOhVn8doA7rAl8")
// pnts初始化
const initPnts = () => {
   //初始页面加载
  Cesium.Ion.defaultAccessToken = cesium_tk.value;
  let viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: false,   // 位置查找工具
    baseLayerPicker: false,// 图层选择器（地形影像服务）
    timeline: false, // 底部时间线
    homeButton: false,// 视角返回初始位置
    fullscreenButton: false, // 全屏
    animation: false,   // 左下角仪表盘（动画器件）
    sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
    navigationHelpButton: false, //导航帮助按钮
  });

  // 去除版权信息
  viewer._cesiumWidget._creditContainer.style.display = "none";

  // // cesium加载点云
  let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: config.JM_API +  userStore.mapData.access,
    maximumScreenSpaceError: 8,
    dynamicScreenSpaceError: true,
    dynamicScreenSpaceErrorDensity: 0.5,
    dynamicScreenSpaceErrorFactor: 128.0,
    pointCloudShading: {
      attenuation: true,
      geometricErrorScale: 0.01,
    },
    show: true,
  }));
  viewer.flyTo(tileset);

  viewer.scene.globe.show = false;
}

cesium加载瓦片图

<div id="cesiumContainer"></div>

const TDT_tk = ref("689c05c21d2a662c7700b50a692f149e")
// cesiumtoken
const cesium_tk = ref("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmE0ODY4Mi1kNGJk" +
    "LTQ3MDUtODZhYS05MDljZmE4NjUxNjIiLCJpZCI6MTkwMjM0LCJpYXQiOjE3MDU0ODI4OTF9.35qWxPwV6a7CHbS-nN0fV" +
    "gJQCDsVDEOhVn8doA7rAl8")
const initDom = () => {
  Cesium.Ion.defaultAccessToken = cesium_tk.value;
  const viewer = new Cesium.Viewer('cesiumContainer', {
    homeButton:false,
    sceneModePicker:false,
    baseLayerPicker:false,
    navigationHelpButton:false,
    animation:false,
    timeline:false,
    fullscreenButton:false,
    vrButton:false,
    infoBox:false
  });

  viewer._cesiumWidget._creditContainer.style.display = "none";

  // 矢量底图
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+TDT_tk.value,
    layer: "tdtVecBasicLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
  }));

  // 瓦片显示区域
  let dom = userStore.mapData.dom
  const rect = GetRectFromMinMaxZoom([dom.bbox[0], dom.bbox[1]], [dom.bbox[2], dom.bbox[3]], dom.zoomMinMax[1])
  function GetRectFromMinMaxZoom(minTileXY, maxTileXY, zoom) {
    const a = new Cesium.WebMercatorTilingScheme();
    const rect1 = a.tileXYToRectangle(minTileXY[0], minTileXY[1], zoom);
    const rect2 = a.tileXYToRectangle(maxTileXY[0], maxTileXY[1], zoom);
    try {
      Cesium.Rectangle.validate(rect1);
      Cesium.Rectangle.validate(rect2); 
      return Cesium.Rectangle.union(rect1, rect2);
    } catch (e) {
      // console.log(e)
      return undefined;
    }
  }
  // dom瓦片显示
  viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    url: config.JM_API + userStore.mapData.access,
    maximumLevel: dom.zoomMinMax[1],
    minimumLevel: dom.zoomMinMax[0],
    rectangle: rect, 
  }))
  viewer.camera.setView({destination: rect});
}

附带一位大佬详细讲解：https://zhuanlan.zhihu.com/p/620468046utm_id=0&wd=&eqid=c5147ad100001d090000000464901fd3