<template>
|
<div class="search" id="search">
|
<div class="searchInput">
|
<el-input v-loading="loading" :disabled="loading" placeholder="请输入地名地址" prefix-icon="el-icon-search"
|
:clearable="clearable" v-model="poi_text" @input="changeInput"></el-input>
|
|
<!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入地名地址"
|
@select="handleSelect"></el-autocomplete> -->
|
|
<!-- @input="isNull" -->
|
</div>
|
<div class="searchListContainer" v-if="showList">
|
<div v-if="searching">
|
<p>查询中，请稍后...</p>
|
</div>
|
<div v-else>
|
<div>共找到{{ total }}条结果</div>
|
<hr />
|
<div class="searchList">
|
<div class="searchItem" v-for="(item, index) in poiList" :key="index" @click="flyTo(item)">
|
<el-button>
|
<div class="itemName">
|
<i class="el-icon-map-location"></i>
|
<span>{{ item.name }}</span>
|
</div>
|
<div class="itemInfo">
|
<span>{{ item.address }}</span>
|
</div>
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.searchInput {
|
position: absolute;
|
top: 18px;
|
right: 63px;
|
width: 293px;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
}
|
|
.el-input {
|
font-size: 18px;
|
}
|
|
.el-input /deep/ .el-input__inner {
|
background-color: transparent;
|
color: #feffff;
|
border: none;
|
}
|
|
.searchListContainer {
|
position: absolute;
|
|
top: 78px;
|
left: -308px;
|
border-radius: 3px;
|
box-sizing: border-box;
|
width: 293px;
|
padding: 12px;
|
z-index: 2000;
|
color: #feffff;
|
line-height: 1.4;
|
text-align: justify;
|
font-size: 14px;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
word-break: break-all;
|
}
|
|
.searchList {
|
max-height: 500px;
|
overflow: auto;
|
padding-right: 10px;
|
}
|
|
.searchList::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
scrollbar-arrow-color: red;
|
}
|
|
.searchList::-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;
|
}
|
|
.searchList::-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);
|
}
|
|
.searchItem button {
|
display: block;
|
width: 100%;
|
border: 1px solid gray;
|
padding: 12px 5px;
|
}
|
|
.itemName {
|
text-align: left;
|
color: #feffff;
|
font-size: 16px;
|
line-height: 20px;
|
overflow: hidden;
|
}
|
|
.itemName span {
|
float: left;
|
max-width: 195px;
|
white-space: break-spaces;
|
}
|
|
.itemName i {
|
float: left;
|
font-size: 24px;
|
margin-right: 8px;
|
}
|
|
.itemInfo {
|
text-align: left;
|
padding-top: 6px;
|
padding-left: 32px;
|
line-height: 20px;
|
/* color: black; */
|
color: white;
|
white-space: break-spaces;
|
}
|
|
.el-pagination {
|
text-align: center;
|
padding: 0;
|
color: white;
|
}
|
|
/* 分页显示中每一页的点击按钮 背景色设置 */
|
.el-pagination /deep/ .el-pager li {
|
background-color: transparent;
|
}
|
|
/* 下一页和上一页的点击按钮背景色，和文字颜色 */
|
.el-pagination /deep/ .btn-next,
|
.el-pagination /deep/ .btn-prev {
|
background-color: transparent;
|
color: white;
|
}
|
|
.el-button {
|
background: rgba(0, 0, 0, 0.1);
|
color: white;
|
margin: 2px;
|
}
|
</style>
|
|
<script>
|
import axios from "axios";
|
import common from "@/components/common";
|
// import { queryPOI } from "@/utils/request";
|
let flyPoint;
|
|
export default {
|
name: "search",
|
data() {
|
return {
|
clearable: true,
|
poi_text: "",
|
area: "",
|
showList: false,
|
searching: false,
|
total: 0,
|
poiList: [],
|
address: null,
|
loading: false,
|
};
|
},
|
created() {
|
// axios.get("./static/json/poi.json").then(response => {
|
// this.address = response.data;
|
// });
|
},
|
mounted() { },
|
methods: {
|
changeInput(e) {
|
this.poi_text = this.isNull(e);
|
if (this.poi_text === "") {
|
this.clear();
|
} else {
|
this.search();
|
}
|
},
|
isNull(value, number = 255) {
|
if (this.poi_text === "") {
|
this.clear();
|
}
|
value = value
|
.replace(
|
/[`~!@#$%^&*()+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g,
|
""
|
)
|
.replace(/\s/g, "");
|
if (value.length >= number) {
|
this.$message({
|
type: "warning",
|
message: `输入内容不能超过${number}个字符`,
|
});
|
}
|
return value;
|
},
|
clear() {
|
this.poi_text = "";
|
this.area = "";
|
this.showList = false;
|
this.searching = false;
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
},
|
getArea() {
|
let height = Viewer.container.offsetHeight;
|
let widht = Viewer.container.offsetWidth;
|
let l_t = sgworld.Navigate.getMouseDegrees({ x: 0, y: 0 });
|
let r_b = sgworld.Navigate.getMouseDegrees({ x: widht, y: height });
|
let rectangle = {
|
minx: (l_t && l_t.lon) || 118.022502789,
|
miny: (r_b && r_b.lat) || 27.045434061,
|
maxx: (r_b && r_b.lon) || 123.156157488,
|
maxy: (l_t && l_t.lat) || 31.182515322,
|
};
|
if (rectangle.minx > rectangle.maxx) {
|
let x = rectangle.minx;
|
rectangle.minx = rectangle.maxx;
|
rectangle.maxx = x;
|
}
|
if (rectangle.miny > rectangle.maxy) {
|
let y = rectangle.miny;
|
rectangle.miny = rectangle.maxy;
|
rectangle.maxy = y;
|
}
|
rectangle.minx < 118.022502789 && (rectangle.minx = 118.022502789);
|
rectangle.miny < 27.045434061 && (rectangle.miny = 27.045434061);
|
rectangle.maxx > 123.156157488 && (rectangle.maxx = 123.156157488);
|
rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
|
return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
|
},
|
search() {
|
if (this.poi_text === "") {
|
this.$message({
|
showClose: true,
|
message: "输入关键词搜索地图!",
|
});
|
} else {
|
// queryPOI("yinjing","yz井数据","").then(res=>{
|
// console.log(res);
|
// })
|
this.showList = true;
|
this.searching = true;
|
axios
|
.all([
|
axios.get(`http://10.10.4.116:8086/gadapter/poi/text?keyword=${this.poi_text}&output=json&coord=cgcs2000`),
|
axios.get(`http://10.10.4.116:8086/cs/selectIndustrialPark?pageIndex=1&pageSize=20&yqmc=${this.poi_text}`),
|
])
|
.then((data) => {
|
this.searching = false;
|
let Allresults = [];
|
if (data[0].data.status == 0) {
|
data[0].data.results.forEach((val) => {
|
let obj = {
|
address: val.address,
|
adname: val.area,
|
cityname: val.city,
|
id: val.id,
|
lng: Number(val.location.split(',')[0]),
|
lat: Number(val.location.split(',')[1]),
|
name: val.name,
|
pname: val.province,
|
street: val.street,
|
tag: val.tag,
|
};
|
Allresults.push(obj);
|
});
|
}
|
//115接口
|
if (data[1].status == 200) {
|
data[1].data.data
|
.filter((item) => {
|
return item.yqmc.includes(this.poi_text);
|
})
|
.forEach((val) => {
|
let obj = {
|
address: val.dz,
|
lng: val.x,
|
lat: val.y,
|
name: val.yqmc,
|
};
|
Allresults.push(obj);
|
});
|
}
|
console.log(Allresults);
|
this.total = Allresults.length;
|
this.poiList = Allresults;
|
this.loading = false;
|
})
|
.catch((res) => {
|
this.loading = false;
|
this.searching = false;
|
});
|
// axios
|
// .post("http://10.10.4.115:8022/poisearch/qgpoi/POIQuery", searchJson)
|
// .then((data) => {
|
// if (data.status === 200) {
|
// const results = [];
|
// data.data.data.res.forEach((val) => {
|
// const result = val;
|
// results.push(result);
|
// });
|
// let poiRes = results.filter((item) => {
|
// return item.name.includes(this.poi_text);
|
// });
|
// this.total = poiRes.length;
|
// this.poiList = poiRes;
|
// this.showList = true;
|
// this.loading = false;
|
// }
|
// })
|
// .catch((res) => {
|
// this.loading = false;
|
// });
|
|
// axios.post(window.GIS_IP + '/gisserver/rest/services/YZ_POI_wfs/FeatureServer/query', qs.stringify({
|
// layerDefs: JSON.stringify([
|
// { "layerId": '0', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '1', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '2', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '3', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '4', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '5', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '6', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '7', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '8', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '9', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '10', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '11', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '12', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '13', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '14', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" },
|
// { "layerId": '15', "where": `名称 like '%${this.poi_text}%'`, "outFields": "*" }
|
// ]),
|
// geometry: '',
|
// geometryType: 'esriGeometryEnvelope',
|
// spatialRel: 'esriSpatialRelIntersects',
|
// returnGeometry: true,
|
// returnCountOnly: false
|
// })).then(res => {
|
// if (res.status === 200) {
|
// const results = []
|
// res.data.layers.forEach(val => {
|
// const result = val.features;
|
// results.push(...result)
|
// });
|
// this.total = results.length;
|
// this.poiList = results;
|
// this.showList = true;
|
// this.loading = false
|
// }
|
// }).catch(res => {
|
// this.loading = false
|
// })
|
|
// let that = this;
|
// let datas = [];
|
// for (let i = 0; i < this.address.length; i++) {
|
// if (this.address[i].NAME.indexOf(this.poi_text) != -1) {
|
// datas.push(this.address[i]);
|
// }
|
// }
|
// this.total = datas.length;
|
// this.poiList = datas;
|
// this.showList = true;
|
}
|
},
|
// currentChange(num) {
|
// this.poi_text &&
|
// this.area &&
|
// axios
|
// .get(common.poiserve, {
|
// params: {
|
// output: "json",
|
// pagecap: 10,
|
// start: num,
|
// keyword: "浙江省" + this.poi_text,
|
// area: this.area,
|
// },
|
// })
|
// .then(
|
// (response) => {
|
// this.poiList =
|
// response.data && response.data.pois && response.data.pois.poi;
|
// },
|
// (response) => {
|
// console.log("error");
|
// }
|
// );
|
// },
|
getPosition(geo) {
|
let p = geo && geo.replace("POINT(", "").replace(")", "");
|
return p.split(" ");
|
},
|
flyTo(item) {
|
flyPoint && Viewer.entities.remove(flyPoint);
|
console.log(item);
|
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
// item.LABELX,
|
// item.LABELY,
|
// parseFloat(item.location.lng),
|
// parseFloat(item.location.lat),
|
parseFloat(item.lng),
|
parseFloat(item.lat),
|
1000
|
),
|
});
|
flyPoint = Viewer.entities.add({
|
//position: Cesium.Cartesian3.fromDegrees(item.LABELX, item.LABELY),
|
position: Cesium.Cartesian3.fromDegrees(
|
// parseFloat(item.location.lng),
|
// parseFloat(item.location.lat)
|
parseFloat(item.lng),
|
parseFloat(item.lat)
|
),
|
billboard: {
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale: 1,
|
image: window.SmartEarthRootUrl + "Workers/image/mark.png",
|
heightReference: 1,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
