青岛企业网站建设优化,asp.net网站iis与目录权限设置,属于我的网页制作平台的是,广州排名推广实现效果#xff1a;
随着地图的缩放#xff0c;展示对应缩放级别下的行政边界。 准备数据#xff1a;
1.国家行政边界数据 #xff08;country.json#xff09;
2.省级行政边界数据 #xff08;province.json#xff09;
3.市级行政边界数据#xff08;city.json
随着地图的缩放展示对应缩放级别下的行政边界。 准备数据
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);},
