cesium入门学习四

          怎么加载地图效果文件，地图效果的显示。

          学习总结：

          1.cesium入门学习一-CSDN博客

          2.cesium入门学习二-CSDN博客

          3.cesium入门学习三-CSDN博客

1.怎么加载geojson文件，并在html中显示

 1.1 geojson文件来源：

DataV.GeoAtlas地理小工具系列

直接下载这里的json文件，比如我下载省级的文件。

下载好了，重新在项目列表中，建立一个文件夹geojson，存放json文件

一级目录：

二级目录：

china.json只包含国级，china1.json包含省级。

1.2   json文件放入js中，显示效果以及代码

在index.js文件中导入json 文件。

效果：

代码：

var viewer = new Cesium.Viewer("cesiumContainer");

// 加载 GeoJSON 文件
Cesium.GeoJsonDataSource.load("/geojson/china1.json", {
    clampToGround: true // 贴地显示
})
    .then(function (dataSource) {
        // 将 GeoJSON 数据源添加到 Viewer
        viewer.dataSources.add(dataSource);

        // 缩放到 GeoJSON 数据范围
        viewer.flyTo(dataSource);

        // 自定义实体样式
        var entities = dataSource.entities.values;
        entities.forEach(function (entity) {
            // 设置省界线样式
            if (entity.polygon) {
                // Polygon 的填充样式
                entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.2);
                entity.polygon.outline = false; // 填充多边形时隐藏默认边界

                // 添加边界线样式
                var hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now());
                var positions = hierarchy.positions;

                entity.polyline = new Cesium.PolylineGraphics({
                    positions: positions,
                    width: 2,
                    material: Cesium.Color.BLUE
                });
            }
        });
    })
    .catch(function (error) {
        console.error("加载 GeoJSON 时发生错误：", error);
    });

1.3  鼠标悬停，高亮显示省

效果：

js代码：

//第16个程序：鼠标悬停，高亮显示
var viewer = new Cesium.Viewer("cesiumContainer");

// 加载 GeoJSON 文件
Cesium.GeoJsonDataSource.load("/geojson/china1.json", {
    clampToGround: true // 贴地显示
})
    .then(function (dataSource) {
        // 将 GeoJSON 数据源添加到 Viewer
        viewer.dataSources.add(dataSource);

        // 缩放到 GeoJSON 数据范围
        viewer.flyTo(dataSource);

        // 自定义实体样式
        var entities = dataSource.entities.values;
        entities.forEach(function (entity) {
            if (entity.polygon) {
                // 默认 Polygon 填充样式
                entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.2);
                entity.polygon.outline = false; // 填充多边形时隐藏默认边界

                // 默认边界线样式
                var hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now());
                var positions = hierarchy.positions;

                entity.polyline = new Cesium.PolylineGraphics({
                    positions: positions,
                    width: 2,
                    material: Cesium.Color.BLUE,
                    show: false // 默认隐藏边界
                });
            }
        });

        // 鼠标事件处理
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var lastHighlightedEntity = null; // 上一次高亮的实体

        handler.setInputAction(function (movement) {
            // 获取鼠标悬停的实体
            var pickedObject = viewer.scene.pick(movement.endPosition);

            if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.polygon) {
                // 当前实体
                var currentEntity = pickedObject.id;

                // 如果有变化，更新样式
                if (lastHighlightedEntity !== currentEntity) {
                    // 恢复上一个实体样式
                    if (lastHighlightedEntity) {
                        lastHighlightedEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.2);
                        lastHighlightedEntity.polyline.show = false;
                    }

                    // 高亮当前实体
                    currentEntity.polygon.material = Cesium.Color.RED.withAlpha(0.4);
                    currentEntity.polyline.show = true;

                    // 更新记录
                    lastHighlightedEntity = currentEntity;
                }
            } else {
                // 鼠标移出所有区域，恢复样式
                if (lastHighlightedEntity) {
                    lastHighlightedEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.2);
                    lastHighlightedEntity.polyline.show = false;
                    lastHighlightedEntity = null;
                }
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    })
    .catch(function (error) {
        console.error("加载 GeoJSON 时发生错误：", error);
    });