Cesium根据地图的缩放zoom实现不同级别下geojson行政边界的对应展示

实现效果：

随着地图的缩放，展示对应缩放级别下的行政边界。

准备数据：

1.国家行政边界数据 （country.json）

2.省级行政边界数据 （province.json）

3.市级行政边界数据（city.json）

数据形式类似于下图：

准备方法：

以下几种准备的方法可为公用方法，写在js文件中，在需要使用的vue文件中，直接引如使用。

1.加载geojson数据的方法

function addGeoJson(urlStr, colorStr, name, callback, alpha, lineAlpha) {let entity = null;if (!urlStr) return;return new Promise((resolve, reject) => {Cesium.GeoJsonDataSource.load(urlStr).then(dataSource => {polygonDataSource = dataSource;let color;dataSource.name = name;for (let i = 0; i < dataSource.entities.values.length; ++i) {entity = dataSource.entities.values[i];if (!entity.polygon) continue;color = Cesium.Color.fromCssColorString(colorStr).withAlpha(alpha);entity.polygon = new Cesium.PolygonGraphics({hierarchy: entity.polygon.hierarchy._value,outline: false,material: color,classificationType: Cesium.ClassificationType.TERRAIN,zIndex: 10,});entity.polyline = new Cesium.PolylineGraphics({positions: [...entity.polygon.hierarchy._value.positions, entity.polygon.hierarchy._value.positions[0]],width: 2,material: Cesium.Color.fromCssColorString(colorStr).withAlpha(lineAlpha),clampToGround: true,classificationType: Cesium.ClassificationType.TERRAIN,});entity.name = name;entity.elId = entity.properties._adcode._value;Cesium.Cartesian3.fromDegrees(entity.properties.centroid._value[0], entity.properties.centroid._value[1]),entity.cursor = true;}addGeoJsonData.push(dataSource);viewer.dataSources.add(dataSource);callback(dataSource.entities.values);resolve(entity);});});
}

2.获取zoom缩放级别的方法

// 获取层级高度
function heightToZoom() {// height 取整const height = Math.ceil(viewer.camera.positionCartographic.height);const A = 40487.57;const B = 0.00007096758;const C = 91610.74;const D = -40467.74;return (D + (A - D) / (1 + Math.pow(height / C, B))).toFixed(2);
}

3.隐藏或显示geojson数据的方法

// 隐藏或显示边界
function hidenModelByID(name, bool) {if (typeof name === 'string') {if(viewer.dataSources._dataSources) {viewer.dataSources._dataSources.forEach(item=>{if(item._name == name){item.show = bool}})}}
}

实现方式： 

实现思路：在页面初始化时将3种边界数据均加载，通过控制显隐来展示不同缩放级别下的数据。该种方法是为了避免两种缩放级别切换边界展示时加载间隙无边界的情况。

1.初始页面加载3种geojson数据

默认展示国界，剩下两种不展示，同时在mounted中添加监听方法

import provinceData from '@/assets/data/province.json'
import countryData from '@/assets/data/country.json'
import cityData from '@/assets/data/city.json'
import { heightToZoom } from '@/utils/utils'
import { addGeoJson, hidenModelByID } from '@/earth/others/addJsonProvince.js' // 上面添加geojson和隐藏geojson的方法export default {
data() {return {boundaryList: [{id: 'country',name: '国界',data: countryData,minimumLevel: 1,maximumLevel: 3.33,isloaded: true},{id: 'province',name: '省界',data: provinceData,minimumLevel: 3.33,maximumLevel: 4.99,isloaded: false},{id: 'city',name: '市界',data: cityData,minimumLevel: 4.99,maximumLevel: 20,isloaded: false}],countryEntity: null, // 国界实体provinceEntity: null, // 省界实体cityEntity: null, // 市界实体}}
mounted() {this.loadCountryData() // 默认添加国界this.getBoundary() // 添加监听},
methods: {
// 加载国界loadCountryData() {addGeoJson(countryData, '#25FF96', 'country', () => {}, 0.01, 1).then((entity) => {this.countryEntity = entity}) // 添加国界addGeoJson(provinceData, '#25FF96', 'province', () => {}, 0.01, 1).then((entity) => {this.provinceEntity = entityhidenModelByID('province', false)}) // 添加省界addGeoJson(cityData, '#25FF96', 'city', () => {}, 0.01, 1).then((entity) => {this.cityEntity = entityhidenModelByID('city', false)}) // 添加市界},
}
}

2. 添加鼠标缩放事件监听方法

      getBoundary() {hidenModelByID('country', true)hidenModelByID('province', false)hidenModelByID('city', false)viewer.camera.changed.addEventListener(this.cameraChangedListener)},

3.根据缩放层级进行不同geojson数据的展示

cameraChangedListener() {let that = thisconst currentZoomLevel = heightToZoom() // 准备方法中已经写了该方法直接引入使用console.log('zoomLevel', currentZoomLevel)// 根据当前缩放级别加载相应的边界数据that.boundaryList.forEach((boundary) => {if (currentZoomLevel >= boundary.minimumLevel && currentZoomLevel <= boundary.maximumLevel) {this.hiddenAllBoundary()hidenModelByID(boundary.id, true)}})},

4.重置所有geojson数据，仅是全部置为不展示，并没有移除监听 

// 隐藏所有的行政边界hiddenAllBoundary() {hidenModelByID('country', false)hidenModelByID('province', false)hidenModelByID('city', false)},

 5.页面不在需要geojson行政边界时，移除监听，避免影响其他操作

removeBoundary() {this.hiddenAllBoundary()viewer.camera.changed.removeEventListener(this.cameraChangedListener);},