import axios from "axios";
|
import mapConfig from "./mapConfig";
|
import * as turf from "@turf/turf";
|
import mapServer from "./mapServer";
|
import { getToken } from "../../../utils/auth";
|
import modelLayer from "./modelLayer";
|
import {
|
getPublickey,
|
getQueryEentity,
|
getSettingPublickey,
|
getQueryEentity2
|
} from "../../../api/modelBase.js";
|
import { nextTick } from "vue";
|
import JSEncrypt from "jsencrypt";
|
const layerJson = {
|
layerData: null,
|
url: null,
|
coord: null,
|
rectangularSensor: null,
|
targetList: [],
|
linePath: null,
|
richTextPoint1: null,
|
wfsLayer: null,
|
init(url) {
|
this.url = url;
|
this.getJsonLayer();
|
},
|
getJsonLayer() {
|
const that = this;
|
Cesium.GeoJsonDataSource.load(this.url, {
|
stroke: Cesium.Color.fromCssColorString("#FFFFFF"), //多边形或线的颜色
|
fill: Cesium.Color.fromCssColorString("#FFFFFF"), //多边形或线的颜色
|
strokeWidth: 1, //多边形或线 宽度
|
clampToGround: true //多边形或线 固定在地面上true/false
|
}).then((dataSource) => {
|
const entities = dataSource.entities.values;
|
that.layerData = dataSource;
|
entities.map((item) => {
|
item.polygon.heightReference =
|
Cesium.HeightReference.RELATIVE_TO_GROUND; // 贴地
|
item.polygon.height = 0; // 距地高度0米
|
item.polygon.extrudedHeightReference =
|
Cesium.HeightReference.RELATIVE_TO_GROUND; //拉伸
|
item.polygon.extrudedHeight = item.properties["ELEVATION"]; // 拉伸高度
|
var polyPositions = item.polygon.hierarchy.getValue().positions;
|
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; //中心点
|
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
|
item.position = polyCenter;
|
if (item.id == "965") {
|
that.coord = {
|
lon: item.properties["lon"]._value,
|
lat: item.properties["lat"]._value
|
};
|
}
|
item.label = {
|
text: "",
|
font: "500 20px Helvetica",
|
scale: 1,
|
style: Cesium.LabelStyle.FILL,
|
fillColor: Cesium.Color.WHITE,
|
|
eyeOffset: new Cesium.Cartesian3(
|
0.0,
|
item.polygon.extrudedHeight + 1,
|
-(item.polygon.extrudedHeight + 1)
|
),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
showBackground: true,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
50.0,
|
500.0
|
),
|
backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0) //背景顔色
|
};
|
});
|
Viewer.dataSources.add(dataSource);
|
});
|
},
|
setQyeryData(res) {
|
// this.setTitleSetRest();
|
if (res.indexOf("海军陆战队") > -1) {
|
this.setQueryExtent2();
|
} else if (res.indexOf("军事目标") > -1) {
|
this.setQueryByFiled("军事目标", "#409EFF", false);
|
} else if (res.indexOf("民宅") > -1) {
|
this.setQueryByFiled("民宅", "#808080", false);
|
} else if (res.indexOf("经济目标") > -1) {
|
this.setQueryByFiled("经济目标", "#FFFF00", true);
|
} else if (res.indexOf("堤丰") > -1) {
|
// this.setQueryTF("SubicBayWeapon_wfs", "weapons", "堤丰系统");
|
this.setQueryTF2("堤丰系统");
|
}
|
},
|
|
getPublickey(res) {
|
const encrypt = new JSEncrypt();
|
encrypt.setPublicKey(modelLayer.publickey + "");
|
return encrypt.encrypt(res);
|
},
|
async setQueryFlywire() {
|
const obj = "ejfl = '美空军指挥中心'" + "";
|
const filed = this.getPublickey(obj);
|
const layer = modelLayer.layers.filter((item) => {
|
if (item.name == "建筑") {
|
return item;
|
}
|
});
|
if (layer.length <= 0) return;
|
const data = getQueryEentity({
|
token: getToken(),
|
start: 1,
|
count: 0,
|
containCount: true,
|
layerid: layer[0].id,
|
dbid: modelLayer.dbid,
|
where: filed
|
});
|
},
|
setQueryTF2(name) {
|
// const obj = "weaponname like '%" + name + "%'" + "";
|
const filed = this.getPublickey(name);
|
const layer = modelLayer.layers.filter((item) => {
|
if (item.name == "武器点") {
|
return item;
|
}
|
});
|
if (layer.length <= 0) return;
|
getQueryEentity({
|
token: getToken(),
|
start: 1,
|
count: 0,
|
containCount: true,
|
layerid: layer[0].id,
|
dbid: modelLayer.dbid,
|
where: filed
|
}).then((response) => {
|
if (response.code != 200) return;
|
const geom = response.data.items[0];
|
|
const position = [geom._x, geom._y, 0];
|
const cylinder = {
|
radius: 1500, //半径
|
angle: 30, //扫描角度（可选）
|
speed: 5, //倍速（可选）
|
stackPartitions: 80, //横向网格数（可选）
|
slicePartitions: 80, //纵向网格数（可选）
|
wallColor: "rgba(255,255,255,0)" //扫描墙颜色（可选）
|
};
|
this.rectangularSensor = earthCtrl.factory.createRectangularSensor(
|
position,
|
cylinder
|
);
|
// Viewer.zoomTo(this.rectangularSensor.item);
|
});
|
},
|
setQueryByFiled(name, color) {
|
const filed = this.getPublickey(name);
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) return;
|
var tileset = objItem[0];
|
getQueryEentity({
|
token: getToken(),
|
start: 1,
|
count: 0,
|
containCount: true,
|
layerid: tileset.layerId,
|
dbid: modelLayer.dbid,
|
where: filed
|
}).then((response) => {
|
if (response.code != 200) return;
|
var std = [];
|
const items = response.data.items;
|
items.map((item) => {
|
std.push(item.seid);
|
});
|
nextTick(() => {
|
if (std.length > 0) {
|
this.setTilesetColorChange(tileset, std, color);
|
}
|
});
|
});
|
},
|
setQueryByFiledList(list, flag) {
|
const result = list[flag];
|
const name = result.name;
|
const color = result.color;
|
const obj = "targettype = '" + name + "'" + "";
|
const filed = this.getPublickey(obj);
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) return;
|
var tileset = objItem[0];
|
getQueryEentity({
|
token: getToken(),
|
start: 1,
|
count: 0,
|
containCount: true,
|
layerid: tileset.layerId,
|
dbid: modelLayer.dbid,
|
where: filed
|
}).then((response) => {
|
if (response.code != 200) return;
|
var std = [];
|
const items = response.data.items;
|
items.map((item) => {
|
// if (item.targettype == name) {
|
std.push(item.seid);
|
// }.
|
});
|
nextTick(() => {
|
if (std.length > 0) {
|
this.targetList.push({
|
ids: std,
|
color: color
|
});
|
}
|
flag = flag + 1;
|
|
if (flag >= list.length) {
|
this.setTilesetColorChangeTarget();
|
} else {
|
this.setQueryByFiledList(list, flag);
|
}
|
});
|
});
|
},
|
setTitleSetRest() {
|
this.targetList = [];
|
if (this.wfsLayer) {
|
// this.wfsLayer.removeFromMap();
|
this.wfsLayer.destroy();
|
}
|
if (this.linePath) {
|
this.linePath.clear();
|
this.linePath = null;
|
}
|
if (this.richTextPoint1) {
|
this.richTextPoint1.deleteObject();
|
this.richTextPoint1 = null;
|
}
|
if (this.rectangularSensor) {
|
this.rectangularSensor.wall.forEach((wall) => {
|
Viewer.entities.remove(wall);
|
});
|
Viewer.entities.remove(this.rectangularSensor.item);
|
this.rectangularSensor = null;
|
}
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) return;
|
var tileset = objItem[0].layer;
|
tileset.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
return new Cesium.Color.fromCssColorString("#FFFFFF");
|
}
|
}
|
});
|
},
|
setTilesetColorChange(model, ids, color) {
|
var tileset = model.layer;
|
tileset.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
const id = feature.getProperty("id");
|
if (ids.indexOf(id) > -1) {
|
return new SmartEarth.Cesium.Color.fromCssColorString(color);
|
}
|
}
|
}
|
});
|
},
|
setTilesetColorChangeTarget() {
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) return;
|
var tileset = objItem[0].layer;
|
const list = this.targetList;
|
|
tileset.style = new Cesium.Cesium3DTileStyle({
|
color: {
|
evaluateColor: (feature) => {
|
const id = feature.getProperty("id");
|
for (var i in list) {
|
if (list[i].ids.indexOf(id) > -1) {
|
return new SmartEarth.Cesium.Color.fromCssColorString(
|
list[i].color
|
);
|
}
|
}
|
// if (ids.indexOf(id) > -1) {
|
// return new SmartEarth.Cesium.Color.fromCssColorString(color);
|
// }
|
}
|
}
|
});
|
},
|
setAddWfsLayer() {
|
this.wfsLayer = earthCtrl.factory.createWfsLayer("polygon", {
|
urls: "https://cim.smartearth.cn/SEserver/wfsserver/SubicBayWeapon_wfs",
|
layer: "weapons",
|
outlineColor: "#ff0000",
|
alpha: 0
|
});
|
},
|
setAddWfsJson() {
|
const url = this.getQueryUrl("SubicBayWeapon_wfs", "weapons");
|
|
Cesium.GeoJsonDataSource.load(url, {
|
fill: Cesium.Color.fromCssColorString("#FFFFFF00"),
|
stroke: Cesium.Color.fromCssColorString("#FFFFFF00"), //多边形或线的颜色
|
|
strokeWidth: 0 //多边形或线 宽度
|
}).then((dataSource) => {
|
const entities = dataSource.entities.values;
|
entities.map((item) => {
|
item.polygon._material.color =
|
Cesium.Color.fromCssColorString("#FFFFFF00");
|
|
item.polygon.heightReference =
|
Cesium.HeightReference.RELATIVE_TO_GROUND; // 贴地
|
item.polygon.height = 0; // 距地高度0米
|
var polyPositions = item.polygon.hierarchy.getValue().positions;
|
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; //中心点
|
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
|
item.position = polyCenter;
|
let positions = item.polygon.hierarchy._value.positions;
|
// 设置面轮廓
|
item.polyline = new Cesium.PolylineGraphics({
|
positions: positions,
|
clampToGround: true, // 贴地
|
width: 5,
|
material: Cesium.Color.fromCssColorString("#FF0000")
|
});
|
console.log(item._name);
|
const label_name = item.name ?item.name :"";
|
item.label = {
|
text: label_name,
|
font: "500 16x sans-serif",
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 字体样式
|
fillColor: new Cesium.Color.fromCssColorString("#FFFFFF"),
|
outlineWidth: 1, // 字体外圈线宽度（同样也有颜色可设置）
|
outlineColor: new Cesium.Color.fromCssColorString("#FFFFFF"),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
|
pixelOffset: new Cesium.Cartesian2(0, 0), // 中心位置
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
500.0,
|
3000.0
|
),
|
// showBackground:true,
|
// backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0) //背景顔色
|
};
|
});
|
|
Viewer.dataSources.add(dataSource);
|
});
|
},
|
getTileSet() {
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) {
|
return null;
|
}
|
return objItem[0];
|
},
|
setQueryExtent2(res, boolen) {
|
const tileset = this.getTileSet();
|
if (!tileset) {
|
return;
|
}
|
//
|
const filed = this.getPublickey(res);
|
getQueryEentity({
|
token: getToken(),
|
start: 1,
|
count: 0,
|
containCount: true,
|
layerid: tileset.layerId,
|
dbid: modelLayer.dbid,
|
where: filed
|
}).then((response) => {
|
if (response.code != 200) return;
|
const items = response.data.items[0];
|
const obj_val = response.data.items.filter((rs) => {
|
if (rs.seid == "1_b810b88e1c7144bcb1c73eb6f45c3cf0") {
|
return rs;
|
}
|
});
|
if (boolen) {
|
this.getQueryGeomExtent(obj_val[0], tileset.layerId);
|
} else {
|
this.getshowQueryExtentLabel(obj_val[0]);
|
}
|
});
|
},
|
getshowQueryExtentLabel(res) {
|
this.richTextPoint1 = earthCtrl.factory.createRichTextPoint(
|
res.ejfl,
|
[res.lon, res.lat],
|
{
|
fontColor: "#ffff00",
|
fontSize: 18
|
},
|
"0"
|
);
|
const center = { lon: res.lon, lat: res.lat };
|
const cities = [
|
{
|
lon: 120.26923413,
|
lat: 14.7887635155
|
},
|
{
|
lon: 120.266906151,
|
lat: 14.799529948
|
},
|
{
|
lon: 120.267382051,
|
lat: 14.788105695
|
},
|
{
|
lon: 120.26710735,
|
lat: 14.7993756478
|
},
|
{
|
lon: 120.286842844,
|
lat: 14.7924281921
|
},
|
{
|
lon: 120.286923225,
|
|
lat: 14.7933412456
|
},
|
{
|
lon: 120.266707102,
|
|
lat: 14.7996392512
|
},
|
{
|
lon: 120.268701861,
|
|
lat: 14.7886095373
|
},
|
{
|
lon: 120.270684963,
|
|
lat: 14.7919831852
|
},
|
{
|
lon: 120.266265954,
|
|
lat: 14.7999317012
|
},
|
{
|
lon: 120.269896499,
|
|
lat: 14.7901043245
|
},
|
{
|
lon: 120.286600837,
|
|
lat: 14.7926858017
|
},
|
{
|
lon: 120.286991515,
|
|
lat: 14.7927451318
|
},
|
{
|
lon: 120.286760149,
|
|
lat: 14.7930139536
|
},
|
{
|
lon: 120.28633835,
|
|
lat: 14.7929774056
|
},
|
{
|
lon: 120.266684567,
|
|
lat: 14.7877010021
|
},
|
{
|
lon: 120.283448259,
|
|
lat: 14.7972858134
|
},
|
{
|
lon: 120.286503613,
|
|
lat: 14.7932728306
|
},
|
{
|
lon: 120.286649886,
|
lat: 14.7935912152
|
}
|
];
|
let pathOption = {
|
width: 3, //线宽（可选）
|
color: "#00ffff", //线颜色（可选）,
|
LightSpot: true, //是否使用光点效果（可选）
|
LightSpotColor: "#ffffff", //光点颜色（可选）
|
height: 100
|
};
|
this.linePath = earthCtrl.factory.createTrailLinePath(
|
center,
|
cities,
|
pathOption
|
);
|
},
|
getQueryGeomExtent(items, layerid) {
|
var geom = mapConfig.setPointToCrical(items.lon, items.lat, 1);
|
const token = getToken();
|
const url =
|
config.modelBase.url +
|
config.modelBase.geo +
|
"/entitydbdata/query/entity";
|
|
axios
|
.post(
|
url,
|
{
|
layerid: layerid,
|
dbid: modelLayer.dbid,
|
geometry: JSON.stringify(geom.geometry),
|
returnCountOnly: true,
|
token: token
|
},
|
{
|
headers: {
|
Authorization: token,
|
"Content-Type": "application/x-www-form-urlencoded"
|
// 'Cookie': "token=" + token,
|
// 'Token': token
|
}
|
}
|
)
|
.then((response) => {
|
this.getLayerModelList(url, response.data.data, geom.geometry, layerid);
|
});
|
},
|
getLayerModelList(url, count, geom, layerid) {
|
const token = getToken();
|
|
axios
|
.post(
|
url,
|
{
|
token: token,
|
dbid: modelLayer.dbid,
|
layerid: layerid,
|
start: 1,
|
count: count,
|
containCount: true,
|
geometry: JSON.stringify(geom)
|
},
|
{
|
headers: {
|
Authorization: token,
|
"Content-Type": "application/x-www-form-urlencoded"
|
}
|
}
|
)
|
.then((response) => {
|
var std = [];
|
const items = response.data.data.items;
|
items.map((val) => {
|
std.push(val.seid);
|
});
|
|
nextTick(() => {
|
var objItem = mapServer.listData.filter((item) => {
|
if (item.type === "Tileset") {
|
return item;
|
}
|
});
|
if (objItem.length <= 0) return;
|
var tileset = objItem[0];
|
if (std.length <= 0) return;
|
this.setTilesetColorChange(tileset, std, "#FF0000");
|
});
|
});
|
},
|
setQueryExtent(res) {
|
const geom = mapConfig.setPointToCrical(res.lon, res.lat, 5000);
|
var arr = [];
|
const coord = geom.geometry.coordinates[0];
|
coord.map((item) => {
|
if (arr.length == 0) {
|
arr = item;
|
} else {
|
arr = [...arr, ...item];
|
}
|
});
|
arr = arr.toString().replaceAll(",", " ");
|
this.getQuery(this.url, arr, this.layerData);
|
},
|
getQuery(url, area, layer) {
|
const entity = layer.entities.values;
|
entity.filter((rs) => {
|
rs.polygon.material = new Cesium.Color.fromCssColorString("#FFFFFF");
|
});
|
axios
|
.get(url, {
|
params: {
|
version: "1.3.0",
|
request: "GetFeature",
|
typename: "GeoEntity",
|
propertyname: "*",
|
format: "json",
|
filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing><gml:posList>${area}</gml:posList></gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`
|
}
|
})
|
.then((res) => {
|
const obj = res.data.features;
|
obj.filter((item) => {
|
entity.filter((rs) => {
|
if (item.id == rs.id) {
|
rs.polygon.material = Cesium.Color.RED;
|
}
|
});
|
});
|
});
|
},
|
setQueryTF(content, layer, name) {
|
const url = this.getQueryUrl(content, layer);
|
axios.get(url).then((res) => {
|
const data = res.data.features;
|
const obj = data.filter((item) => {
|
if (item.properties.weaponname == name) {
|
return item;
|
}
|
});
|
if (obj.length <= 0) return;
|
var centroid = turf.centroid(obj[0]);
|
const geom = centroid.geometry.coordinates;
|
const position = [geom[0], geom[1], 0];
|
const cylinder = {
|
radius: 1000, //半径
|
angle: 30, //扫描角度（可选）
|
speed: 5, //倍速（可选）
|
stackPartitions: 80, //横向网格数（可选）
|
slicePartitions: 80, //纵向网格数（可选）
|
wallColor: "rgba(255,255,255,0)" //扫描墙颜色（可选）
|
};
|
const item = earthCtrl.factory.createRectangularSensor(
|
position,
|
cylinder
|
);
|
Viewer.zoomTo(item.item);
|
});
|
},
|
getQueryUrl(content, layer) {
|
return (
|
"https://cim.smartearth.cn/SEserver/wfsserver/" +
|
content +
|
"?version=1.1.0&request=GetFeature&format=json&typename=" +
|
layer
|
);
|
}
|
};
|
export default layerJson;
|
