var source = [] import { Grid_SelectById } from '@/api/api' const mapGeo = { source1: null, type: null, feature: [], init(res) { if (this.type && this.type === res) { return this.type = null } this.type = res; switch (res.type) { case "WangGe": this.addWangGeGeoJson(res); break; case "ZhuangHao": this.addZhuangHaoGeoJson(res) break; case "PingQuXian": this.addPingQuXianGeoJson(res) break; case "ZhongQuXian": this.addZhongQuXianGeoJson(res) break; case "zhaiHai": this.addzhaiHaiGeoJson(res) break; case "ZhongPo": this.addZhongPoGeoJson(res) break; } }, addGridLayer(res) { var ids = res.style.ids; var length = ids.length ; this.feature = []; for (var i = 0; i < length; i++) { this.getGridids(ids[i], length-1, i); } }, async getGridids(id, length, index) { const data = await Grid_SelectById(id) if (data.status == 200) { this.feature.push(data.data.features[0]) } console.log(index,length) if (index == length) { var feature = { "type": "FeatureCollection", "name": "wangge", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": this.feature, } console.log(feature); this.addGridMenuGeoJson(feature) } }, addGridMenuGeoJson(res){ console.log(res); var data = Cesium.GeoJsonDataSource.load(res, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: Cesium.Color.ORANGE, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data.then((dataSource) => { dataSource.name = "格网" Viewer.dataSources.add( dataSource ); }) }, addZhongPoGeoJson(res) { var url = layerData.config.Model_URL + res.urls; var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: Cesium.Color.ORANGE, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data.then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); }) }, delGeoSource(res) { if (this.type && this.type == res) { this.type = null } if (!res.type) return; Viewer.dataSources.remove(Viewer.dataSources.getByName(res.type)[0]) }, addzhaiHaiGeoJson(res) { var url1 = layerData.config.Model_URL + res.urls; var color = Cesium.Color.fromCssColorString("rgb(255,0,255)") var data1 = Cesium.GeoJsonDataSource.load(url1, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: color, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data1.then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); }) }, addZhongQuXianGeoJson(res) { var url = layerData.config.Model_URL + res.urls; var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: Cesium.Color.ORANGE, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data.then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); }) }, addPingQuXianGeoJson(res) { var url = layerData.config.Model_URL + res.urls; var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: Cesium.Color.SKYBLUE, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data.then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); }) }, addWangGeGeoJson(res) { var url = layerData.config.Model_URL + res.urls; var data = Cesium.GeoJsonDataSource.load(url, //要加载的 url、GeoJSON 对象或 TopoJSON 对象。 { stroke: Cesium.Color.RED, //折线和多边形轮廓的默认颜色。 fill: Cesium.Color.WHITE.withAlpha(0.2), //多边形内部的默认颜色。 strokeWidth: 3, //折线和多边形轮廓的默认宽度。 } ) data.then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); }) }, addZhuangHaoGeoJson(res) { var url = layerData.config.Model_URL + res.urls; var img = layerData.config.Model_URL + '/Data/img/img1.png'; Cesium.GeoJsonDataSource.load(url).then((dataSource) => { dataSource.name = res.type Viewer.dataSources.add( dataSource ); const entities = dataSource.entities.values; // 设置聚合参数 dataSource.clustering.enabled = true; dataSource.clustering.pixelRange = 20; dataSource.clustering.minimumClusterSize = 2; for (var i = 0; i < entities.length; i++) { const entity = entities[i]; entity.billboard = { image: img, color: Cesium.Color.AQUA, width: 32, height: 32, pixelOffset: new Cesium.Cartesian3(0, -40, 0), }; entity.label = { text: entity.name, font: '14px', pixelOffset: new Cesium.Cartesian3(0, -80, 0), fillColor: Cesium.Color.BLIUE, }; } // 添加监听函数 dataSource.clustering.clusterEvent.addEventListener( function (clusteredEntities, cluster) { // 关闭自带的显示聚合数量的标签 cluster.label.show = false; cluster.billboard.show = false; cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM; } ) }) }, } export default mapGeo;