cesium

使用vue3+vite快速构建cesium项目

安装依赖

npm i cesium

在vite.config.js中的plugins添加

plugins: [
  cesium(),
]

初始化地图

<template>
    <div id="viewerDivRef" ref="viewerDivRef" class="w-full h-full"></div>
</template>

<script lang="ts" setup>
    import {onMounted, ref} from 'vue'
    import * as Cesium from 'cesium';
    import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'

    const viewer = ref()

    onMounted(async () => {
        viewer.value = new Cesium.Viewer('viewerDivRef', {});
    })
</script>

地图控件禁用

在cesium当中的控件都在一个Viewer对象中，可以使用viewer对象的属性来禁用控件，

以下代码将所有控件都禁用了。并且由于地图没有设置token地图上会有提示，直接使用css隐藏cesium-viewer-bottom即可。

onMounted(async () => {
  viewer.value = new Cesium.Viewer('viewerDivRef', {
    /**------------------------------------Cesium组件配置-------------------------------------------**/
    animation: false, // 关闭动画
    fullscreenButton: false, // 全屏按钮
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景模式(三维、二维)
    baseLayerPicker: false, // 底图切换
    vrButton: false,// 虚拟现实按钮
    geocoder: false, // 搜索
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助按钮
  });
})

地图定位

当我们需要将视角移动到某一个点的位置时，可以操作viewer对象的camera属性。可以使用flyTo方法，也可以使用setView方法。

使用flyTo方法会有一个动画效果，setView方法没有动画效果。对应duration属性可以设置动画时间。

function flyTo() {
  // 使用flyTo和setView是一样的效果,
  // 项目初始化设置相机位置用setView
  viewer.value.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(115.4175, 33.655, 125000),
    orientation: {
      // 绕垂直于地心的轴旋转角度
      heading: Cesium.Math.toRadians(0.0),
      // 绕纬度线旋转角度
      pitch: Cesium.Math.toRadians(-90.0),
    },
    duration: 3,
  })
}

使用第三方地图

使用高德地图图层

const minimumLevel = 1
const maximumLevel = 18

function addGdMap() {
  // 高德地图
  const imgLayer: Cesium.ImageryLayer = new Cesium.ImageryLayer(
    new Cesium.UrlTemplateImageryProvider({
      maximumLevel,
      minimumLevel,
      //
      // url: 'http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z)'
      // 路网+地名
      // url: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
      // ltype 11  路网 4  地名
      url: `https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4`
    }), {}
  )
  viewer.value.imageryLayers.add(imgLayer)
}

使用天地图图层

使用天地图的图层需要使用天地图的key，可以去天地图官网申请key，

// 服务负载子域
const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

function addTianDiTu() {
  //b11578e50812a12bd62c4dcd3d9dd082
  viewer.value.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({  //调用矢量地图中文注记服务
    // 矢量注记 只有地名标注
    // url: "http://t{s}.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=b11578e50812a12bd62c4dcd3d9dd082",
    // 影像注记 包含了路网和地名
    url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=b11578e50812a12bd62c4dcd3d9dd082",
    subdomains: subdomains,
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
  }));
}