<template>
|
<div class="location" id="location">
|
<div class="tool-title">
|
<!-- <img src="@/assets/img/right/head.png" /> -->
|
<label>定位</label>
|
</div>
|
<hr class="firhr"/>
|
<div class="locationContainer">
|
当前位置 ：
|
<span class="position">
|
<div class="nowPosition" v-for="(s_item, index) in selectList" :key="index">
|
<el-button
|
@click="backCity(s_item)"
|
style="padding: 9px 5px 10px 2px"
|
:disabled="isDisabled"
|
>{{ s_item.name }}</el-button
|
>
|
<span style="margin-right: 5px;color:white">></span>
|
</div>
|
{{ selectCity.name }}
|
</span>
|
</div>
|
<hr />
|
<div class="pF">
|
<div class="cF" v-for="(item, index) in cityList" :key="index">
|
<el-button @click="showCity(item)" :disabled="isDisabled">{{
|
item.name
|
}}</el-button>
|
</div>
|
</div>
|
<!-- <div class="closeTool" title="收缩" @click="close">
|
<el-button>
|
<img src="@/assets/img/right/ss.png" />
|
</el-button>
|
</div> -->
|
</div>
|
</template>
|
|
<style scoped>
|
/* yhadd */
|
.nowPosition{
|
display: inline-block;
|
border: none;
|
}
|
.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
|
background: transparent;
|
}
|
/* yhadd */
|
.el-button{
|
background: transparent;
|
color: white;
|
border: 1px solid white;
|
}
|
.location {
|
background:transparent;
|
width: 270px;
|
overflow: auto;
|
}
|
.locationContainer {
|
color: white;
|
/* min-height: 28px;
|
line-height: 28px; */
|
padding-left: 20px;
|
/* margin-top: 10px; */
|
margin: 20px 0 10px 0;
|
}
|
.position {
|
/* color: #0050b4; */
|
color: yellow;
|
margin-left: 10px;
|
}
|
.tool-title {
|
margin: 1px 10px;
|
color: white;
|
}
|
.tool-title label {
|
vertical-align: top;
|
margin-left: 10px;
|
font-size: 17px;
|
}
|
.firhr{
|
position: absolute;
|
top: 48px;
|
width: 90%;
|
margin-left: -15px;
|
}
|
hr{
|
margin: 0;
|
}
|
.pF {
|
margin: 10px;
|
margin-bottom: 26px;
|
}
|
.cF {
|
display: inline-block;
|
width: 110px;
|
}
|
.cF .el-button,.nowPosition .el-button {
|
border: none;
|
}
|
.sF {
|
display: inline-block;
|
}
|
.closeTool {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
.closeTool .el-button {
|
padding: 0 !important;
|
font-size: 24px;
|
border: unset;
|
float: unset;
|
display: block;
|
/* background: rgba(0, 0, 0, 0); */
|
background: transparent;
|
}
|
.pF{
|
overflow-y: auto;
|
height: 190px;
|
}
|
.pF::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
.pF::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
.pF::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
</style>
|
|
<script>
|
import axios from "axios";
|
window.borderLine = [];
|
|
export default {
|
name: "location",
|
data() {
|
return {
|
selectList: [],
|
cityList: [],
|
isDisabled: false,
|
selectCity: {
|
name: "浙江省",
|
},
|
originSelectCityData: undefined,
|
};
|
},
|
mounted() {
|
// this.originSelectCity();
|
},
|
methods: {
|
close() {
|
this.$parent.isShowLocation = false;
|
borderLine.forEach((item) => {
|
sgworld.Creator.SimpleGraphic.PrimitiveCollection.remove(item);
|
});
|
borderLine = [];
|
this.originSelectCity();
|
},
|
originSelectCity() {
|
this.cityList = [];
|
this.selectList = [];
|
borderLine.forEach((item) => {
|
sgworld.Creator.SimpleGraphic.PrimitiveCollection.remove(item);
|
});
|
borderLine = [];
|
let that = this;
|
if (this.originSelectCityData) {
|
this.selectCity = this.originSelectCityData.selectCity;
|
this.cityList = JSON.parse(
|
JSON.stringify(this.originSelectCityData.cityList)
|
);
|
} else {
|
// axios
|
// .get(
|
// "http://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/search",
|
// {
|
// params: {
|
// withgeometry: true,
|
// fullname: "浙江省",
|
// },
|
// }
|
// )
|
// .then(
|
// (response) => {
|
// // console.log(response.data);
|
// let list =
|
// response.data &&
|
// response.data.result &&
|
// response.data.result.children;
|
// let s = {
|
// name: response.data.result.NAME,
|
// fullName: response.data.result.FULLNAME,
|
// maxx: response.data.result.MAXX,
|
// maxy: response.data.result.MAXY,
|
// minx: response.data.result.MINX,
|
// miny: response.data.result.MINY,
|
// geometry: response.data.result.GEOMETRY,
|
// };
|
// that.selectCity = s;
|
// that.originSelectCityData = {
|
// selectCity: s,
|
// cityList: [],
|
// };
|
|
// list.forEach((item) => {
|
// let c = {
|
// name: item.NAME,
|
// fullName: item.FULLNAME,
|
// maxx: item.MAXX,
|
// maxy: item.MAXY,
|
// minx: item.MINX,
|
// miny: item.MINY,
|
// geometry: item.GEOMETRY,
|
// };
|
// that.cityList.push(c);
|
// that.originSelectCityData.cityList.push(c);
|
// });
|
// },
|
// (response) => {
|
// console.log("error");
|
// }
|
// );
|
}
|
},
|
showCity(item) {
|
!this.lastLevel && this.selectList.push(this.selectCity);
|
this.selectCity = item;
|
|
if (item.minx && item.miny && item.maxx && item.maxy) {
|
if (item.minx === item.maxx && item.miny === item.maxy) {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
item.minx,
|
item.miny,
|
1000
|
),
|
});
|
} else {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Rectangle.fromDegrees(
|
item.minx,
|
item.miny,
|
item.maxx,
|
item.maxy
|
),
|
});
|
}
|
}
|
|
let that = this;
|
this.isDisabled = true;
|
// axios
|
// .get(
|
// "http://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/search",
|
// {
|
// params: {
|
// withgeometry: true,
|
// fullname: this.selectCity.fullName,
|
// },
|
// }
|
// )
|
// .then(
|
// (response) => {
|
// // console.log(response.data);
|
// let list =
|
// response.data &&
|
// response.data.result &&
|
// response.data.result.children;
|
// if (list && list.length) {
|
// this.lastLevel = false;
|
// that.cityList = [];
|
// list.forEach((item) => {
|
// that.cityList.push({
|
// name: item.NAME,
|
// fullName: item.FULLNAME,
|
// maxx: item.MAXX,
|
// maxy: item.MAXY,
|
// minx: item.MINX,
|
// miny: item.MINY,
|
// geometry: item.GEOMETRY,
|
// });
|
// });
|
// } else {
|
// this.lastLevel = true;
|
// }
|
// this.isDisabled = false;
|
// },
|
// (response) => {
|
// console.log("error");
|
// }
|
// );
|
|
borderLine.forEach((item) => {
|
sgworld.Creator.SimpleGraphic.PrimitiveCollection.remove(item);
|
});
|
borderLine = [];
|
if (item.geometry && item.name !== "浙江省") {
|
let positions = sgworld.Core.getPositionFromWKT(item.geometry);
|
positions.forEach((item) => {
|
this.addBorderLine(item);
|
});
|
}
|
},
|
backCity(item) {
|
this.selectCity = item;
|
let selectIndex = this.selectList.indexOf(item);
|
if (item.name === "浙江省") {
|
this.selectList = [];
|
} else {
|
this.selectList.splice(selectIndex, this.selectList.length - 1);
|
}
|
this.lastLevel = false;
|
|
item.minx &&
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Rectangle.fromDegrees(
|
item.minx,
|
item.miny,
|
item.maxx,
|
item.maxy
|
),
|
});
|
|
let that = this;
|
this.isDisabled = true;
|
// axios
|
// .get(
|
// "http://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/search",
|
// {
|
// params: {
|
// withgeometry: true,
|
// fullname: this.selectCity.fullName,
|
// },
|
// }
|
// )
|
// .then(
|
// (response) => {
|
// // console.log(response.data);
|
// let list =
|
// response.data &&
|
// response.data.result &&
|
// response.data.result.children;
|
// that.cityList = [];
|
// list.forEach((item) => {
|
// that.cityList.push({
|
// name: item.NAME,
|
// fullName: item.FULLNAME,
|
// maxx: item.MAXX,
|
// maxy: item.MAXY,
|
// minx: item.MINX,
|
// miny: item.MINY,
|
// geometry: item.GEOMETRY,
|
// });
|
// });
|
// this.isDisabled = false;
|
// },
|
// (response) => {
|
// console.log("error");
|
// }
|
// );
|
|
borderLine.forEach((item) => {
|
sgworld.Creator.SimpleGraphic.PrimitiveCollection.remove(item);
|
});
|
borderLine = [];
|
if (item.geometry && item.name !== "浙江省") {
|
let positions = sgworld.Core.getPositionFromWKT(item.geometry);
|
positions.forEach((item) => {
|
this.addBorderLine(item);
|
});
|
}
|
},
|
async addBorderLine(position) {
|
let _borderLine = sgworld.Creator.addSimpleGraphic("polylinePrimitive", {
|
positions: position,
|
color: "#ffffff",
|
clampToGround: true,
|
});
|
borderLine.push(_borderLine);
|
},
|
},
|
};
|
</script>
|
