• cesium如何实现区域下钻

            首先，这里讲一下数据源，数据源是拷贝的DataV.GroAtlas里的数据，这里整合了一下之前发的区域高亮的代码来实现的，单击左键使得区域高亮，每次点击都移除上一次点击的模块，双击左键，实现区域下钻并请求对应的数据源，单击右键来实现恢复上一层级。具体代码如下：

    2.  
    3. <script setup>
    4. import * as Cesium from "cesium";
    5. import { ref, onMounted } from "vue";
    6. import {
    7.   province,
    8.   xizang,
    9.   ali,
    10.   naqu,
    11.   changdu,
    12.   linzhi,
    13.   shannan,
    14.   lasan,
    15.   rika,
    16. } from "./json/data";
    17. // import CesiumViewer from "../../cesiumComponents/cesiumViewer.vue";
    18. import CesiumViewer from "@/components/cesiumViewer.vue";
    19. let viewer, dataSource, highlightEntity;
    20. const cesiumViewerRef = ref();
    21.  
    22. const regionValue = ref();
    23. const regionData = ref([]);
    24.  
    25. onMounted(() => {
    26.   viewer = window.cesiumViewer;
    27.   dataSource = new Cesium.GeoJsonDataSource();
    28.   viewer.dataSources.add(dataSource);
    29.   provinceDataSource();
    30. });
    31. // 移除高亮显示
    32. const removeHighlight = () => {
    33.   if (Cesium.defined(highlightEntity)) {
    34.     highlightEntity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
    35.     highlightEntity = null;
    36.   }
    37. };
    38. // 加载西藏
    39. const provinceDataSource = () => {
    40.   // 移除事件监听和高亮显示
    41.   destroyAllEvents();
    42.   dataSource
    43.     .load(province, {
    44.       fill: Cesium.Color.TRANSPARENT,
    45.       stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
    46.       strokeWidth: 20, //轮廓的宽度
    47.       clamToGround: true, //让地图贴地
    48.     })
    49.     .then(() => {
    50.       // 设置行政区域的样式
    51.       const entities = dataSource.entities.values;
    52.       entities?.forEach((item, index) => {
    53.         const entity = entities[index];
    54.         if (entity.name == "西藏自治区") {
    55.           entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
    56.           entity.polygon.outline = true;
    57.           entity.polygon.outlineColor = Cesium.Color.RED;
    58.           var polyPositions = entity.polygon.hierarchy.getValue(
    59.             Cesium.JulianDate.now()
    60.           ).positions;
    61.           var polyCenter =
    62.             Cesium.BoundingSphere.fromPoints(polyPositions).center;
    63.           polyCenter =
    64.             Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
    65.           viewer.entities.add({
    66.             position: polyCenter,
    67.             label: {
    68.               //标签
    69.               scale: 0.6,
    70.               font: "24px sans-serif",
    71.               text: entity.properties.name,
    72.               // showBackground: true,
    73.               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    74.               verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    75.             },
    76.           });
    77.         }
    78.       });
    79.     });
    80.  
    81.   // 双击
    82.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    83.     const pickedObject = viewer.scene.pick(event.position);
    84.     if (
    85.       Cesium.defined(pickedObject) &&
    86.       pickedObject.id instanceof Cesium.Entity &&
    87.       pickedObject.id.name === "西藏自治区"
    88.     ) {
    89.       removeHighlight();
    90.       console.log(pickedObject.id.properties.adcode);
    91.       if (pickedObject.id.properties.adcode) {
    92.         cityDataSource();
    93.         // 移除父级区域
    94.         viewer.entities.removeAll();
    95.       }
    96.  
    97.       // 高亮显示行政区域
    98.     } else {
    99.       removeHighlight();
    100.     }
    101.   }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    102.  
    103.   // 单击
    104.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    105.     const pickedObject = viewer.scene.pick(event.position);
    106.     if (
    107.       Cesium.defined(pickedObject) &&
    108.       pickedObject.id instanceof Cesium.Entity &&
    109.       pickedObject.id.name === "西藏自治区"
    110.     ) {
    111.       removeHighlight();
    112.       // 高亮显示行政区域
    113.       highlightEntity = pickedObject.id;
    114.       regionValue.value = highlightEntity.properties.adcode.getValue()
    115.       highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    116.     } else {
    117.       removeHighlight();
    118.     }
    119.   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    120. };
    121.  
    122. const cityDataSource = () => {
    123.   // 移除事件监听和高亮显示
    124.   destroyAllEvents();
    125.   dataSource
    126.     .load(xizang, {
    127.       stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
    128.       strokeWidth: 20, //轮廓的宽度
    129.       clamToGround: true, //让地图贴地
    130.     })
    131.     .then(() => {
    132.       // 设置行政区域的样式
    133.       const entities = dataSource.entities.values;
    134.       entities?.forEach((item, index) => {
    135.         const entity = entities[index];
    136.         entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
    137.         entity.polygon.outline = true;
    138.         entity.polygon.outlineColor = Cesium.Color.RED;
    139.         var polyPositions = entity.polygon.hierarchy.getValue(
    140.           Cesium.JulianDate.now()
    141.         ).positions;
    142.         var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
    143.         polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
    144.         viewer.entities.add({
    145.           position: polyCenter,
    146.           label: {
    147.             //标签
    148.             scale: 0.6,
    149.             font: "24px sans-serif",
    150.             text: entity.properties.name,
    151.             // showBackground: true,
    152.             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    153.             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    154.           },
    155.         });
    156.       });
    157.     });
    158.   let pickedId = "";
    159.   // 单击
    160.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    161.     const pickedObject = viewer.scene.pick(event.position);
    162.     if (
    163.       Cesium.defined(pickedObject) &&
    164.       pickedObject.id instanceof Cesium.Entity
    165.     ) {
    166.       pickedId = pickedObject.id.id;
    167.       removeHighlight();
    168.       // 高亮显示行政区域
    169.       highlightEntity = pickedObject.id;
    170.       regionValue.value = highlightEntity.properties.adcode.getValue()
    171.       highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    172.     } else {
    173.       removeHighlight();
    174.     }
    175.   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    176.  
    177.   // 双击
    178.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    179.     const pickedObject = viewer.scene.pick(event.position);
    180.     if (
    181.       Cesium.defined(pickedObject) &&
    182.       pickedObject.id instanceof Cesium.Entity
    183.     ) {
    184.       if (pickedObject.id.name == "阿里地区") {
    185.         countyDataSource(ali);
    186.       } else if (pickedObject.id.name == "那曲市") {
    187.         countyDataSource(naqu);
    188.       } else if (pickedObject.id.name == "昌都市") {
    189.         countyDataSource(changdu);
    190.       } else if (pickedObject.id.name == "林芝市") {
    191.         countyDataSource(linzhi);
    192.       } else if (pickedObject.id.name == "山南市") {
    193.         countyDataSource(shannan);
    194.       } else if (pickedObject.id.name == "拉萨市") {
    195.         countyDataSource(lasan);
    196.       } else if (pickedObject.id.name == "日喀则市") {
    197.         countyDataSource(rika);
    198.       }
    199.       removeHighlight();
    200.       // 移除父级区域
    201.       viewer.entities.removeAll();
    202.       // viewer.dataSources.removeAll();
    203.     } else {
    204.       removeHighlight();
    205.     }
    206.   }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    207.  
    208.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    209.     const pickedObject = viewer.scene.pick(event.position);
    210.     if (
    211.       typeof pickedObject == "undefined" ||
    212.       (Cesium.defined(pickedObject) &&
    213.         pickedObject.id instanceof Cesium.Entity &&
    214.         pickedObject.id.id !== pickedId)
    215.     ) {
    216.       removeHighlight();
    217.       // 移除父级区域
    218.       viewer.entities.removeAll();
    219.       provinceDataSource();
    220.     }
    221.   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    222. };
    223.  
    224. const countyDataSource = (data) => {
    225.   // 移除事件监听和高亮显示
    226.   destroyAllEvents();
    227.   dataSource
    228.     .load(data, {
    229.       stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
    230.       strokeWidth: 20, //轮廓的宽度
    231.       clamToGround: true, //让地图贴地
    232.     })
    233.     .then(() => {
    234.       // 设置行政区域的样式
    235.       const entities = dataSource.entities.values;
    236.       entities?.forEach((item, index) => {
    237.         const entity = entities[index];
    238.         entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
    239.         entity.polygon.outline = true;
    240.         entity.polygon.outlineColor = Cesium.Color.RED;
    241.         var polyPositions = entity.polygon.hierarchy.getValue(
    242.           Cesium.JulianDate.now()
    243.         ).positions;
    244.         var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
    245.         polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
    246.         viewer.entities.add({
    247.           position: polyCenter,
    248.           label: {
    249.             //标签
    250.             scale: 0.6,
    251.             font: "24px sans-serif",
    252.             text: entity.properties.name,
    253.             // showBackground: true,
    254.             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    255.             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    256.           },
    257.         });
    258.       });
    259.     });
    260.   // 单击
    261.   let pickedId = "";
    262.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    263.     const pickedObject = viewer.scene.pick(event.position);
    264.     if (
    265.       Cesium.defined(pickedObject) &&
    266.       pickedObject.id instanceof Cesium.Entity
    267.     ) {
    268.       pickedId = pickedObject.id.id;
    269.       removeHighlight();
    270.       // 高亮显示行政区域
    271.       highlightEntity = pickedObject.id;
    272.       highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    273.     } else {
    274.       removeHighlight();
    275.     }
    276.   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    277.  
    278.   viewer.screenSpaceEventHandler.setInputAction((event) => {
    279.     const pickedObject = viewer.scene.pick(event.position);
    280.     if (
    281.       typeof pickedObject == "undefined" ||
    282.       (Cesium.defined(pickedObject) &&
    283.         pickedObject.id instanceof Cesium.Entity &&
    284.         pickedObject.id.id !== pickedId)
    285.     ) {
    286.       removeHighlight();
    287.       // 移除父级区域
    288.       viewer.entities.removeAll();
    289.       cityDataSource();
    290.     }
    291.   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    292. };
    293.  
    294. // 移除事件
    295. const destroyAllEvents = () => {
    296.   // 单击左键
    297.   viewer.screenSpaceEventHandler.removeInputAction(
    298.     Cesium.ScreenSpaceEventType.LEFT_CLICK
    299.   );
    300.   // 双击左键
    301.   viewer.screenSpaceEventHandler.removeInputAction(
    302.     Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    303.   );
    304.   // 单击右键
    305.   viewer.screenSpaceEventHandler.removeInputAction(
    306.     Cesium.ScreenSpaceEventType.RIGHT_CLICK
    307.   );
    308. };
    309. const handleNodeClick = (e) => {
    310.   console.log(e, "========1234");
    311. };
    312. script>
    313.  
    314. <style lang="scss" scoped>
    315. .zkr-el-tree {
    316.   width: 240px;
    317.   height: 500px;
    318.   overflow: auto;
    319.   position: absolute;
    320.   top: 20px;
    321. }
    322. style>

    注：如有问题或者有更好的解决方式可以联系笔者，进行解答及优化。

  • 相关阅读:
    MySQL数据库 —— 常用语句
    在Spring Boot中实现类似SPI机制的功能（二）
    随机抽奖转盘微信小程序项目源码
    vue大屏可视化项目页面全屏展示（强制缩放实现）
    常用的dos网络命令总结
    如何处理 java.lang.NoClassDefFoundError
    训练营第二十九天贪心（简单题目）
    oracle查询历史SQL记录
    kotlin 之几个常见的内联函数（五）
    网络安全（黑客）—自学
  • 原文地址：https://blog.csdn.net/qq_43474235/article/details/134361956