今天写代码遇到个问题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 请求的时候,并不能实现相应的区域选择效果
例如 我选择了锡林郭勒盟,当我把右边的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的模块系统确保了数据的可靠性和路径的正确性