使用cesium实现划入指定的行政区域显示高亮

最新推荐文章于 2024-12-03 17:10:43 发布

✎﹏ℳ๓₯㎕

最新推荐文章于 2024-12-03 17:10:43 发布

阅读量3.7k

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43474235/article/details/130046653

版权

该文章介绍了一种在Cesium地图上使用Vue组件加载GeoJSON数据来显示行政区域边界的方法。当鼠标移动到特定区域时，区域会高亮显示。文章提供了详细的代码示例，包括数据源加载、边界样式设置和鼠标监听事件处理，用于实现高亮效果的添加和移除。

摘要由CSDN通过智能技术生成

效果图如下：

完整代码如下：

<template>
  <div>
    <CesiumViewer />
  </div>
</template>

<script setup>
// !项目中出现【Failed to execute 'postMessage' on 'Worker': [object Array] could not be cloned】解决方式
// ? 【https://blog.csdn.net/m0_49239918/article/details/123379640】
import * as Cesium from "cesium";
import { reactive, onMounted, onBeforeUnmount } from "vue";
import CesiumViewer from "@/components/cesiumViewer.vue";
const viewerData = reactive({
  viewer: null,
  dataSource: null,
  highlightEntity: null,
});
onMounted(() => {
  viewerData.viewer = window.cesiumViewer;
  viewerData.dataSource = new Cesium.GeoJsonDataSource();
  viewerData.viewer.dataSources.add(viewerData.dataSource);

  // 加载行政区域的边界数据
  const geojsonUrl =
    "https://geo.datav.aliyun.com/areas_v3/bound/540000_full.json";
  /* const geojsonOptions = {
    stroke: Cesium.Color.fromCssColorString("#f4d32b"),
    fill: Cesium.Color.fromCssColorString("#3df"),
    strokeWidth: 6,
    markerSymbol: "?",
    clampToGround: true,
  };
  // 从 GeoJson 文件加载邻域边界
  const neighborhoodsPromise = Cesium.GeoJsonDataSource.load(
    "./assets/SampleData/full.geojson",
    geojsonOptions
  ); */
  viewerData.dataSource.load(geojsonUrl).then(() => {
    // 设置行政区域的样式
    const entities = viewerData.dataSource.entities.values;
    for (let i = 0; i < entities.length; i++) {
      const entity = entities[i];
      entity.polygon.material = Cesium.Color.RED.withAlpha(0.5);
      entity.polygon.outline = true;
      entity.polygon.outlineColor = Cesium.Color.BLACK;
    }
  });
  // 监听鼠标移动事件
  viewerData.viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewerData.viewer.scene.pick(event.endPosition);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity
    ) {
      removeHighlight();
      // 高亮显示行政区域
      viewerData.highlightEntity = pickedObject.id;
      viewerData.highlightEntity.polygon.material =
        Cesium.Color.YELLOW.withAlpha(0.5);
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
// 移除高亮显示
const removeHighlight = () => {
  if (Cesium.defined(viewerData.highlightEntity)) {
    viewerData.highlightEntity.polygon.material =
      Cesium.Color.RED.withAlpha(0.5);
    viewerData.highlightEntity = null;
  }
};
onBeforeUnmount(() => {
  // 移除事件监听和高亮显示
  viewerData.viewer.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
  removeHighlight();
});
</script>

其中的CesiumViewer组件是初始化地图及设置底图，详细内容可以看之前的文章，