2020年7月14（cesium)

CesiumJS是一个开源JavaScript库，用于创建具有最佳性能，精度，视觉质量和易用性的世界一流的3D地球和地图。从航空航天到智慧城市再到无人机，各行各业的开发人员都使用CesiumJS创建用于共享动态地理空间数据的交互式Web应用程序

可以看到这里的地图有很多种，我们也是抽取了其中比较有代表性的几个案例，可以下载cesiumlab2这个软件，来帮助我们完成，点击影像->在线->获取服务地址

获取这个地址之后使用我们自己封装的插件

useEffect(() => {
    const earth = new Xt.Earth('earthContainer', {
      destination: [120, 30, 17400000], //相机初始化位置
      orientation: [0, -90, 0], //相机初始化方向
      globeColor: '#1C1C1C',
      backgroundColor: '#1C1C1C',
      operationMode: Xt.Enum.OperationMode.NORMAL,
      sceneMode: Xt.Enum.SceneMode.SCENE3D
    })
    setEarth(earth)
    const imagery = new Xt.ImageryLayer({
      imagery: {
        type: Xt.Enum.ImageryType.URL_TEMPLATE,
        url: 'http://www.google.cn/maps/vt?lyrs=m&gl=CN&x={x}&y={y}&z={z}',
        minimumLevel: 0,
        maximumLevel: 20
      }
    })
    earth.sceneTree.add(imagery);
  }, []);

当然谷歌地图有很多种，比如谷歌电子，谷歌影像，谷歌影像标注等等，所以目前我是写的一个下拉框如图所示

使用react-dat-gui组件的DatSelect方法

可以看到我obj对象里面的value部分是一个变量，对应的就是我需要加载的地图类型

代码如下

//1.通过使用指定的URL模板请求图像,google地图
    const googleElectronic = new Xt.ImageryLayer({
      imagery: {
        type: Xt.Enum.ImageryType.URL_TEMPLATE,
        url: 'http://www.google.cn/maps/vt?lyrs=m&gl=CN&x={x}&y={y}&z={z}',
      },
      initialConfiguration
    })

之前自己对于DatSelect的用法一直都是这么用，后来发现没必要这么麻烦，因为DatSelect为我们封装了方法

可以从源码中看到，我们可以通过传入optionLables，在根据索引获取到对应的值，于是可以这样写

在使用天地图的时候要注意，现在使用所有的天地图都需要token，可以自己注册，也可以在api上面注册http://lbs.tianditu.gov.cn/server/MapService.html

但是请求的网址最好还是不要看这个api，因为我试过都不可以，大概应该是这种格式

const imagery = new Xt.ImageryLayer({
      imagery: {
        type: Xt.Enum.ImageryType.WEB_MAP_TILE_SERVICE,
        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=d99d589f734f4e1ef4aeba30324575dc",
      }
    })