【CesiumJS】城市行政区划信息展示以及专题信息展示

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与

Cesium是一个非常优秀的Web GIS组件，上手也不是很麻烦。其核心组件View就是一个地图的视窗。默认的的View视窗提供了很丰富的组件和功能，但抱歉的是看起来有点乱且不好看。因此初始化viewer之后，第一步我们要去掉冗余的内容，去掉内容后加载天地图,并且在页面中展示城市行政区划

<template>
  <div id="map"></div>
</template>
<script lang="ts" setup>
  import * as Cesium from 'cesium';
  import { onMounted } from 'vue';
  // 加载地图
  const init = () => {
    const viewer: any = new Cesium.Viewer('map', {
      animation: false, // 左下角的动画仪表盘
      baseLayerPicker: false, // 右上角的图层选择按钮
      geocoder: false, // 搜索框
      homeButton: false, // home按钮
      sceneModePicker: false, // 模式切换按钮
      timeline: false, // 底部的时间轴
      navigationHelpButton: false, // 右上角的帮助按钮，
      fullscreenButton: false // 右下角的全屏按钮
    });
    viewer._cesiumWidget._creditContainer.style.display = 'none'; // 隐藏logo版权
    viewer.imageryLayers.get(0).show = false;   // 不显示原始底图
    // 添加图层
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'https://nanchang.3zyun.com/image/wmts/m/{z}/{x}/{y}' // 服务地址
      })
    );

    //  相机聚焦 将三维球定位到中国
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),//经纬度 高度
      orientation: {
        heading: Cesium.Math.toRadians(348.4202942851978),
        pitch: Cesium.Math.toRadians(-89.74026687972041),
        roll: Cesium.Math.toRadians(0)
      },
      complete: function callback() {
        // 定位完成之后的回调函数
        console.log(' 定位完成之后的回调函数');
      }
    });
    // 加载天地图图层
    const tdt_tk = '02ed99e199228a5d47960a0324894605'; // 一天只能请求一万次啊
    const TDTImgProvider = new Cesium.WebMapTileServiceImageryProvider({
      url:
        'http://t{s}.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=' +
        tdt_tk,
      layer: '天地图影像',
      style: 'default',
      format: 'image/jpeg',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      tileMatrixSetID: 'GoogleMapsCompatible'
    });

    const TDTZJProvider = new Cesium.WebMapTileServiceImageryProvider({
      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.jpg&tk=' +
        tdt_tk,
      layer: '天地图中文注记',
      style: 'default',
      format: 'image/jpeg',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      tileMatrixSetID: 'GoogleMapsCompatible'
    });
    // 1. 展示城市行政区划信息
    // viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./mapjson/中华人民共和国.json')); //简单写法
    viewer.dataSources.add(
      Cesium.GeoJsonDataSource.load('./mapjson/中华人民共和国.json', {
        stroke: Cesium.Color.WHITE,
        fill: Cesium.Color.RED.withAlpha(0.5),
        strokeWidth: 5
      })
    );

    // 2、分色渲染行政区
    Cesium.GeoJsonDataSource.load('./mapjson/中华人民共和国.json').then(function (dataSource) {
      viewer.dataSources.add(dataSource);
      const entities = dataSource.entities.values;
      for (let i = 0; i < entities.length; i++) {
        const entity: any = entities[i];
        // 构造随机颜色
        const color = Cesium.Color.fromRandom({ alpha: 0.6 });
        entity.polygon.material = color;
        entity.polygon.outline = false;
      }
    });
    const fn = () => {
      // 3. 注记标签
      Cesium.GeoJsonDataSource.load('./mapjson/江西省.json').then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        const entities: any = dataSource.entities.values;
        for (let i = 0; i < entities.length; i++) {
          const entity = entities[i];
          // 得到每块多边形的坐标集合
          const polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
          // 根据坐标集合构造BoundingSphere获取中心点坐标
          let polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
          // 将中心点拉回到地球表面
          polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
          viewer.entities.add({
            position: polyCenter,
            label: {
              text: entity.properties.name,
              // showBackground: true, //背景颜色
              // scale: 0.6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直位置
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
              font: '24pt Source Han Sans CN', // 字体样式
              fillColor: Cesium.Color.BLACK, // 字体颜色
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 5,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              eyeOffset: new Cesium.Cartesian3(0, 0, -80000) // 这里设置了就不会被遮盖了，设为负值则在更上层
            }
          });
        }
      });
    };
    // 控制地图内容的显示不同
    viewer.scene.camera.moveEnd.addEventListener(() => {
      const currentMagnitude = viewer.camera.getMagnitude();
      console.log('currentMagnitude - ' + currentMagnitude);
      if (currentMagnitude < 8000000) {
        fn();
      }
    });
    viewer.imageryLayers.addImageryProvider(TDTImgProvider); //添加图层
    viewer.imageryLayers.addImageryProvider(TDTZJProvider);//添加图层
  };

  onMounted(() => {
    init(); //加载
  });
</script>

处理完成后就是一个干净的Cesium页面