<template>
|
<div id="sousuo" class="sousuo">
|
<!-- 搜索/折叠按钮 -->
|
<div class="iszd">
|
<el-button
|
title="折叠"
|
style="padding: 0; border: none; background-color: transparent"
|
>
|
<img
|
v-if="active"
|
@click="zdss"
|
style="width: 0.4rem; height: 0.4rem"
|
src="../../../static/img/image/zd.png"
|
/>
|
<img
|
v-else
|
@click="xsss"
|
style="width: 0.4rem; height: 0.4rem"
|
src="../../../static/img/image/ss.png"
|
/>
|
</el-button>
|
</div>
|
<!-- 搜索框 -->
|
<div class="ssk" v-show="ssk">
|
<span
|
@click="ssjmxs"
|
style="float: left; height: 100%; width: 80%; overflow: hidden"
|
>{{ syssval }}</span
|
><span v-show="syssval!=='请输入关键词搜索地图'" @click="clearval" style="float: right; height: 100%; width: 20%"
|
><i class="el-icon-circle-close"></i
|
></span>
|
</div>
|
<!-- 搜索界面 -->
|
<div class="ssjm" v-show="ssjm">
|
<!-- 搜索界面顶部 -->
|
<div class="menutop">
|
<div class="menuback" @click="cancless">
|
<i class="el-icon-caret-left"></i>返回
|
</div>
|
<div class="menutitle">搜索</div>
|
</div>
|
<!-- 搜索框 -->
|
<div style="margin: 0.1rem 0">
|
<el-input
|
placeholder="输入关键字搜索地图"
|
autofocus
|
v-model="poi_text"
|
@input="changeInput"
|
clearable
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="search"
|
></el-button>
|
</el-input>
|
</div>
|
<!-- 结果显示 -->
|
<div v-if="total != 0">
|
<div class="ssjg" v-show="ssjgxs">
|
<div
|
class="everyinfo"
|
v-for="(item, index) in poiList"
|
:key="index"
|
@click="flyTo(item)"
|
>
|
<div style="margin: 0.05rem 0">
|
<i class="el-icon-map-location"></i>{{ item.name }}
|
</div>
|
<div style="font-size: 0.12rem; color: black">
|
<span
|
>地址:{{ item.address ? item.address : "暂无详细地址" }}</span
|
><br />
|
<span
|
>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<div class="ssjg" v-show="ssjgxs">请输入关键词搜索地图</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style scoped>
|
/* 搜索按钮的样式 */
|
.iszd {
|
position: absolute;
|
left: 0.2rem;
|
top: 0.3rem;
|
}
|
/* 搜索框的样式 */
|
.ssk {
|
position: absolute;
|
text-align: center;
|
left: 0.7rem;
|
top: 0.3rem;
|
width: 2.4rem;
|
border: 1px solid white;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
background: rgba(0, 0, 0, 0.5);
|
border-radius: 0.05rem;
|
color: white;
|
font-size: 0.14rem;
|
}
|
/* 搜索界面的样式 */
|
.ssjm {
|
padding: 0 0.1rem;
|
padding-top: 0.3rem;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
background-color: #f3f3f3;
|
z-index: 3000;
|
}
|
/* 每条搜索结果 */
|
.everyinfo {
|
color: #409eff;
|
padding: 0.05rem;
|
font-size: 0.16rem;
|
border-bottom: 1px solid lightgray;
|
}
|
.ssjg {
|
overflow-x: hidden;
|
overflow-y: scroll;
|
max-height: 4rem;
|
background: white;
|
padding: 0.2rem;
|
border-radius: 0.05rem;
|
}
|
.ssjg::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
.ssjg::-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;
|
}
|
|
.ssjg::-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";
|
import common from "@/components/common";
|
let flyPoint;
|
export default {
|
data() {
|
return {
|
syssval: "请输入关键词搜索地图",
|
active: false,
|
ssjgxs: false,
|
ssk: false,
|
ssjm: false,
|
poi_text: "",
|
showList: false,
|
total: 0,
|
poiList: [],
|
};
|
},
|
methods: {
|
clearval() {
|
this.syssval = "请输入关键词搜索地图";
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
this.poi_text = "";
|
this.ssjgxs = false;
|
},
|
changeInput() {
|
if (this.poi_text === "") {
|
this.ssjgxs = false;
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
} else {
|
this.search();
|
}
|
},
|
// 显示搜索框
|
xsss() {
|
this.active = true;
|
this.ssk = true;
|
},
|
// 折叠搜索框
|
zdss() {
|
this.active = false;
|
this.ssk = false;
|
},
|
// 显示搜索界面
|
ssjmxs() {
|
this.ssjm = true;
|
},
|
// 退出搜索界面
|
cancless() {
|
this.ssjm = false;
|
},
|
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.poiList = [];
|
} else {
|
this.ssjgxs = true;
|
let that = this;
|
axios
|
.get(common.poiserve, {
|
params: {
|
output: "json",
|
pagecap: 100,
|
start: 1,
|
keyword: "浙江省" + this.poi_text,
|
area: this.getArea(),
|
},
|
})
|
.then(
|
(response) => {
|
this.total = response.data.total;
|
this.poiList =
|
response.data && response.data.pois && response.data.pois.poi;
|
this.showList = true;
|
},
|
(response) => {
|
console.log("error");
|
}
|
);
|
}
|
},
|
getPosition(geo) {
|
let p = geo && geo.replace("POINT(", "").replace(")", "");
|
return p.split(" ");
|
},
|
flyTo(item) {
|
this.ssjm = false;
|
this.syssval = item.name;
|
let geo = item.geo.value;
|
let degrees = this.getPosition(geo);
|
flyPoint && Viewer.entities.remove(flyPoint);
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
degrees[0],
|
degrees[1],
|
1000
|
),
|
});
|
flyPoint = Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
|
billboard: {
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale: 1,
|
image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
|
// image: window.SmartEarthRootUrl + "/Workers/image/red.png",
|
// image: "../../../static/img/image/red.png",
|
heightReference: 1,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
},
|
},
|
};
|
</script>
|