var source = []
|
import { Grid_SelectById ,Grid_DeleteByIds} from '@/api/api'
|
const mapGeo = {
|
source1: null,
|
type: null,
|
feature: [],
|
gridId: null,
|
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;
|
if (res.id == this.gridId) {
|
this.gridId = null;
|
return
|
}
|
this.gridId = res.id;
|
this.feature = [];
|
for (var i = 0; i < length; i++) {
|
this.getGridids(ids[i], length);
|
}
|
},
|
delGridLayer(res) {
|
if(!res)return
|
Viewer.dataSources.remove(Viewer.dataSources.getByName(res.id)[0])
|
},
|
removeGridData(res) {
|
this.delGridLayer(res);
|
var ids = res.style.ids;
|
for (var i = 0; i < ids.length; i++) {
|
this.delGridIds(ids[i]);
|
}
|
},
|
async delGridIds(res) {
|
console.log(res)
|
const data = await Grid_DeleteByIds(res);
|
},
|
async getGridids(id, length, index) {
|
const data = await Grid_SelectById(id)
|
if (data.status == 200) {
|
var val_data = data.data.features[0];
|
val_data.properties["gid"] = id;
|
this.feature.push(val_data)
|
if (this.feature.length == length) {
|
var feature = {
|
"type": "FeatureCollection",
|
"name": "wangge",
|
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
"features": this.feature,
|
}
|
|
this.addGridMenuGeoJson(feature)
|
}
|
}
|
|
|
},
|
addGridMenuGeoJson(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 = this.gridId;
|
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;
|
