<template>
|
<div id="sousuo" class="sousuo">
|
<!-- 搜索框 -->
|
<div class="ssk" v-show="ssk.show">
|
<span
|
@click="ssjmxs"
|
style="float: left; height: 100%; width: 80%; overflow: hidden"
|
><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
|
>{{ syssval }}</span
|
>
|
<span
|
v-show="syssval !== '请输入关键词搜索地图'"
|
@click="clearval"
|
style="float: right; height: 100%; width: 20%"
|
><i class="el-icon-circle-close"></i
|
></span>
|
<span
|
v-show="syssval !== '请输入关键词搜索地图'"
|
style="
|
float: right;
|
height: 100%;
|
width: 10%;
|
position: absolute;
|
top: -1px;
|
right: -3px;
|
"
|
>
|
<img
|
src="@/assets/img/navigation/addf.png"
|
style="width: 20px"
|
@click.stop="AddFavorite"
|
/>
|
</span>
|
<span
|
v-show="syssval == '请输入关键词搜索地图'"
|
style="float: right; height: 100%; width: 10%"
|
>
|
<img
|
src="@/assets/img/navigation/addf.png"
|
style="width: 20px"
|
@click.stop="showAddFavorite"
|
/>
|
</span>
|
</div>
|
<!-- 搜索界面 -->
|
<div class="ssjm" v-show="ssjm">
|
<!-- 搜索界面顶部 -->
|
<div class="menutop">
|
<div class="menutitle">搜索</div>
|
<div class="menuback" @click="cancless">关闭</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> -->
|
<span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span
|
><br />
|
<span
|
>地址:{{ item.address ? item.address : "暂无详细地址" }}</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: 2.5%;
|
bottom: 0.2rem;
|
width: 95%;
|
border: 1px solid white;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
background: #fff;
|
border-radius: 0.2rem;
|
color: black;
|
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; */
|
max-height: 80vh;
|
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>
|
let timers = null;
|
|
import axios from "axios";
|
import store from "@/utils/store.js";
|
import common from "@/components/common";
|
let flyPoint;
|
let flyLine;
|
let Allresults = [];
|
|
export default {
|
data() {
|
return {
|
syssval: "请输入关键词搜索地图",
|
ssjgxs: false,
|
ssk: store.searchPanel,
|
ssjm: false,
|
poi_text: "",
|
showList: false,
|
total: 0,
|
poiList: [],
|
};
|
},
|
methods: {
|
clearval() {
|
this.syssval = "请输入关键词搜索地图";
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
flyLine && sgworld.Creator.DeleteObject(flyLine);
|
flyLine = undefined;
|
this.poi_text = "";
|
this.ssjgxs = false;
|
},
|
changeInput() {
|
if (this.poi_text === "") {
|
this.ssjgxs = false;
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
flyLine && sgworld.Creator.DeleteObject(flyLine);
|
flyLine = undefined;
|
} else {
|
clearTimeout(timers);
|
timers = setTimeout(() => {
|
this.search(); //需要防抖的函数
|
}, 500);
|
}
|
},
|
// 显示搜索界面
|
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 = [];
|
Allresults = [];
|
} else {
|
this.ssjgxs = true;
|
Allresults = [];
|
this.poiList = [];
|
axios
|
.all([
|
// 115接口（可查地块名）
|
axios.post(common.poiserve2, {
|
adcode: "110115",
|
address: {
|
name: "",
|
type: "",
|
},
|
adname: "大兴区",
|
cityname: "北京市",
|
name: {
|
name: this.poi_text,
|
type: "",
|
},
|
page: 1,
|
perPageCount: 20,
|
pcode: "110000",
|
pname: "",
|
resType: "",
|
}),
|
// 市级平台
|
axios.get(common.poiserve, {
|
params: {
|
request: "bdPoi",
|
query: this.poi_text,
|
output: "json",
|
coord: "cgcs2000",
|
page_num: 0,
|
page_size: 20,
|
},
|
}),
|
])
|
.then(
|
(data) => {
|
// this.total = data.data.pois.length;
|
// this.poiList =
|
// data.data && data.data.pois;
|
//115接口
|
if (data[0].status == 200) {
|
data[0].data.data.res
|
.filter((item) => {
|
return item.name.includes(this.poi_text);
|
})
|
.forEach((val) => {
|
Allresults.push(val);
|
});
|
}
|
// 市级平台
|
if (data[1].data.status == 0) {
|
data[1].data.results.forEach((val) => {
|
let obj = {
|
address: val.address,
|
adname: val.area,
|
cityname: val.city,
|
id: val.uid,
|
lat: val.location.lat,
|
lng: val.location.lng,
|
name: val.name,
|
pname: val.province,
|
};
|
Allresults.push(obj);
|
});
|
}
|
|
this.total = Allresults.length;
|
this.poiList = Allresults;
|
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 that = this;
|
// let degrees = item.location.split(',');
|
// let degrees = [item.location.lng, item.location.lat];
|
let degrees = [item.lng, item.lat];
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyLine && sgworld.Creator.DeleteObject(flyLine);
|
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/mark.png",
|
heightReference: 1,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
// 如果是地块，添加范围线
|
if (item.type == "大兴用地") {
|
axios
|
.get(
|
window.gisBaseUrl +
|
"yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
|
degrees[0] +
|
"&lat=" +
|
degrees[1] +
|
"&geom=true&requesttype=json"
|
)
|
.then((response) => {
|
let center = { lon: 0, lat: 0 };
|
let polygon = that.read(response.data.geometry);
|
if (polygon.length > 0) {
|
var geometry = [];
|
let points = polygon[0].split(",");
|
for (let i = 0; i < points.length; i++) {
|
let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
|
center.lon += parseFloat(point[0]) / points.length;
|
center.lat += parseFloat(point[1]) / points.length;
|
geometry.push({
|
x: parseFloat(point[0]),
|
y: parseFloat(point[1]),
|
z: 0,
|
});
|
}
|
flyLine = sgworld.Creator.createPolyline(
|
geometry,
|
"#ff0000",
|
1,
|
0,
|
"线"
|
);
|
}
|
});
|
}
|
},
|
AddFavorite() {
|
let posi = sgworld.Viewer.camera.position;
|
let pointsInterest = {
|
destination: posi,
|
orientation: {
|
heading: Viewer.camera.heading,
|
pitch: Viewer.camera.pitch,
|
roll: Viewer.camera.roll,
|
},
|
};
|
let temObj = {};
|
temObj.name = this.syssval;
|
// 对象克隆
|
temObj.position = JSON.parse(JSON.stringify(pointsInterest));
|
// this.dataSc.push(temObj);
|
if (window.locations == "" || window.locations == undefined) {
|
window.locations = [];
|
}
|
// 把位置信息添加到缓存中
|
window.setLocations([...window.locations, temObj]);
|
this.$message({
|
message: "已收藏，请到菜单>位置>收藏中查看",
|
duration: 1500,
|
type: "success",
|
});
|
this.clearval();
|
},
|
showAddFavorite() {
|
if (store.addFavorite.show) {
|
store.setAddFavoriteShow(false);
|
} else {
|
store.setAddFavoriteShow(true);
|
store.setLayerPanelShow(false);
|
store.setRoamPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setSettingPanelShow(false);
|
}
|
},
|
read(wkt) {
|
var regExes = {
|
typeStr: /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
|
emptyTypeStr: /^\s*(\w+)\s*EMPTY\s*$/,
|
spaces: /\s+/,
|
parenComma: /\)\s*,\s*\(/,
|
doubleParenComma: /\)\s*\)\s*,\s*\(\s*\(/, // can't use {2} here
|
trimParens: /^\s*\(?(.*?)\)?\s*$/,
|
};
|
/**
|
* Object with properties corresponding to the geometry types. Property values
|
* are functions that do the actual parsing.
|
* @private
|
*/
|
var parse$1 = {
|
/**
|
* Return point geometry given a point WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the point.
|
* @return {Point} A point geometry.
|
* @private
|
*/
|
point: function point(str) {
|
if (str === undefined) {
|
return [];
|
}
|
|
var coords = str.trim().split(regExes.spaces);
|
return [Number.parseFloat(coords[0]), Number.parseFloat(coords[1])];
|
},
|
|
/**
|
* Return a multipoint geometry given a multipoint WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the multipoint.
|
* @return {Point} A multipoint feature.
|
* @private
|
*/
|
multipoint: function multipoint(str) {
|
var this$1 = this;
|
|
if (str === undefined) {
|
return [];
|
}
|
|
var point;
|
var points = str.trim().split(",");
|
var components = [];
|
for (var i = 0, len = points.length; i < len; ++i) {
|
point = points[i].replace(regExes.trimParens, "$1");
|
components.push(parse$1.point(point));
|
}
|
return components;
|
},
|
|
/**
|
* Return a linestring geometry given a linestring WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the linestring.
|
* @return {LineString} A linestring geometry.
|
* @private
|
*/
|
linestring: function linestring(str) {
|
if (str === undefined) {
|
return [];
|
}
|
|
var points = str.trim().split(",");
|
var components = [];
|
var coords;
|
for (var i = 0, len = points.length; i < len; ++i) {
|
coords = points[i].trim().split(regExes.spaces);
|
components.push([
|
Number.parseFloat(coords[0]),
|
Number.parseFloat(coords[1]),
|
]);
|
}
|
return components;
|
},
|
|
/**
|
* Return a linearring geometry given a linearring WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the linearring.
|
* @return {LinearRing} A linearring geometry.
|
* @private
|
*/
|
linearring: function linearring(str) {
|
if (str === undefined) {
|
return [];
|
}
|
|
var points = str.trim().split(",");
|
var components = [];
|
var coords;
|
for (var i = 0, len = points.length; i < len; ++i) {
|
coords = points[i].trim().split(regExes.spaces);
|
components.push([
|
Number.parseFloat(coords[0]),
|
Number.parseFloat(coords[1]),
|
]);
|
}
|
return components;
|
},
|
|
/**
|
* Return a multilinestring geometry given a multilinestring WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the multilinestring.
|
* @return {MultiLineString} A multilinestring geometry.
|
* @private
|
*/
|
multilinestring: function multilinestring(str) {
|
var this$1 = this;
|
|
if (str === undefined) {
|
return [];
|
}
|
|
var line;
|
var lines = str.trim().split(regExes.parenComma);
|
var components = [];
|
for (var i = 0, len = lines.length; i < len; ++i) {
|
line = lines[i].replace(regExes.trimParens, "$1");
|
components.push(parse$1.linestring(line));
|
}
|
return components;
|
},
|
|
/**
|
* Return a polygon geometry given a polygon WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the polygon.
|
* @return {Polygon} A polygon geometry.
|
* @private
|
*/
|
polygon: function polygon(str) {
|
var this$1 = this;
|
|
if (str === undefined) {
|
return [];
|
}
|
|
var ring, linestring, linearring;
|
var rings = str.trim().split(regExes.parenComma);
|
var shell;
|
var holes = [];
|
//for (var i = 0, len = rings.length; i < len; ++i) {
|
ring = rings[0].replace(regExes.trimParens, "$1");
|
linestring = ring;
|
//}
|
return linestring;
|
},
|
|
/**
|
* Return a multipolygon geometry given a multipolygon WKT fragment.
|
*
|
* @param {String} str A WKT fragment representing the multipolygon.
|
* @return {MultiPolygon} A multipolygon geometry.
|
* @private
|
*/
|
multipolygon: function multipolygon(str) {
|
var this$1 = this;
|
|
if (str === undefined) {
|
return [];
|
}
|
|
var polygon;
|
var polygons = str.trim().split(regExes.doubleParenComma);
|
var components = [];
|
for (var i = 0, len = polygons.length; i < len; ++i) {
|
polygon = polygons[i].replace(regExes.trimParens, "$1");
|
components.push(parse$1.polygon(polygon));
|
}
|
return components;
|
},
|
};
|
|
var geometry, type, str;
|
wkt = wkt.replace(/[\n\r]/g, " ");
|
var matches = regExes.typeStr.exec(wkt);
|
if (wkt.search("EMPTY") !== -1) {
|
matches = regExes.emptyTypeStr.exec(wkt);
|
matches[2] = undefined;
|
}
|
if (matches) {
|
type = matches[1].toLowerCase();
|
str = matches[2];
|
if (parse$1[type]) {
|
geometry = parse$1[type].apply(this, [str]);
|
}
|
}
|
|
if (geometry === undefined) {
|
throw new Error("Could not parse WKT " + wkt);
|
}
|
|
return geometry;
|
},
|
},
|
};
|
</script>
|
