/* eslint-disable no-undef */
|
<template>
|
<Popup
|
ref="pop"
|
:title="form.title"
|
width="410px"
|
maxHeight="430px"
|
left="calc(100% - 420px)"
|
@close="clearAll"
|
>
|
<div class="routerSearch">
|
<el-form ref="form" :model="form" label-width="70px" :rules="rules">
|
<el-form-item label="图层" prop="location">
|
<el-select
|
@change="cascaderChange"
|
allow-create
|
:value="form.location"
|
>
|
<el-option
|
v-for="item in serverList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="startPoi">
|
<el-input
|
style="width: 210px; padding-right: 20px"
|
placeholder="绘制起始点"
|
v-model="form.startPoi"
|
>
|
</el-input>
|
<el-button type="primary" @click="temhandleclick">绘制</el-button>
|
</el-form-item>
|
<el-form-item prop="endPoi">
|
<el-input
|
style="width: 210px; padding-right: 20px"
|
placeholder="绘制结束点"
|
v-model="form.endPoi"
|
>
|
</el-input>
|
<el-button type="primary" @click="temhandleclick2">绘制</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchhandle">路径查询</el-button>
|
<el-button type="primary" @click="clearLine">清除</el-button>
|
<el-button type="primary" @click="resetDataHandle"
|
>重置数据</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</Popup>
|
</template>
|
<script>
|
import Popup from "@tools/Popup.vue";
|
import serviceTools from "@mixin/serviceTools";
|
import axios from "axios";
|
|
let imageLayer = {};
|
export default {
|
name: "routerSearch",
|
components: {
|
Popup,
|
},
|
mixins: [serviceTools],
|
data() {
|
return {
|
rules: {
|
location: [
|
{ required: true, message: "请选择图层", trigger: "change" },
|
],
|
startPoi: [
|
{ required: true, message: "请绘制起始点", trigger: "change" },
|
],
|
endPoi: [{ required: true, message: "请绘制结束点", trigger: "blur" }],
|
},
|
form: {
|
location: "", //地址框结果
|
title: "路径查询",
|
startPoi: "117.09151259887,31.797055325961",
|
endPoi: "117.09364832425,31.793825692459",
|
},
|
serverURL: "http://183.162.245.49:3301",
|
serverList: [], //地址数据源
|
extent: undefined,
|
loadServerList: false,
|
};
|
},
|
mounted() {},
|
methods: {
|
getServerList() {
|
this.getGisserverLayerList(this.serverURL)
|
.then((data) => {
|
this.serverList = [];
|
data.layers &&
|
data.layers.WNS &&
|
data.layers.WNS.forEach((item) => {
|
this.serverList.push({
|
label: item.title,
|
value: item.name,
|
});
|
});
|
this.loadServerList = true;
|
})
|
.catch(() => {
|
this.loadServerList = true;
|
});
|
},
|
// 打开弹窗
|
open() {
|
if (window.isGisserver && !this.loadServerList) {
|
this.serverURL = window.location.origin;
|
this.getServerList();
|
} else if (!this.loadServerList) {
|
this.getServerList();
|
}
|
this.$refs.pop.open();
|
window.routerSeaHandler = null;
|
window.startPoiObj = null;
|
window.endPoiObj = null;
|
window.routerLine = null;
|
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(true);
|
if (this.extent) {
|
Viewer.camera.flyTo({
|
destination: Cesium.Rectangle.fromDegrees(
|
this.extent.xmin,
|
this.extent.ymin,
|
this.extent.xmax,
|
this.extent.ymax
|
),
|
});
|
}
|
},
|
cascaderChange(item) {
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(false);
|
this.form.location = item;
|
|
axios
|
.get(
|
`${this.serverURL}/gisserver/wnsserver/${item}?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetCapabilities`
|
)
|
.then((data) => {
|
let xml2json = sgworld.Core.xml2json(data.data);
|
let box = xml2json.FeatureTypeList.FeatureType.LatLongBoundingBox;
|
this.extent = {
|
xmin: box["minx"],
|
xmax: box["maxx"],
|
ymin: box["miny"],
|
ymax: box["maxy"],
|
};
|
Viewer.camera.flyTo({
|
destination: Cesium.Rectangle.fromDegrees(
|
this.extent.xmin,
|
this.extent.ymin,
|
this.extent.xmax,
|
this.extent.ymax
|
),
|
});
|
});
|
|
// GisServer-WMS添加
|
let wmsLayer = item.replace("_wns", "");
|
imageLayer[item] = sgworld.Creator.createImageryProvider(
|
"gisserver",
|
"wms",
|
{
|
url: `${this.serverURL}/gisserver/wmsserver/${wmsLayer}`,
|
layers: "",
|
parameters: {
|
format: "image/png",
|
transparent: true,
|
},
|
},
|
"0",
|
undefined,
|
true,
|
""
|
);
|
},
|
clearLine() {
|
routerLine && routerLine.deleteObject();
|
startPoiObj && startPoiObj.deleteObject();
|
endPoiObj && endPoiObj.deleteObject();
|
},
|
// 清空所有
|
clearAll() {
|
this.clearLine();
|
imageLayer[this.form.location] &&
|
imageLayer[this.form.location].setVisibility(false);
|
delete window.routerSeaHandler;
|
delete window.startPoiObj;
|
delete window.endPoiObj;
|
delete window.routerLine;
|
},
|
temhandleclick() {
|
routerSeaHandler && routerSeaHandler.destroy();
|
startPoiObj && startPoiObj.deleteObject();
|
routerSeaHandler = new Cesium.ScreenSpaceEventHandler(
|
Viewer.scene.canvas
|
);
|
routerSeaHandler.setInputAction((event) => {
|
// 获取屏幕坐标
|
|
const { lat, lng } = this.getPosi(event, "start", "起始点");
|
this.form.startPoi = `${lng},${lat}`;
|
|
routerSeaHandler.destroy();
|
routerSeaHandler = undefined;
|
// 通过屏幕坐标获取当前位置的实体
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
temhandleclick2() {
|
routerSeaHandler && routerSeaHandler.destroy();
|
endPoiObj && endPoiObj.deleteObject();
|
routerSeaHandler = new Cesium.ScreenSpaceEventHandler(
|
Viewer.scene.canvas
|
);
|
routerSeaHandler.setInputAction((event) => {
|
// 获取屏幕坐标
|
|
const { lat, lng } = this.getPosi(event, "end", "结束点");
|
this.form.endPoi = `${lng},${lat}`;
|
|
routerSeaHandler.destroy();
|
routerSeaHandler = undefined;
|
// 通过屏幕坐标获取当前位置的实体
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
searchhandle() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
axios({
|
method: "get",
|
url: `${this.serverURL}/gisserver/wnsserver/${this.form.location}?propertyName=Shape&tolerance=10&request=FindRoute&format=json&start=${this.form.startPoi}&end=${this.form.endPoi}`,
|
})
|
.then((res) => {
|
if (res.status === 200) {
|
const points = [];
|
res.data.features[1].features.forEach((item) => {
|
item.geometry.coordinates.forEach((point) => {
|
points.push({
|
x: point[0],
|
y: point[1],
|
});
|
});
|
});
|
routerLine && routerLine.deleteObject();
|
routerSeaHandler && routerSeaHandler.destroy();
|
routerLine = sgworld.Creator.createPolyline(
|
points,
|
"#ffff00",
|
1,
|
0,
|
"线"
|
);
|
}
|
})
|
.catch((res) => {
|
this.$message({
|
type: "error",
|
message: "创建点可能不在范围内!",
|
});
|
});
|
}
|
});
|
},
|
resetDataHandle() {
|
this.form.startPoi = "117.09151259887,31.797055325961";
|
this.form.endPoi = "117.09364832425,31.793825692459";
|
},
|
getPosi(event, type, name) {
|
const earthPosition = window.Viewer.camera.pickEllipsoid(
|
event.position,
|
window.Viewer.scene.globe.ellipsoid
|
);
|
const cartographic = Cesium.Cartographic.fromCartesian(
|
earthPosition,
|
window.Viewer.scene.globe.ellipsoid,
|
new Cesium.Cartographic()
|
);
|
const lat = Cesium.Math.toDegrees(cartographic.latitude);
|
const lng = Cesium.Math.toDegrees(cartographic.longitude);
|
var position = { X: lng, Y: lat, Altitude: 10 };
|
|
const _obj = sgworld.Creator.CreateLabel(
|
position,
|
name,
|
"http://183.162.245.49:82/05sdkdemo/src/static/image/mark.png",
|
{
|
// 文本偏移量
|
pixelOffset: {
|
x: 0,
|
y: -50,
|
},
|
// 无视遮挡
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本"
|
);
|
type === "start" ? (startPoiObj = _obj) : (endPoiObj = _obj);
|
|
return {
|
lat,
|
lng,
|
};
|
},
|
},
|
};
|
</script>
|
<style lang="less">
|
.routerSearch {
|
margin-top: 20px;
|
.el-form-item__label {
|
color: white;
|
}
|
.searchBtn {
|
position: relative;
|
left: 40%;
|
}
|
.el-radio {
|
width: 100px;
|
margin-right: 0px;
|
}
|
.el-input {
|
width: 300px;
|
}
|
/deep/ .el-input__inner {
|
width: 95%;
|
}
|
}
|
.resultDivs {
|
height: 200px;
|
}
|
.eachResultDiv {
|
padding-left: 25px;
|
height: 30px;
|
margin-top: 10px;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.eachResultDiv:hover {
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
</style>
|
