关于在vite中cesium引入geojson数据进行遮罩

94 阅读1分钟

今天写代码遇到个问题cesium请求geojson数据的时候,通过GeoJsonDataSource方法请求

//vue3
                  Cesium.GeoJsonDataSource.load('xxxx.json', {
                    clampToGround: true,
                    stroke: Cesium.Color.RED,
                    fill: Cesium.Color.BLUE.withAlpha(0.5)
                  }).then(dataSource => {
                    viewer.dataSources.add(dataSource)
                    viewer.zoomTo(dataSource)
                  })

问题1

从[DataV.GeoAtlas地理小工具系列](datav.aliyun.com/portal/scho… xxx.json 通过 Cesium.GeoJsonDataSource.load 请求的时候,并不能实现相应的区域选择效果

image.png 例如 我选择了锡林郭勒盟,当我把右边的jsonApi 替换到 'xxxx.json' 中的时候,地球可以直接调换到锡林郭勒盟区域,并且进行遮罩展示。 但是下载成json文件的时候 通过 './src/geodats/xxxx.json' 的时候,就不能生效。 于是乎查询资料。 解决方法是 在

import hamishi from '@/assets/geojson/hamishi.json'

在vue3的script里面动态引入数据然后

//vue3
                  Cesium.GeoJsonDataSource.load(hamishi, {
                    clampToGround: true,
                    stroke: Cesium.Color.RED,
                    fill: Cesium.Color.BLUE.withAlpha(0.5)
                  }).then(dataSource => {
                    viewer.dataSources.add(dataSource)
                    viewer.zoomTo(dataSource)
                  })

通过hamishi替换掉 'xxxx.json',就可以解决这个问题。

动态导入有效的原因是将JSON文件的加载从运行时转移到了构建时通过Vite的模块系统确保了数据的可靠性和路径的正确性