import store from "../../store";
|
import mapServer from "./map/mapServer";
|
const mapSetFunc = {
|
layerList: [],
|
place: null,
|
init(res) {
|
this.removeAll();
|
this.place = res.place;
|
switch (res.func) {
|
case "poiMap":
|
this.creatPoiMap(res);
|
break;
|
case "aroundPoi":
|
this.creatAroundPoi(res);
|
break;
|
case "queryRelationship":
|
this.creatQueryRelationship(res);
|
break;
|
case "queryMeta":
|
this.creatQueryMeta(res);
|
break;
|
}
|
},
|
creatQueryMeta(res) {
|
const ids = res.ids;
|
const colors = [];
|
for (var i in ids) {
|
colors.push({
|
name: ids[i].name,
|
color: this.getRandomColor(),
|
ids: ids[i].ids
|
});
|
}
|
store.state.setListColor = colors;
|
store.state.showLenged = true;
|
|
this.setModelChangeColor(colors);
|
},
|
setModelChangeColor(res) {
|
console.log('mapServer.listData',mapServer.listData,config.modelLayer);
|
const modelLayer = mapServer.listData.filter((obj) => {
|
if (obj.name == config.modelLayer) {
|
return obj;
|
}
|
});
|
if (modelLayer.length <= 0) return;
|
earthCtrl.userScene.flyTo(modelLayer[0].layer);
|
modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
const id = feature.getProperty("id");
|
console.log("id**********", id);
|
const color = res.filter((item) => {
|
if (item.ids.indexOf(id) > -1) {
|
return item;
|
}
|
});
|
if (color.length > 0) {
|
return new SmartEarth.Cesium.Color.fromCssColorString(
|
color[0].color
|
);
|
}
|
}
|
}
|
});
|
},
|
getRandomColor() {
|
var letters = "0123456789ABCDEF";
|
var color = "#";
|
for (var i = 0; i < 6; i++) {
|
color += letters[Math.floor(Math.random() * 16)];
|
}
|
return color;
|
},
|
creatQueryRelationship(res) {
|
if (!res.data) return;
|
const center = res.data.center;
|
const centerPoint = { lon: center._x, lat: center._y };
|
const items = res.data.positions;
|
const groupByName = items.reduce((acc, item) => {
|
acc[item.targettype] = acc[item.targettype] || [];
|
acc[item.targettype].push(item);
|
return acc;
|
}, {});
|
const colors = [];
|
for (var key in groupByName) {
|
const color = this.getRandomColor();
|
colors.push({
|
name: key,
|
color: color
|
});
|
this.setShowPathLine(groupByName[key], color, res.func, centerPoint);
|
}
|
this.setShowTextPoint(center);
|
// store.state.setListColor = colors;
|
// store.state.showLenged = true;
|
},
|
setShowTextPoint(res) {
|
const alt = res.height ? res.height + 10 : 100;
|
const richTextPoint = earthCtrl.factory.createRichTextPoint(
|
res.name_1,
|
[res._x, res._y, alt],
|
{
|
fontColor: "#ffff00",
|
fontSize: 18
|
},
|
"0"
|
);
|
var position = SmartEarth.Cesium.Cartesian3.fromDegrees(
|
res._x,
|
res._y,
|
10000
|
);
|
Viewer.camera.setView({
|
destination: position, // 目的地位置
|
orientation: {
|
heading: Cesium.Math.toRadians(0.0), // 方向，以弧度为单位
|
pitch: Cesium.Math.toRadians(-90.0), // 倾斜角，以弧度为单位
|
roll: 0.0 // 滚动角，以弧度为单位
|
}
|
});
|
this.layerList.push({
|
path: richTextPoint,
|
func: "TextPoint"
|
});
|
},
|
setShowPathLine(positions, color, func, centerPoint) {
|
var cities = [];
|
for (var i = 0; i < positions.length; i++) {
|
const item = { lon: positions[i]._x, lat: positions[i]._y };
|
|
if (item.lon != centerPoint.lon && item.lat != centerPoint.lat)
|
cities.push(item);
|
}
|
let pathOption = {
|
width: 3, //线宽（可选）
|
color: color, //线颜色（可选）,
|
LightSpot: true, //是否使用光点效果（可选）
|
LightSpotColor: "#ffffff", //光点颜色（可选）
|
height: 200
|
};
|
var path = earthCtrl.factory.createTrailLinePath(
|
centerPoint,
|
cities,
|
pathOption
|
);
|
this.layerList.push({
|
path: path,
|
func: func
|
});
|
},
|
containsObject(arr, obj) {
|
return arr.some(function (element) {
|
return element.lon === obj.lon && element.lat === obj.lat; // 假设对象有一个名为'id'的属性
|
});
|
},
|
|
creatPoiMap(res) {
|
res.data.forEach((poi,index) => {
|
// const poi = res.data[0];
|
console.log('poi------', poi)
|
const label = earthCtrl.factory.createLabel({
|
name: "创建文本",
|
id: earthCtrl.factory.createUUID(),
|
text: poi.name,//this.getName(poi),
|
font: "22pt monospace",
|
outlineWidth: 2,
|
fillColor: SmartEarth.Cesium.Color.YELLOW,
|
lon: poi.lontitude,
|
lat: poi.lattitude,
|
alt: poi.height ? poi.height + 10 : 100,
|
iDistanceDisplayCondition: (100, 3000)
|
});
|
setTimeout(() => {
|
this.setEntityTitlesChangeColor(poi.seid);
|
}, 200);
|
if (index == 0) {
|
earthCtrl.userScene.flyTo(label);
|
}
|
this.layerList.push({
|
layer: label,
|
func: res.func
|
});
|
});
|
},
|
setEntityTitlesChangeColor(res) {
|
const modelLayer = mapServer.listData.filter((res) => {
|
if (res.name == config.modelLayer) {
|
return res;
|
}
|
});
|
if (modelLayer.length <= 0) return;
|
// for(var i in Viewer.scene.primitives._primitives){
|
// console.log(Viewer.scene.primitives._primitives[i].name);
|
|
// }
|
// debugger
|
// modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
|
// color: {
|
// conditions: [
|
// ['${id} === "'+res+'"', 'rgba(255, 0, 0, 1)'], // 当id匹配时变为红色
|
// ['true', 'rgba(0, 0, 0, 1)'] // 其他情况为蓝色
|
// ]
|
// }
|
// });
|
|
modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
const id = feature.getProperty("id");
|
if (id.toString() == res) {
|
return new SmartEarth.Cesium.Color.fromCssColorString("#FF8C00");
|
}
|
}
|
}
|
});
|
},
|
getName(res) {
|
var name = "";
|
if (res.entityname && res.entityname.indexOf(this.place) > -1) {
|
name = res.entityname;
|
}
|
if (!name) {
|
if (res.entityname) {
|
name = res.entityname;
|
}
|
}
|
return name;
|
},
|
creatAroundPoi(res) {
|
let colors = [];
|
res.data.forEach((element) => {
|
colors.push({
|
name: element.type,
|
color: element.color,
|
ids: element.list
|
});
|
})
|
console.log('colors----',colors);
|
store.state.setListColor = colors;
|
store.state.showLenged = true;
|
this.setModelChangeColor(colors);
|
},
|
creatAroundPoi1111(res) {
|
const poi = res.data;
|
var std = [];
|
var feature = {
|
type: "FeatureCollection",
|
features: []
|
};
|
var ids = [];
|
for (var i in poi) {
|
ids.push(poi[i].seid);
|
const attri = poi[i].height ? poi[i].height + 10 : 100;
|
std.push({
|
type: "Feature",
|
geometry: {
|
type: "Point",
|
coordinates: [poi[i]._x, poi[i]._y, attri]
|
},
|
properties: {
|
name: this.getName(poi[i])
|
}
|
});
|
}
|
feature.features = std;
|
var geoJsonDataSource = new SmartEarth.Cesium.GeoJsonDataSource();
|
|
// 加载GeoJSON数据
|
geoJsonDataSource.load(feature).then((dataSource) => {
|
this.layerList.push({
|
layer: dataSource,
|
func: res.func
|
});
|
Viewer.dataSources.add(dataSource);
|
var entities = dataSource.entities.values;
|
|
// 遍历所有GeoJSON中的点
|
for (var i = 0; i < entities.length; i++) {
|
var entity = entities[i];
|
if (entity.billboard) {
|
entity.billboard.show = false;
|
}
|
// // 设置点的图片（billboard）
|
// entity.billboard = {
|
// image: SmartEarthRootUrl + "Workers/image/mark.png", // 使用properties中的iconUrl作为图片路径
|
// width: 16,
|
// height: 22,
|
// // 文本偏移量
|
// pixelOffset: new SmartEarth.Cesium.Cartesian2(0, -20),
|
// // 图片偏移量
|
// iPixelOffset: new SmartEarth.Cesium.Cartesian2(0, -20)
|
// };
|
entity.label = new SmartEarth.Cesium.LabelGraphics({
|
text: entity.properties.name, // 使用properties中的name作为文本内容
|
font: "10pt monospace",
|
fillColor: new SmartEarth.Cesium.Color.fromCssColorString("#FFFF00"),
|
outlineColor: SmartEarth.Cesium.Color.BLACK,
|
outlineWidth: 2,
|
pixelOffset: new SmartEarth.Cesium.Cartesian2(0, -50),
|
style: SmartEarth.Cesium.LabelStyle.FILL_AND_OUTLINE
|
});
|
}
|
// Viewer.zoomTo(dataSource);
|
earthCtrl.userScene.flyTo(dataSource);
|
});
|
const modelLayer = mapServer.listData.filter((res) => {
|
if (res.name == config.modelLayer) {
|
return res;
|
}
|
});
|
|
if (modelLayer.length <= 0) return;
|
|
modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
const id = feature.getProperty("id");
|
if (ids.indexOf(id) > -1) {
|
return new SmartEarth.Cesium.Color.fromCssColorString("#FF8C00");
|
}
|
}
|
}
|
});
|
},
|
removeAll() {
|
store.state.setListColor = [];
|
store.state.showLenged = false;
|
const modelLayer = mapServer.listData.filter((res) => {
|
if (res.name == config.modelLayer) {
|
return res;
|
}
|
});
|
if (modelLayer.length > 0) {
|
modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
return new SmartEarth.Cesium.Color.fromCssColorString("#FFFFFF");
|
}
|
}
|
});
|
}
|
|
for (var i = 0; i < this.layerList.length; i++) {
|
const obj = this.layerList[i];
|
if (obj.func == "poiMap") {
|
this.layerList[i].layer.removeFromMap();
|
this.layerList.splice(i, 1);
|
i--;
|
} else if (obj.func == "aroundPoi") {
|
Viewer.dataSources.removeAll();
|
this.layerList.splice(i, 1);
|
i--;
|
} else if (obj.func == "queryRelationship") {
|
this.layerList[i].path.deleteObject();
|
this.layerList.splice(i, 1);
|
i--;
|
} else if (obj.func == "TextPoint") {
|
this.layerList[i].path.deleteObject();
|
this.layerList.splice(i, 1);
|
i--;
|
}
|
}
|
}
|
};
|
export default mapSetFunc;
|
