cesium(三)各类在线地图资源比对及使用教程

1 cesium内置资源比较

1.1 Imagery（影像）

通过调研网上数据，如下图所示，（有些可能不准确），排除了部分不符合需求的选项
单独测试了4个地图，通过对比，发现Bing Maps Aerial的清晰度最高

1.1.1 Bing Maps Aerial

1.1.2 Natural Earth II with Shaded Relief, Water, and Drainages

10万米高度下的新疆乌鲁木齐

1.1.3 Blue Marble Next Generation July, 2004

10万米高度下的新疆乌鲁木齐

1.1. 4 Sentinel-2

1.2 Terrain（地形）

1.2.1 Cesium World Terrain

1.3 3DTiles

通过网上调研，调研结果如下（可能一些不太准确），排除了一些选项，单独测试了两个地图，两个地图的表现都算良好，可以根据需求进一步选择。

根据比对结果，下面列举了这两个图形的使用情况

1.3.1 Cesium OSM Buildings

一个来自OpenStreetMap的3D建筑物图层，覆盖整个地球。它包含超过35亿栋建筑物，每个特征数据如名称、地址、建筑物是商业还是住宅等。这些建筑物使用Cesium World Terrain数据来推导出基海拔。
加载慢

1.3.2 Google Photorealistic 3D Tiles

加载快

2 cesium内置资源使用教程

登录cesium js 官网注册账号，注册完成后，点击OPEN ION
点击Asset Depot(资产仓库)，里面有所有的cesium内置的在线资源

当你想使用某个资源时，点击资源右侧的“+”号，将其添加进入自己的资源仓库中

点击后，“+”变为了“-”，这时可以去自己的资产仓库中找资源了
资源右侧有对应的代码示例，可以直接将其复制进入自己的代码中使用

示例代码

<template>
  <!-- Cesium视图容器 -->
  <div id="cesiumContainer" ref="cesiumContainer">
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'; // 导入Cesium
import "./Widgets/widgets.css";   // 导入Cesium的样式
import {
    
     onMounted, ref } from 'vue'; // 导入声明周期"挂载"和ref

//设置cesium token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjA2YWQ1Zi1mMWE1LTQzODAtOTI5MS05OGI1ZjYwODA4OTMiLCJpZCI6MjY4MDQ1LCJpYXQiOjE3MzY0NzYxMDl9.9qoWJ0BMQKg9R9kfvpzsvFgSKcxNOTO-uMFSksc0ZE8';

// 设置Cesium的静态资源路径
window.CESIUM_BASE_URL = "/";
// 创建一个对DOM元素的引用
const cesiumContainer = ref(null);

// 组件挂载后执行的代码
onMounted(async () => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    });
  const layer = viewer.imageryLayers.addImageryProvider(
    await Cesium.IonImageryProvider.fromAssetId(2),
  );
});
</script>

<style>
* {
    
    
  margin: 0;
  padding: 0;
}

#cesiumContainer {
      
      
  width: 100vw;
  /* 使用视口宽度 */
  height: 100vh;
  /* 使用视口高度 */
}
</style>

运行效果

其它3D资源和terrain资源使用方式一样

3 在线加载外置地图资源

3.1 天地图

3.1.1 使用教程

天地图官网
①注册账号并登录

②点击导航栏的开发资源

③进入右上角的控制台

④创建新应用，每个应用对应一个key，后面代码中会用到

⑤应用：回到第③步的页面，随便点击一个地图API

⑥选择想要使用的资源(其实能够发现，资源地址只有中间那块不同，其它是不变的)

⑦应用举例：我是以img_w和cia_w为例的，其它应用类似

const tdtKey = 天地图token;//token获取方法参考上述教程
// 加载天地图影像底图
const tdtBasicLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
    
    
  url: `http://t0.tianditu.com/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=${tdtKey}`,
  layer: "tdtBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible",
}));

// 加载天地图影像地理标签
const tdtLabelLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
    
    
  url: `http://t0.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&format=tiles&tk=${天地图token}`,
  layer: "tdtAnnoLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible",
}));

viewer.imageryLayers.add(tdtBasicLayer);
viewer.imageryLayers.add(tdtLabelLayer);

⑧运行结果

3.1.2 运行效果

①影像图

②矢量图

③地形晕染图

④ 3D图
天地图三维地名服务和地形服务需要利用 cesium 开源三维地球API与天地图扩展插件共同使用，目前支持cesuim1.108。
需要下载插件，并且将cesium换成更低版本的，因此先不考虑。

3.2 高德地图

3.2.1 使用教程

高德提供了自己的API，不需要与cesium集成使用
高德地图更专注于导航服务、位置搜索、交通信息等。
cesium更适合创建交互式的三维地球和地图可视化，两者应用场景不同。
通过影像图的比对，高德比不过cesium。
使用高德，有两种方式

3.2.1.1 下载高德插件使用

①下载插件

npm install @amap/amap-jsapi-loader

②组件引入插件

import AMapLoader from '@amap/amap-jsapi-loader';

③创建应用获得key
登录高德官网
应用管理–>我的应用–>创建新应用

应用名称随便取，应用类型也随便选。

点击添加key

我一般都选web端

提交后多了生成了key和安全密钥

④使用

<template>
  <!-- Cesium视图容器 -->
  <div id="cesiumContainer" ref="cesiumContainer">
  </div>
</template>

<script setup>
import "./Widgets/widgets.css";   // 从src中导入Cesium的样式
import {
    
     onMounted, ref } from 'vue'; // 导入声明周期"挂载"和ref
import AMapLoader from '@amap/amap-jsapi-loader';

// 设置Cesium的静态资源路径
window.CESIUM_BASE_URL = "/";

// 创建一个对DOM元素的引用
const cesiumContainer = ref(null);
const amapKey = '高德官网你自己的key';//去官网获取key

onMounted(() => {
    
    
  // 加载高德地图 API
  AMapLoader.load({
    
    
    key: amapKey,
    version: "2.0",
    plugins: [], // 如果需要加载额外的插件，请在此处指定
  }).then((AMap) => {
    
    
    // 初始化地图实例
    const map = new AMap.Map(cesiumContainer.value, {
    
    
      viewMode: "2D", // 使用2D模式
      zoom: 11, // 地图级别
      center: [116.397428, 39.90923], // 地图中心点
    });

    // 添加默认矢量图层
    const normalLayer = new AMap.TileLayer();
    map.add(normalLayer);

    // 添加卫星图层
    const satelliteLayer = new AMap.TileLayer.Satellite();
    map.add(satelliteLayer);
  }).catch(e => {
    
    
    console.error(e);
  });
});

</script>

<style>
* {
    
    
  margin: 0;
  padding: 0;
}

#cesiumContainer {
      
      
  width: 100vw;
  /* 使用视口宽度 */
  height: 100vh;
  /* 使用视口高度 */
}
</style>

3.2.2.2 直接使用高德瓦片数据

/** 加载高德地图 */
// 加载高德影像底图
const gdBasicLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
    
    
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  style: 'default',
  format: 'image/png',
  tileMatrixSetID: 'GoogleMapsCompatible',
}));

// 加载高德地图影像地理标签
const gdLabelLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
    
    
  url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
  style: 'default',
  format: 'image/jpeg',
  tileMatrixSetID: 'GoogleMapsCompatible',
}));

viewer.imageryLayers.add(gdBasicLayer);
viewer.imageryLayers.add(gdLabelLayer);

3.2.2 运行效果

①影像图

②矢量图

    // 添加默认矢量图层
    const normalLayer = new AMap.TileLayer();
    map.add(normalLayer);

③交通图层

    const trafficLayer = new AMap.TileLayer.Traffic({
    
    
      autoRefresh: true, // 是否自动刷新
      interval: 180 // 刷新间隔，单位秒
    });
    map.add(trafficLayer);

④路网图层

    const roadNetLayer = new AMap.TileLayer.RoadNet();
    map.add(roadNetLayer);