1187 lines
43 KiB
JavaScript
1187 lines
43 KiB
JavaScript
import { getHost, getToken } from "../../../on";
|
|
import Base from "../index";
|
|
import { generatePagination } from "../../Element/Pagination";
|
|
import { regLeftClickCallback } from "../../../Global/ClickCallback";
|
|
import richText from "../../Element/richText";
|
|
import Dialog from '../../Element/Dialog';
|
|
import { openAllNodeList as OpenAllNodeList } from "./openAllNodeList";
|
|
import { openNodeListById as OpenNodeListById } from "./openNodeListById";
|
|
import { syncData } from '../../../Global/MultiViewportMode'
|
|
import { attributeElm } from '../../Element/elm_html'
|
|
|
|
class Shp extends Base {
|
|
constructor(sdk, options = {}, _Dialog = {}) {
|
|
super(sdk, options);
|
|
this.viewer = sdk.viewer
|
|
if (!this.options.path) {
|
|
this.error = 'No path provided!'
|
|
if (window.ELEMENT) {
|
|
window.ELEMENT.Message.closeAll();
|
|
window.ELEMENT.Message({
|
|
message: this.error,
|
|
type: 'warning',
|
|
duration: 1500
|
|
});
|
|
}
|
|
console.warn(this.error)
|
|
return
|
|
}
|
|
this.options.fileName = options.fileName || '未命名对象'
|
|
this.options.field = options.field || 'id'
|
|
this.total = 0
|
|
this.page = 1
|
|
this.pageSize = 20
|
|
this.currentData = []
|
|
this.data = []
|
|
this.list = []
|
|
this.Dialog = _Dialog
|
|
this._elms = {};
|
|
}
|
|
|
|
get show() {
|
|
return undefined
|
|
}
|
|
set show(v) {
|
|
this.setShow(v)
|
|
}
|
|
|
|
on() {
|
|
if (!this.options.path) {
|
|
return
|
|
}
|
|
return this.init()
|
|
}
|
|
|
|
async init() {
|
|
let url = ""
|
|
this.options.host = this.options.host || getHost()
|
|
if (this.options.host.endsWith("yjearth4.0")) {
|
|
url = this.options.host + '/api/v1/vector/load'
|
|
}
|
|
else {
|
|
url = this.options.host + '/yjearth4.0/api/v1/vector/load'
|
|
}
|
|
url += '?path=' + this.options.path
|
|
// url = 'json/shp.json'
|
|
let response = await fetch(url, {
|
|
method: 'get',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"token": getToken(),
|
|
"Authorization": "Bearer " + getToken(),
|
|
}
|
|
})
|
|
if (response.status === 200) {
|
|
let data = await response.json()
|
|
|
|
// Shp.create(this)
|
|
if (data.code === 200 || data.code === 0) {
|
|
this.data = data.data
|
|
|
|
// for (let i = 0; i < this.data.length; i++) {
|
|
// let points
|
|
// let polylines
|
|
// let polygons
|
|
// let multi_polylines
|
|
// let multi_polygons
|
|
// if (this.data[i].points) {
|
|
// points = [...this.data[i].points]
|
|
// }
|
|
// else {
|
|
// points = []
|
|
// }
|
|
// if (this.data[i].polylines) {
|
|
// polylines = [...this.data[i].polylines]
|
|
// }
|
|
// else {
|
|
// polylines = []
|
|
// }
|
|
// if (this.data[i].polygons) {
|
|
// polygons = [...this.data[i].polygons]
|
|
// }
|
|
// else {
|
|
// polygons = []
|
|
// }
|
|
// if (this.data[i].multi_polylines) {
|
|
// multi_polylines = [...this.data[i].multi_polylines]
|
|
// }
|
|
// else {
|
|
// multi_polylines = []
|
|
// }
|
|
// if (this.data[i].multi_polygons) {
|
|
// multi_polygons = [...this.data[i].multi_polygons]
|
|
// }
|
|
// else {
|
|
// multi_polygons = []
|
|
// }
|
|
// this.dataArray = [...this.dataArray, ...points, ...polylines, ...polygons, ...multi_polylines, ...multi_polygons]
|
|
// }
|
|
await this.formatData()
|
|
return Shp.create(this)
|
|
} else {
|
|
return console.error(data.message)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 格式化数据
|
|
async formatData() {
|
|
let features = []
|
|
let _this = this
|
|
formatFeatures(this.data)
|
|
function formatFeatures(data) {
|
|
if (data.data) {
|
|
_this.list.push(...data.data)
|
|
for (let i = 0; i < data.data.length; i++) {
|
|
let points
|
|
let polylines
|
|
let polygons
|
|
let multi_polylines
|
|
let multi_polygons
|
|
if (data.data[i].points) {
|
|
points = [...data.data[i].points]
|
|
for (let m = 0; m < points.length; m++) {
|
|
features.push({
|
|
"id": points[m].attr.id,
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [points[m].x, points[m].y, points[m].z],
|
|
"range": points[m].range,
|
|
"positions": { x: points[m].x, y: points[m].y, z: points[m].z }
|
|
},
|
|
"properties": points[m].attr ? {
|
|
...points[m].attr
|
|
} : {}
|
|
})
|
|
}
|
|
}
|
|
if (data.data[i].polylines) {
|
|
polylines = [...data.data[i].polylines]
|
|
for (let m = 0; m < polylines.length; m++) {
|
|
let positions = []
|
|
for (let n = 0; n < polylines[m].positions.length; n++) {
|
|
positions.push([polylines[m].positions[n].x, polylines[m].positions[n].y, polylines[m].positions[n].z])
|
|
}
|
|
features.push({
|
|
"id": polylines[m].attr.id,
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "LineString",
|
|
"coordinates": positions,
|
|
"range": polylines[m].range,
|
|
"positions": polylines[m].positions
|
|
},
|
|
"properties": polylines[m].attr ? {
|
|
...polylines[m].attr
|
|
} : {}
|
|
})
|
|
}
|
|
}
|
|
if (data.data[i].polygons) {
|
|
polygons = [...data.data[i].polygons]
|
|
for (let m = 0; m < polygons.length; m++) {
|
|
let positions = []
|
|
for (let n = 0; n < polygons[m].positions.length; n++) {
|
|
positions.push([polygons[m].positions[n].x, polygons[m].positions[n].y])
|
|
}
|
|
features.push({
|
|
"id": polygons[m].attr.id,
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "Polygon",
|
|
"coordinates": [positions],
|
|
"range": polygons[m].range,
|
|
"positions": polygons[m].positions
|
|
},
|
|
"properties": polygons[m].attr ? {
|
|
...polygons[m].attr
|
|
} : {}
|
|
})
|
|
}
|
|
}
|
|
if (data.data[i].multi_polylines) {
|
|
multi_polylines = [...data.data[i].multi_polylines]
|
|
for (let m = 0; m < multi_polylines.length; m++) {
|
|
let positions = []
|
|
let positionsxyz = []
|
|
for (let n = 0; n < multi_polylines[m].polylines.length; n++) {
|
|
let positions2 = []
|
|
positionsxyz.push(multi_polylines[m].polylines[n].positions)
|
|
for (let r = 0; r < multi_polylines[m].polylines[n].positions.length; r++) {
|
|
positions2.push([multi_polylines[m].polylines[n].positions[r].x, multi_polylines[m].polylines[n].positions[r].y, multi_polylines[m].polylines[n].positions[r].z])
|
|
}
|
|
positions.push(positions2)
|
|
}
|
|
features.push({
|
|
"id": multi_polylines[m].attr.id,
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "MultiLineString",
|
|
"coordinates": positions,
|
|
"range": multi_polylines[m].range,
|
|
"positions": positionsxyz
|
|
},
|
|
"properties": multi_polylines[m].attr ? {
|
|
...multi_polylines[m].attr
|
|
} : {}
|
|
})
|
|
}
|
|
}
|
|
if (data.data[i].multi_polygons) {
|
|
multi_polygons = [...data.data[i].multi_polygons]
|
|
for (let m = 0; m < multi_polygons.length; m++) {
|
|
let positions = []
|
|
let positionsxyz = []
|
|
for (let n = 0; n < multi_polygons[m].polygons.length; n++) {
|
|
let positions2 = []
|
|
positionsxyz.push(multi_polygons[m].polygons[n].positions)
|
|
for (let r = 0; r < multi_polygons[m].polygons[n].positions.length; r++) {
|
|
positions2.push([multi_polygons[m].polygons[n].positions[r].x, multi_polygons[m].polygons[n].positions[r].y, multi_polygons[m].polygons[n].positions[r].z])
|
|
}
|
|
positions.push(positions2)
|
|
}
|
|
features.push({
|
|
"id": multi_polygons[m].attr.id,
|
|
"type": "Feature",
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates": [positions],
|
|
"range": multi_polygons[m].range,
|
|
"positions": positionsxyz
|
|
},
|
|
"properties": multi_polygons[m].attr ? {
|
|
...multi_polygons[m].attr
|
|
} : {}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (data.children) {
|
|
for (let i = 0; i < data.children.length; i++) {
|
|
formatFeatures(data.children[i])
|
|
}
|
|
}
|
|
}
|
|
|
|
features.sort((a, b) => Number(a.properties.fid) - Number(b.properties.fid));
|
|
// for(let i=0;i<5;i++) {
|
|
// features = [...features, ...features]
|
|
// }
|
|
this.geojson = {
|
|
"type": "FeatureCollection",
|
|
"features": features
|
|
}
|
|
}
|
|
|
|
get fileName() {
|
|
return this.options.fileName
|
|
}
|
|
set fileName(v) {
|
|
this.options.fileName = v
|
|
this._elms.fileName && (this._elms.fileName.value = v)
|
|
}
|
|
|
|
get field() {
|
|
return this.options.field
|
|
}
|
|
set field(v) {
|
|
this.options.field = v
|
|
this._elms.field && (this._elms.field.value = v)
|
|
}
|
|
|
|
get onClick() {
|
|
return this.clickCallBack
|
|
}
|
|
|
|
set onClick(val) {
|
|
if (val && typeof val !== 'function') {
|
|
console.error('val:', val, '不是一个function')
|
|
} else {
|
|
this.clickCallBack = val
|
|
}
|
|
}
|
|
|
|
leftClickCB(mo, id, p, that) {
|
|
if (that.clickCallBack && typeof that.clickCallBack === 'function') {
|
|
that.clickCallBack(mo, id, p)
|
|
}
|
|
}
|
|
|
|
static create(that) {
|
|
// that.entity = new Cesium.PrimitiveCollection();
|
|
// that.viewer.scene.primitives.add(that.entity)
|
|
// Shp.calculationScope(that, that.data)
|
|
// Shp.createPoints(that, that.data.points)
|
|
// Shp.createPolylines(that, that.data.polylines)
|
|
// Shp.createPolygons(that, that.data.polygons)
|
|
let bbox = turf.bbox(that.geojson);
|
|
that.range = {
|
|
max_x: bbox[2],
|
|
max_y: bbox[3],
|
|
min_x: bbox[0],
|
|
min_y: bbox[1],
|
|
}
|
|
const geoJsonDataSource = new Cesium.GeoJsonDataSource();
|
|
let promise = geoJsonDataSource.load(that.geojson, {
|
|
clampToGround: true,
|
|
});
|
|
let Instances = []
|
|
let Points = new Cesium.PointPrimitiveCollection()
|
|
let Lines = []
|
|
let Polygons = []
|
|
return promise.then(datasource => {
|
|
that.entity = datasource
|
|
// that.viewer.dataSources.add(datasource);
|
|
datasource.entities.values.forEach(enetity => {
|
|
if (enetity.billboard) {
|
|
Points.add({
|
|
position: enetity.position._value,
|
|
color: Cesium.Color.RED, // 红色点
|
|
pixelSize: 10,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
})
|
|
}
|
|
if (enetity.polygon) {
|
|
let polygon = new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(enetity.polygon.hierarchy._value.positions)
|
|
});
|
|
|
|
Polygons.push(new Cesium.GeometryInstance({
|
|
geometry: polygon,
|
|
attributes: {
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|
Cesium.Color.fromCssColorString('rgba(0,255,184,0.5)')
|
|
),
|
|
show: new Cesium.ShowGeometryInstanceAttribute(true)
|
|
}
|
|
}))
|
|
}
|
|
if (enetity.polyline) {
|
|
let polyline = new Cesium.GroundPolylineGeometry({
|
|
positions: enetity.polyline.positions._value,
|
|
width: 2
|
|
});
|
|
Lines.push(new Cesium.GeometryInstance({
|
|
geometry: polyline,
|
|
attributes: {
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|
Cesium.Color.fromCssColorString('rgba(0,255,184,0.5)')
|
|
)
|
|
}
|
|
}))
|
|
// console.log(enetity.polyline)
|
|
}
|
|
})
|
|
// let polygonsPrimitive = new Cesium.GroundPolylinePrimitive({
|
|
// geometryInstances: Polygons,
|
|
// appearance: new Cesium.MaterialAppearance({
|
|
// material: new Cesium.Material({
|
|
// fabric: {
|
|
// type: 'Color',
|
|
// uniforms: {
|
|
// color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
|
|
// }
|
|
// }
|
|
// })
|
|
// })
|
|
// });
|
|
console.log('Lines', Lines)
|
|
console.log('Polygons', Polygons)
|
|
let LinesPrimitive = new Cesium.GroundPolylinePrimitive({
|
|
geometryInstances: Lines
|
|
});
|
|
let PolygonsPrimitive = new Cesium.GroundPrimitive({
|
|
geometryInstances: Polygons,
|
|
appearance: new Cesium.PerInstanceColorAppearance({
|
|
translucent: true, //false时透明度无效
|
|
closed: false,
|
|
}),
|
|
});
|
|
(Points.length>0) && that.viewer.scene.primitives.add(Points);
|
|
(LinesPrimitive.length>0) && that.viewer.scene.primitives.add(LinesPrimitive);
|
|
(PolygonsPrimitive.length>0) && that.viewer.scene.primitives.add(PolygonsPrimitive);
|
|
// that.viewer.zoomTo(datasource)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* @description 计算shp范围
|
|
*/
|
|
static calculationScope(that, data) {
|
|
let points = []
|
|
if (data.points) {
|
|
for (let i = 0; i < data.points.length; i++) {
|
|
points.push(turf.point([data.points[i].position.x, data.points[i].position.y]))
|
|
}
|
|
}
|
|
if (data.polylines) {
|
|
for (let i = 0; i < data.polylines.length; i++) {
|
|
if (data.polylines[i].positions)
|
|
for (let m = 0; m < data.polylines[i].positions.length; m++) {
|
|
points.push(turf.point([data.polylines[i].positions[m].x, data.polylines[i].positions[m].y]))
|
|
}
|
|
}
|
|
}
|
|
if (data.polygons) {
|
|
for (let i = 0; i < data.polygons.length; i++) {
|
|
if (data.polygons[i].positions)
|
|
for (let m = 0; m < data.polygons[i].positions.length; m++) {
|
|
points.push(turf.point([data.polygons[i].positions[m].x, data.polygons[i].positions[m].y]))
|
|
}
|
|
}
|
|
}
|
|
if (points.length > 0) {
|
|
let features = turf.featureCollection(points);
|
|
let enveloped = turf.envelope(features);
|
|
if (enveloped && enveloped.bbox && enveloped.bbox.length == 4) {
|
|
that.range = {
|
|
max_x: enveloped.bbox[2],
|
|
max_y: enveloped.bbox[3],
|
|
min_x: enveloped.bbox[0],
|
|
min_y: enveloped.bbox[1],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
static createPoints(that, data) {
|
|
if (!data) {
|
|
return
|
|
}
|
|
let points = new Cesium.PointPrimitiveCollection({
|
|
scene: that.viewer.scene // 指定场景
|
|
});
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].attr.id || (data[i].attr.id = that.randomString())
|
|
points.add({
|
|
id: data[i].attr.id,
|
|
position: Cesium.Cartesian3.fromDegrees(data[i].x, data[i].y, data[i].z), // 点的位置
|
|
color: Cesium.Color.RED, // 点的颜色
|
|
pixelSize: 10, // 点的大小
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY // 不应用深度测试
|
|
})
|
|
regLeftClickCallback(data[i].attr.id, that.leftClickCB, that)
|
|
}
|
|
that.entity.add(points)
|
|
}
|
|
static createPolylines(that, data) {
|
|
if (!data) {
|
|
return
|
|
}
|
|
let polylineInstance = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].attr.id || (data[i].attr.id = that.randomString())
|
|
let positions = data[i].positions
|
|
let fromDegreesArray = []
|
|
for (let m = 0; m < positions.length; m++) {
|
|
fromDegreesArray.push(positions[m].x, positions[m].y, positions[m].z)
|
|
}
|
|
let polyline = new Cesium.GroundPolylineGeometry({
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArray),
|
|
width: 4
|
|
});
|
|
let instance = new Cesium.GeometryInstance({
|
|
id: data[i].attr.id,
|
|
geometry: polyline,
|
|
attributes: {
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|
Cesium.Color.fromCssColorString(data[i].COLOR || 'rgba(0,255,184,0.5)')
|
|
),
|
|
show: new Cesium.ShowGeometryInstanceAttribute(true), //显示或者隐藏
|
|
},
|
|
});
|
|
polylineInstance.push(instance)
|
|
regLeftClickCallback(data[i].attr.id, that.leftClickCB, that)
|
|
}
|
|
if (polylineInstance.length > 0) {
|
|
that.entity.add(
|
|
new Cesium.GroundPolylinePrimitive({
|
|
geometryInstances: polylineInstance,
|
|
appearance: new Cesium.PolylineColorAppearance()
|
|
})
|
|
);
|
|
}
|
|
}
|
|
static createPolygons(that, data) {
|
|
if (!data) {
|
|
return
|
|
}
|
|
let polygonInstance = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
data[i].attr.id || (data[i].attr.id = that.randomString())
|
|
let positions = data[i].positions
|
|
let fromDegreesArray = []
|
|
for (let m = 0; m < positions.length; m++) {
|
|
fromDegreesArray.push(positions[m].x, positions[m].y, positions[m].z)
|
|
}
|
|
let polygon = new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArray)),
|
|
});
|
|
let instance = new Cesium.GeometryInstance({
|
|
id: data[i].attr.id,
|
|
geometry: polygon,
|
|
attributes: {
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|
Cesium.Color.fromCssColorString(data[i].COLOR || 'rgba(0,255,184,0.5)')
|
|
),
|
|
show: new Cesium.ShowGeometryInstanceAttribute(true), //显示或者隐藏
|
|
},
|
|
});
|
|
polygonInstance.push(instance)
|
|
regLeftClickCallback(data[i].attr.id, that.leftClickCB, that)
|
|
}
|
|
if (polygonInstance.length > 0) {
|
|
let primitive = new Cesium.GroundPrimitive({
|
|
geometryInstances: polygonInstance,
|
|
appearance: new Cesium.PerInstanceColorAppearance({
|
|
translucent: true, //false时透明度无效
|
|
closed: false,
|
|
}),
|
|
})
|
|
that.entity.add(primitive);
|
|
}
|
|
}
|
|
|
|
async edit(status = false, DialogEvent = {}) {
|
|
this.originalOptions = this.deepCopyObj(this.options)
|
|
if (this._DialogObject && this._DialogObject.close) {
|
|
this._DialogObject.close()
|
|
this._DialogObject = null
|
|
}
|
|
if (status) {
|
|
this._DialogObject = await new Dialog(this.sdk, this.options, {
|
|
title: '编辑属性', left: '180px', top: '100px',
|
|
confirmCallBack: (options) => {
|
|
this.fileName = this.fileName.trim()
|
|
if (!this.fileName) {
|
|
this.fileName = '未命名对象'
|
|
}
|
|
this.originalOptions.fileName = this.fileName
|
|
this.originalOptions.field = this.field
|
|
this._DialogObject.close()
|
|
DialogEvent.confirmCallBack && DialogEvent.confirmCallBack({
|
|
id: this.options.id,
|
|
fileName: this.originalOptions.fileName,
|
|
field: this.originalOptions.field
|
|
})
|
|
},
|
|
closeCallBack: () => {
|
|
this.reset()
|
|
DialogEvent.closeCallBack && DialogEvent.closeCallBack()
|
|
},
|
|
})
|
|
let html = `
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">文件名称：</span>
|
|
<input class="input flie-name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">名称字段选择：</span>
|
|
<select class="input input-select">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`
|
|
let contentElm = document.createElement('div');
|
|
contentElm.innerHTML = html
|
|
this._DialogObject.contentAppChild(contentElm)
|
|
|
|
let nameElm = contentElm.getElementsByClassName('flie-name')[0]
|
|
nameElm.value = this.options.fileName
|
|
nameElm.addEventListener('input', () => {
|
|
this.options.fileName = nameElm.value
|
|
})
|
|
|
|
let selectElm = contentElm.getElementsByClassName('input-select')[0]
|
|
let option = ''
|
|
for (let key in this.geojson.features[0].properties) {
|
|
let o = `<option value="${key}">${key}</option>`
|
|
option = option + o
|
|
}
|
|
selectElm.innerHTML = option
|
|
selectElm.value = this.options.field
|
|
selectElm.addEventListener('input', () => {
|
|
this.options.field = selectElm.value
|
|
})
|
|
|
|
this._elms.fileName = nameElm
|
|
this._elms.field = selectElm
|
|
}
|
|
else {
|
|
if (this._DialogObject && this._DialogObject.close) {
|
|
this._DialogObject.close()
|
|
this._DialogObject = null
|
|
}
|
|
}
|
|
}
|
|
|
|
async editById(status = false, nodeId, DialogEvent = {}) {
|
|
// nodeId = this.dataArray[0].attr.id
|
|
if (this._DialogObject && this._DialogObject.close) {
|
|
this._DialogObject.close()
|
|
this._DialogObject = null
|
|
}
|
|
let cameraName = ''
|
|
let index
|
|
if (status) {
|
|
let options = {}
|
|
for (let i = 0; i < this.geojson.features.length; i++) {
|
|
if (this.geojson.features[i].properties.id === nodeId) {
|
|
if (this.geojson.features[i].content) {
|
|
options = this.deepCopyObj(this.geojson.features[i].content)
|
|
}
|
|
index = i
|
|
break
|
|
}
|
|
}
|
|
options.id = options.id || nodeId
|
|
options.link || (options.link = {})
|
|
options.link.content || (options.link.content = [])
|
|
options.camera || (options.camera = [])
|
|
options.richTextContent || (options.richTextContent = '')
|
|
options.attributeType = options.attributeType || 'richText'
|
|
this._DialogObject = await new Dialog(this.sdk, options, {
|
|
title: '编辑属性', left: '180px', top: '100px',
|
|
confirmCallBack: () => {
|
|
this._DialogObject.close()
|
|
this.geojson.features[index].content = this.deepCopyObj(this._DialogObject.attribute)
|
|
DialogEvent.confirmCallBack && DialogEvent.confirmCallBack(this._DialogObject.attribute)
|
|
},
|
|
closeCallBack: () => {
|
|
// this.reset()
|
|
DialogEvent.closeCallBack && DialogEvent.closeCallBack()
|
|
},
|
|
})
|
|
this._DialogObject.event = DialogEvent
|
|
this._DialogObject.attribute = this.deepCopyObj(options)
|
|
let html = `
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">内容类型：</span>
|
|
<select class="input input-select attribute-select" style="width: 120px;">
|
|
<option value="richText">富文本</option>
|
|
<!--<option value="link">链接</option>
|
|
<option value="camera">摄像头</option>
|
|
<option value="sensor">传感器</option>
|
|
<option value="vr">全景图</option>-->
|
|
</select>
|
|
</div>
|
|
<div class="col attribute-content attribute-content-link">
|
|
<div class="input-group">
|
|
<input class="input link_add" type="text">
|
|
<button class="link_add_btn">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attribute-content attribute-content-richText">
|
|
<span>编辑内容：<button class="open-richText-btn">打开文本编辑器</button></span>
|
|
</div>
|
|
<div class="attribute-content attribute-content-link">
|
|
<div class="table">
|
|
<div class="table-head">
|
|
<div class="tr">
|
|
<div class="th">名称</div>
|
|
<div class="th">链接</div>
|
|
<div class="th">操作</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-body">
|
|
</div>
|
|
<div class="table-empty">
|
|
<div class="empty-img"></div>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="attribute-content attribute-content-camera">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">编辑内容：</span>
|
|
<input class="input camera-name" type="text" style="width: 100px;">
|
|
<button class="select btn camera-select">搜索</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="table camera-table">
|
|
<div class="table-head">
|
|
<div class="tr">
|
|
<div class="th">操作</div>
|
|
<div class="th">设备名称</div>
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备类型</div>
|
|
<div class="th" style="width: 126px; flex: 0 126px;min-width: 126px;">设备IP</div>
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备端口</div>
|
|
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">用户名</div>
|
|
<div class="th">密码</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-body" style="display:none;">
|
|
<div class="tr">
|
|
<div class="td">
|
|
<input type="checkbox" value="2">
|
|
<span>绑定</span>
|
|
</div>
|
|
<div class="td">设备名称</div>
|
|
<div class="td">设备类型</div>
|
|
<div class="td">设备IP</div>
|
|
<div class="td">设备端口</div>
|
|
<div class="td">用户名</div>
|
|
<div class="td">密码</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-empty">
|
|
<div class="empty-img"></div>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=""row>
|
|
<ul class="pagination"></ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
let contentElm = document.createElement('div');
|
|
contentElm.innerHTML = html
|
|
this._DialogObject.contentAppChild(contentElm)
|
|
let all_elm = contentElm.getElementsByTagName("*")
|
|
|
|
this._DialogObject._element.body.style.width = '600px'
|
|
|
|
let attributeSelectElm = contentElm.getElementsByClassName('attribute-select')[0]
|
|
let linkAddBtnElm = contentElm.getElementsByClassName('link_add_btn')[0]
|
|
let openRichTextBtnElm = contentElm.getElementsByClassName('open-richText-btn')[0]
|
|
|
|
let attributeContent = this._DialogObject._element.content.getElementsByClassName('attribute-content')
|
|
for (let i = 0; i < attributeContent.length; i++) {
|
|
if (attributeContent[i].className.indexOf('attribute-content-' + this._DialogObject.attribute.attributeType) > -1) {
|
|
attributeContent[i].style.display = 'block';
|
|
}
|
|
else {
|
|
attributeContent[i].style.display = 'none';
|
|
}
|
|
}
|
|
|
|
attributeSelectElm.addEventListener('change', () => {
|
|
this._DialogObject.attribute.attributeType = attributeSelectElm.value
|
|
for (let i = 0; i < attributeContent.length; i++) {
|
|
if (attributeContent[i].className.indexOf('attribute-content-' + this._DialogObject.attribute.attributeType) > -1) {
|
|
attributeContent[i].style.display = 'block';
|
|
}
|
|
else {
|
|
attributeContent[i].style.display = 'none';
|
|
}
|
|
}
|
|
})
|
|
|
|
linkAddBtnElm.addEventListener('click', async () => {
|
|
if (this._DialogObject._element.content.getElementsByClassName('link_add')[0].value) {
|
|
this._DialogObject.attribute.link.content.push({
|
|
name: '链接',
|
|
url: this._DialogObject._element.content.getElementsByClassName('link_add')[0].value
|
|
})
|
|
this._DialogObject._element.content.getElementsByClassName('link_add')[0].value = ''
|
|
this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
}
|
|
else {
|
|
DialogEvent.clickAddLink && DialogEvent.clickAddLink(nodeId)
|
|
}
|
|
})
|
|
|
|
openRichTextBtnElm.addEventListener('click', () => {
|
|
richText.open(nodeId, nodeId, this._DialogObject.attribute.richTextContent)
|
|
richText.primaryCallBack = (content) => {
|
|
this._DialogObject.attribute.richTextContent = content
|
|
}
|
|
})
|
|
|
|
let cameraNameElm = contentElm.getElementsByClassName('camera-name')[0]
|
|
let cameraSelectElm = contentElm.getElementsByClassName('camera-select')[0]
|
|
cameraNameElm.addEventListener('input', () => {
|
|
cameraName = cameraNameElm.value
|
|
})
|
|
this.cameraSelect(cameraName)
|
|
cameraSelectElm.addEventListener('click', () => {
|
|
this.cameraSelect(cameraName)
|
|
})
|
|
|
|
// let nameElm = contentElm.getElementsByClassName('flie-name')[0]
|
|
// nameElm.value = this.options.fileName
|
|
// nameElm.addEventListener('input', ()=>{
|
|
// this.options.fileName = nameElm.value
|
|
// })
|
|
|
|
// let selectElm = contentElm.getElementsByClassName('input-select')[0]
|
|
// let option = ''
|
|
// for(let key in this.dataArray[0].attr) {
|
|
// let o = `<option value="${key}">${key}</option>`
|
|
// option = option + o
|
|
// }
|
|
// selectElm.innerHTML = option
|
|
// selectElm.value = this.options.field
|
|
// selectElm.addEventListener('input', ()=>{
|
|
// this.options.field = selectElm.value
|
|
// })
|
|
|
|
// this._elms.fileName = nameElm
|
|
// this._elms.field = selectElm
|
|
}
|
|
else {
|
|
if (this._DialogObject && this._DialogObject.close) {
|
|
this._DialogObject.close()
|
|
this._DialogObject = null
|
|
}
|
|
}
|
|
}
|
|
|
|
editContentById(nodeId, content) {
|
|
for (let i = 0; i < this.geojson.features.length; i++) {
|
|
if (this.geojson.features[i].properties.id === nodeId) {
|
|
this.geojson.features[i].content = content
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
reset() {
|
|
this.fileName = this.originalOptions.fileName
|
|
this.field = this.originalOptions.field
|
|
}
|
|
|
|
addAttributeLinkById(nodeId, link, i) {
|
|
if (this._DialogObject && this._DialogObject.attribute && this._DialogObject.attribute.id == nodeId) {
|
|
if (i || i === 0) {
|
|
this._DialogObject._element.body.getElementsByClassName('attribute-content-link')[1].getElementsByClassName('tr')[i + 1].getElementsByClassName('file-select')[0].value = link
|
|
}
|
|
else {
|
|
this._DialogObject.attribute.link.content.push({
|
|
name: '链接',
|
|
url: link
|
|
})
|
|
this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
}
|
|
}
|
|
}
|
|
|
|
setAttributeLinkById(nodeId, data) {
|
|
if (this._DialogObject && this._DialogObject.attribute && this._DialogObject.attribute.id == nodeId) {
|
|
this._DialogObject.attribute.link.content = data
|
|
let table = this._DialogObject._element.content.getElementsByClassName('attribute-content-link')[1].getElementsByClassName('table')[0]
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
tableContent.innerHTML = ''
|
|
if (this._DialogObject.attribute.link.content.length > 0) {
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
}
|
|
else {
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
}
|
|
for (let i = 0; i < this._DialogObject.attribute.link.content.length; i++) {
|
|
let tr = `
|
|
<div class="tr">
|
|
<div class="td">` + this._DialogObject.attribute.link.content[i].name + `</div>
|
|
<div class="td">` + this._DialogObject.attribute.link.content[i].url + `</div>
|
|
<div class="td">
|
|
<button @click="linkEdit">编辑</button>
|
|
<button @click="linkDelete">删除</button>
|
|
</div>
|
|
</div>`
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
tableContent.appendChild(trElm)
|
|
}
|
|
let item = tableContent.getElementsByClassName('tr')
|
|
let fun = {
|
|
linkEdit: async (index) => {
|
|
await this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
let table = this._DialogObject._element.content.getElementsByClassName('attribute-content-link')[1].getElementsByClassName('table')[0]
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
let item = tableContent.getElementsByClassName('tr')
|
|
for (let i = 0; i < item.length; i++) {
|
|
if (index === i) {
|
|
let html = `
|
|
<div class="td">
|
|
<input class="input" type="text">
|
|
</div>
|
|
<div class="td">
|
|
<div class="input-group">
|
|
<input class="input file-select" type="text" style="width: 200px;">
|
|
<button @click="fileSelect">...</button>
|
|
</div>
|
|
</div>
|
|
<div class="td">
|
|
<button @click="confirmEdit">确认</button>
|
|
<button @click="cancelEdit">取消</button>
|
|
</div>`
|
|
item[i].innerHTML = html
|
|
let td = item[i].getElementsByClassName('td')
|
|
td[0].getElementsByClassName('input')[0].value = this._DialogObject.attribute.link.content[index].name
|
|
td[1].getElementsByClassName('input')[0].value = this._DialogObject.attribute.link.content[index].url
|
|
let btn = item[i].getElementsByTagName('button')
|
|
for (let n = 0; n < btn.length; n++) {
|
|
for (let m of btn[n].attributes) {
|
|
if (m.name === '@click') {
|
|
btn[n].addEventListener('click', (e) => {
|
|
if (typeof (fun[m.value]) === 'function') {
|
|
fun[m.value]({ name: td[0].getElementsByClassName('input')[0].value, url: td[1].getElementsByClassName('input')[0].value }, i)
|
|
}
|
|
});
|
|
btn[n].attributes.removeNamedItem(m.name)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
break
|
|
}
|
|
}
|
|
},
|
|
linkDelete: (i) => {
|
|
this._DialogObject.attribute.link.content.splice(i, 1)
|
|
this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
},
|
|
|
|
confirmEdit: (value, i) => {
|
|
this._DialogObject.attribute.link.content[i] = value
|
|
this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
},
|
|
cancelEdit: () => {
|
|
this.setAttributeLinkById(nodeId, this._DialogObject.attribute.link.content)
|
|
},
|
|
fileSelect: (value, i) => {
|
|
this._DialogObject.event && this._DialogObject.event.clickAddLink && this._DialogObject.event.clickAddLink(nodeId, i)
|
|
}
|
|
}
|
|
for (let i = 0; i < item.length; i++) {
|
|
let btn = item[i].getElementsByTagName('button')
|
|
for (let n = 0; n < btn.length; n++) {
|
|
for (let m of btn[n].attributes) {
|
|
if (m.name === '@click') {
|
|
btn[n].addEventListener('click', (e) => {
|
|
if (typeof (fun[m.value]) === 'function') {
|
|
fun[m.value](i)
|
|
}
|
|
});
|
|
btn[n].attributes.removeNamedItem(m.name)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < this.dataArray.length; i++) {
|
|
if (this.dataArray[i].attr.id === nodeId) {
|
|
if (this.dataArray[i].content) {
|
|
this.opt_DialogObject.attribute.link.content = v
|
|
}
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
getAllNode() {
|
|
return this.data
|
|
}
|
|
|
|
openAllNodeList() {
|
|
OpenAllNodeList(this)
|
|
}
|
|
openNodeListById(id) {
|
|
OpenNodeListById(this, id)
|
|
}
|
|
|
|
|
|
static createTableContent(that) {
|
|
let trsElm = ''
|
|
for (let i = 0; i < that.currentData.length; i++) {
|
|
let trElm = '<tr class="el-table__row">'
|
|
let tdElm = ''
|
|
for (let key in that.currentData[i].attr) {
|
|
tdElm = tdElm + `<td rowspan="1" colspan="1" class="el-table_1_column_${i} el-table__cell"><div class="cell">${that.currentData[i].attr[key]}</div></td>`
|
|
}
|
|
trElm = trElm + tdElm + '</tr>'
|
|
trsElm = trsElm + trElm
|
|
}
|
|
return trsElm
|
|
}
|
|
|
|
flyTo(id, options = {}) {
|
|
if (id) {
|
|
for (let i = 0; i < this.geojson.features.length; i++) {
|
|
if (this.geojson.features[i].properties.id === id) {
|
|
let range = this.geojson.features[i].geometry.range
|
|
if (range) {
|
|
this.viewer.camera.flyTo({
|
|
orientation: options.orientation || {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: Cesium.Math.toRadians(-90.0),
|
|
roll: Cesium.Math.toRadians(0.0)
|
|
},
|
|
destination: Cesium.Rectangle.fromDegrees(range.min_x, range.min_y, range.max_x, range.max_y)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
if (this.range) {
|
|
this.viewer.camera.flyTo({
|
|
orientation: options.orientation || {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: Cesium.Math.toRadians(-90.0),
|
|
roll: Cesium.Math.toRadians(0.0)
|
|
},
|
|
destination: Cesium.Rectangle.fromDegrees(this.range.min_x, this.range.min_y, this.range.max_x, this.range.max_y)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
setShow(status, id) {
|
|
// let enetity = this.entity.entities.getById(id)
|
|
// if(enetity) {
|
|
// enetity.show = status
|
|
// }
|
|
// else {
|
|
|
|
// }
|
|
if (id) {
|
|
for (let i = 0; i < this.entity.entities.values.length; i++) {
|
|
if (this.entity.entities.values[i].id && this.entity.entities.values[i].id.startsWith(id)) {
|
|
this.entity.entities.values[i].show = status
|
|
// this.entity.entities.remove(this.entity.entities.values[i])
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
for (let i = 0; i < this.entity.entities.values.length; i++) {
|
|
this.entity.entities.values[i].show = status
|
|
}
|
|
}
|
|
}
|
|
|
|
remove() {
|
|
this.entity.entities.values.forEach(enetity => {
|
|
this.sdk.viewer.entities.remove(enetity)
|
|
})
|
|
this.viewer.dataSources.remove(this.entity, true)
|
|
this.entity = null
|
|
this.geojson = {}
|
|
this.data = {}
|
|
}
|
|
|
|
cameraSelect(cameraName, page) {
|
|
const type = {
|
|
'1': '海康',
|
|
'2': '大华'
|
|
}
|
|
let host = this.options.host
|
|
if (this._DialogObject && this._DialogObject._element && this._DialogObject._element.content) {
|
|
let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
|
|
let attributeCameraElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-camera')[0]
|
|
if (!paginationElm) {
|
|
return
|
|
}
|
|
if (!attributeCameraElm) {
|
|
return
|
|
}
|
|
generatePagination(paginationElm, 1, 10, 1);
|
|
}
|
|
else {
|
|
return
|
|
}
|
|
let url = ""
|
|
const params = {
|
|
cameraName: cameraName,
|
|
page: !page || typeof page === 'object' ? 1 : page,
|
|
pageSize: 5
|
|
};
|
|
const queryString = new URLSearchParams(params).toString();
|
|
if (host.endsWith("yjearth4.0"))
|
|
url = `${host}/api/v1/cameraData/list?${queryString}`
|
|
else
|
|
url = `${host}/yjearth4.0/api/v1/cameraData/list?${queryString}`
|
|
// url = this.options.path
|
|
fetch(url, {
|
|
method: 'get',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"token": getToken(),
|
|
"Authorization": "Bearer " + getToken(),
|
|
}
|
|
}).then((response) => {
|
|
if (response.status === 200) {
|
|
response.json().then((data) => {
|
|
if (data.code === 200 || data.code === 0) {
|
|
if (!this._DialogObject || !this._DialogObject._element || !this._DialogObject._element.content) {
|
|
return
|
|
}
|
|
let paginationElm = this._DialogObject._element.content.getElementsByClassName('pagination')[0]
|
|
let table = this._DialogObject._element.content.getElementsByClassName('camera-table')[0]
|
|
let tableContent = table.getElementsByClassName('table-body')[0]
|
|
tableContent.innerHTML = ''
|
|
if (data.data) {
|
|
if (data.data.list && data.data.list.length > 0) {
|
|
generatePagination(paginationElm, data.data.total, 10, 1, (pageIndex) => {
|
|
this.cameraSelect(cameraName, pageIndex)
|
|
});
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'none'
|
|
tableContent.style.display = 'inline-flex'
|
|
for (let i = 0; i < data.data.list.length; i++) {
|
|
let tr = `
|
|
<div class="tr">
|
|
<div class="td">
|
|
<input type="checkbox" value="${data.data.list[i].ID}">
|
|
<span>绑定</span>
|
|
</div>
|
|
<div class="td">${data.data.list[i].cameraName}</div>
|
|
<div class="td" style="width: 80px; flex: 0 80px; min-width: 80px;">${type[data.data.list[i].type]}</div>
|
|
<div class="td" style="width: 126px; flex: 0 126px;min-width: 126px;">${data.data.list[i].ip}</div>
|
|
<div class="td" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].port}</div>
|
|
<div class="td" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].userName}</div>
|
|
<div class="td">${data.data.list[i].passWord}</div>
|
|
</div>`
|
|
let trElm = document.createRange().createContextualFragment(tr)
|
|
let checkbox = trElm.querySelector('input[type="checkbox"]')
|
|
checkbox.addEventListener('change', () => {
|
|
if (checkbox.checked) {
|
|
this._DialogObject.attribute.camera.push(data.data.list[i])
|
|
}
|
|
else {
|
|
let newArray = this._DialogObject.attribute.camera.filter((item) => {
|
|
return item.ID !== data.data.list[i].ID
|
|
})
|
|
this._DialogObject.attribute.camera = newArray
|
|
}
|
|
})
|
|
tableContent.appendChild(trElm)
|
|
|
|
for (let m = 0; m < this._DialogObject.attribute.camera.length; m++) {
|
|
if (this._DialogObject.attribute.camera[m].ID === data.data.list[i].ID) {
|
|
checkbox.checked = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (data.data && data.data.total) {
|
|
generatePagination(paginationElm, data.data.total, 10, 1, (pageIndex) => {
|
|
this.cameraSelect(cameraName, pageIndex)
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
generatePagination(paginationElm, 1, 10, 1);
|
|
table.getElementsByClassName('table-empty')[0].style.display = 'flex'
|
|
tableContent.style.display = 'none'
|
|
}
|
|
} else {
|
|
console.error(data.message)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
export default Shp
|