<template>
|
<div
|
v-drag
|
class="plottingBox"
|
>
|
<div class="plottingTitle">
|
<div class="tileLeft">
|
<div
|
class="titleImg"
|
@click="setCloseplotting"
|
>
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">标绘查询</div>
|
</div>
|
</div>
|
<div class="plotting_content">
|
<div class="plotting_content_btn">
|
<span class="plotting_content_title">标绘工具</span>
|
<div class="plotting_btn">
|
<div
|
class="btn_box_d btn_box"
|
@click="setMenuDraw('point')"
|
></div>
|
<div
|
class="btn_box_x btn_box"
|
@click="setMenuDraw('polyline')"
|
></div>
|
<div
|
class="btn_box_m btn_box"
|
@click="setMenuDraw('polygon')"
|
></div>
|
</div>
|
</div>
|
<div class="plotting_list">
|
<div
|
class="plotting_list_tr"
|
v-for="(item, i) in list"
|
:key="i"
|
@click.stop="resultShow(item)"
|
>
|
<div class="plotting_list_tr_name">
|
<img
|
:src="require(`../../assets/img/${item.icon}`)"
|
class="ico"
|
alt=""
|
/><span>{{ item.name }}</span>
|
</div>
|
<div class="plotting_list_tr_btn">
|
<div
|
class="tr_btn dw"
|
@click.stop="setLayerLocation(item)"
|
></div>
|
<div
|
class="tr_btn sc"
|
@click.stop="setLayerRemove(item)"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import menuTool from "@/assets/js/Map/menuTool";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
watch,
|
} from "vue";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
import { selectByPoint, selectByPolygon } from "@/api/api";
|
import WKT from "terraformer-wkt-parser";
|
import * as turf from "@turf/turf";
|
const emits = defineEmits(["setCloseplotting"]);
|
const store = useStore(); // 该方法用于返回store 实例
|
let list = ref([]);
|
const drawFlag = ref(null);
|
const plotNum = ref({
|
point: 1,
|
line: 1,
|
polygon: 2,
|
});
|
const lineColor = ref(null);
|
const metiaColor = ref(null);
|
//点查询接口
|
const selectPoint = async () => {
|
const dt = await selectByPoint();
|
};
|
//线查询接口
|
const selectPolygon = async () => {
|
const dt = await selectByPolygon();
|
};
|
const setLayerLocation = (res) => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == res.name) {
|
Viewer.zoomTo(entities[i]);
|
break;
|
}
|
}
|
};
|
|
const setLayerRemove = (res) => {
|
var entities = Viewer.entities._entities._array;
|
for (var i in entities) {
|
if (entities[i].name == res.name) {
|
Viewer.entities.remove(entities[i]);
|
list.value.splice(i, 1);
|
let obj = {
|
isshow: false,
|
entitiesData: {},
|
getData: {},
|
};
|
store.state.plottingInquireData = obj;
|
break;
|
}
|
}
|
};
|
|
const setMenuDraw = (res) => {
|
lineColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 1)");
|
metiaColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 0.3)");
|
drawFlag.value = res;
|
var config = {};
|
if (res != "point") {
|
config = { showSize: false };
|
}
|
sgworld.Creator.createSimpleGraphic(drawFlag.value, config, (entity) => {
|
sgworld.Creator.SimpleGraphic.clear();
|
setAddEntityLayer(entity);
|
});
|
};
|
const setAddEntityLayer = (res) => {
|
switch (drawFlag.value) {
|
case "point":
|
setAddEntityPoint(res);
|
break;
|
case "polyline":
|
setAddEntityPolyline(res);
|
break;
|
case "polygon":
|
setAddEntityPolygon(res);
|
break;
|
}
|
};
|
const setAddEntityPoint = (res) => {
|
var geom = setCartesianToEightFour(res.position.getValue());
|
var name = "Point#" + plotNum.value.point;
|
var layer = Viewer.entities.add({
|
name: name,
|
position: Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat),
|
point: {
|
color: metiaColor.value,
|
outlineColor: lineColor.value,
|
pixelSize: 20,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
var point = turf.point([geom.lng, geom.lat]);
|
|
var wkt = WKT.convert(point.geometry);
|
|
list.value.push({
|
name: name,
|
// layer: layer,
|
icon: "d.png",
|
wkt: wkt,
|
lng: geom.lng,
|
lat: geom.lat,
|
});
|
plotNum.value.point++;
|
};
|
const setAddEntityPolyline = (res) => {
|
var std = [];
|
var res_val = res.polyline.positions.getValue();
|
var coord = [];
|
for (var i in res_val) {
|
var geom = setCartesianToEightFour(res_val[i]);
|
std.push(geom.lng, geom.lat);
|
coord.push([geom.lng, geom.lat]);
|
}
|
var name = "Plyline#" + plotNum.value.line;
|
var layer = Viewer.entities.add({
|
name: name,
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(std),
|
width: 6,
|
material: lineColor.value,
|
//clampToGround: true,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置 HeightReference 高度参考类型为 CLAMP_TO_GROUND 贴地类型
|
//classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile BOTH 或 CESIUM_3D_TILE 或 TERRAIN
|
verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直位置
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
|
},
|
});
|
var linestring = turf.lineString(coord);
|
console.log(linestring);
|
var wkt = WKT.convert(linestring.geometry);
|
list.value.push({
|
wkt: wkt,
|
name: name,
|
// layer: layer,
|
icon: "x.png",
|
});
|
plotNum.value.line++;
|
};
|
const setAddEntityPolygon = (res) => {
|
var std = [];
|
var res_val = res.polygon.hierarchy.getValue().positions;
|
var geom;
|
var coord = [];
|
for (var i in res_val) {
|
geom = setCartesianToEightFour(res_val[i]);
|
std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
|
coord.push([geom.lng, geom.lat]);
|
}
|
var name = "Polygon#" + plotNum.value.polygon;
|
var layer = Viewer.entities.add({
|
name: name,
|
polygon: {
|
hierarchy: std,
|
material: metiaColor.value,
|
outline: true,
|
outlineColor: lineColor.value,
|
outlineWidth: 2,
|
classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile BOTH 或 CESIUM_3D_TILE 或 TERRAIN
|
clampToGround: true, //开启贴地
|
height: 0,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置 HeightReference 高度参考类型为 CLAMP_TO_GROUND 贴地类型
|
},
|
});
|
|
coord.push(coord[0]);
|
|
var polygon = turf.polygon([coord]);
|
var wkt = WKT.convert(polygon.geometry);
|
|
let turfPoint = [];
|
polygon.geometry.coordinates[0].forEach((e) => {
|
turfPoint.push(turf.point(e));
|
});
|
var features = turf.featureCollection(turfPoint);
|
|
var center = turf.center(features);
|
|
list.value.push({
|
wkt: wkt,
|
name: name,
|
// layer: layer,
|
icon: "m.png",
|
lng: center.geometry.coordinates[0],
|
lat: center.geometry.coordinates[1],
|
});
|
plotNum.value.polygon++;
|
};
|
const setCartesianToEightFour = (res) => {
|
var std = {};
|
let ellipsoid = window.Viewer.scene.globe.ellipsoid;
|
let cartographic = ellipsoid.cartesianToCartographic(res);
|
std.lat = Cesium.Math.toDegrees(cartographic.latitude);
|
std.lng = Cesium.Math.toDegrees(cartographic.longitude);
|
std.alt = cartographic.height;
|
return std;
|
};
|
|
const setCloseplotting = () => {
|
emits("setCloseplotting", false);
|
};
|
const resultShow = (res) => {
|
let obj = {
|
isshow: true,
|
entitiesData: res,
|
getData: {},
|
};
|
// store.commit("SET_plotting", obj);
|
|
store.state.plottingInquireData = obj;
|
};
|
watch(
|
() => store.state.plottingInquireData,
|
(nVal, oVal) => {
|
if(!nVal)return
|
if (nVal.isshow == false) {
|
//列表删除联动
|
if (nVal.entitiesData != {} && nVal.entitiesData.name) {
|
for (var i in list.value) {
|
if (list.value[i].name == nVal.entitiesData.name) {
|
list.value.splice(i, 1);
|
break;
|
}
|
}
|
store.state.plottingInquireData = null
|
}
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.plottingBox {
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
z-index: 40;
|
|
.plottingTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
}
|
}
|
.plotting_content {
|
margin-top: 3px;
|
|
.plotting_content_title {
|
font-size: 16px;
|
font-weight: 300;
|
color: #ffffff;
|
}
|
.plotting_content_btn {
|
height: 42px;
|
background: #0d131d;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 25px;
|
.plotting_btn {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.btn_box {
|
cursor: pointer;
|
margin-right: 18px;
|
}
|
.btn_box_d {
|
width: 30px;
|
height: 30px;
|
background: url("../../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_d:hover {
|
background: url("../../assets/img/dl.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_x {
|
width: 30px;
|
height: 30px;
|
background: url("../../assets/img/x.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_x:hover {
|
background: url("../../assets/img/xl.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.btn_box_m {
|
width: 30px;
|
height: 30px;
|
background: url("../../assets/img/m.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 0;
|
}
|
.btn_box_m:hover {
|
background: url("../../assets/img/ml.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
.plotting_list_tr {
|
height: 42px;
|
margin-top: 10px;
|
background: #0d131d;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 25px;
|
cursor: pointer;
|
.plotting_list_tr_name {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.ico {
|
width: 26px;
|
height: 27px;
|
}
|
span {
|
font-size: 14px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
.plotting_list_tr_btn {
|
display: flex;
|
align-items: center;
|
.tr_btn {
|
width: 16px;
|
height: 15px;
|
cursor: pointer;
|
}
|
.dw {
|
background: url("../../assets/img/dw.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-right: 18px;
|
}
|
.sc {
|
background: url("../../assets/img/sc.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
