Skip to content

G
gassafety
Commit 9657199d authored by 王晓倩's avatar 王晓倩
Browse files
Options

误传组件

parent d199f2ee
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 474 deletions
gassafety-web/src/components/Maplnglat/index.vue deleted 100644 → 0
View file @ d199f2ee
<template>
<div class="mapwrap">
<el-dialog
title="拾取坐标"
:visible.sync="dialogTableVisible"
:show-close="false"
:close-on-click-modal="false"
id="mapcnt"
>
<el-row class="lt">
经纬度:
<el-input
placeholder="经度"
v-model.number="lnglat.lng"
type="number"
></el-input>
<el-input
placeholder="纬度"
v-model.number="lnglat.lat"
type="number"
></el-input>
<el-button type="primary" size="small" @click="confirmFun"
>确定</el-button
>
<el-button size="small" @click="$emit('dialogcancelFun')"
>取消</el-button
>
</el-row>
<el-row>
<div id="mapContainer">
<Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
</div>
</el-row>
</el-dialog>
</div>
</template>
<script>
import Search from '@/components/Maplnglat/search.vue';
import Mutil from '@/utils/mapUtil.js';
import { toLonLat } from "ol/proj";
export default {
components: {
Search
},
data() {
return {
MAP: Object,
Mutil: Object,
mapLoadDone: false,
slat: 0,
slng: 0,
dialogTableVisible: false,
zoom: 12,
lnglat: {
lng: 0,
lat: 0,
}
}
},
methods: {
mapClick() {
let that = this;
that.MAP.on("click", function (evt) {
let lnglat = toLonLat(evt.coordinate);
that.Mutil.removeSearchm("pickLngLat");
that.Mutil.addMarkerToMap(
"pickLngLat",
"",
require(""),
lnglat,
0.5
);
that.lnglat.lng = Number(lnglat[0].toPrecision(10));
that.lnglat.lat = Number(lnglat[1].toPrecision(10));
});
},
confirmFun() {
this.$emit("dialogcancelFun");
this.$emit("confirm", {
lng: this.lnglat.lng,
lat: this.lnglat.lat,
});
},
cancel() {
},
mounted() {
let that = this;
that.$nextTick(() => {
that.Mutil = new Mutil("mapContainer");
that.MAP = that.Mutil.MAP;
that.mapLoadDone = true;
if (typeof that.slng == "number" && that.slng != 0) {
that.lnglat.lng = that.slng;
that.lnglat.lat = that.slat;
that.Mutil.addMarkerToMap(
"pickLngLat",
"",
require("@/assets/mark/pk.png"),
[that.slng, that.slat],
0.5
);
that.Mutil.setViewF({
center: [that.slng, that.slat],
zoom: 16,
});
}
that.mapClick();
});
}
}
}
</script>
<style lang="scss">
#mapcnt .el-dialog {
width: 90% !important;
}
.el-cascader {
width: 100%;
}
.lt .el-input {
width: 180px;
margin-right: 15px;
display: inline-block;
}
#mapContainer {
width: 100%;
height: 450px;
position: relative;
margin-top: 10px;
overflow: hidden;
}
.el-vue-amap-container {
width: 100%;
height: 100%;
}
.search-box {
position: absolute !important;
top: 10px;
left: 10px;
}
#searchbar input {
padding: 5px;
border: 1px solid royalblue;
border-radius: 5px;
min-width: 150px;
}
</style>
gassafety-web/src/components/Maplnglat/search.vue deleted 100644 → 0
View file @ d199f2ee
<template>
<div>
<div class="funBox">
<div class="funBox-item ser">
<input type="text" placeholder="输入地址" v-model="serVal" /><button @click="mapSearch()"></button>
<div class="serTip" v-if="tipsShow">
<div class="aimAdone">
<p>您可以尝试：</p>
<p>1、检查输入是否正确</p>
<p>2、输入其他关键字进行搜索</p>
</div>
</div>
<!-- 目标地点 -->
<div class="serTip" v-if="aimAdrsArr.length > 0">
<div v-for="(i, inde) in aimAdrsArr" :key="inde" class="aimAdone" @click="mapSetView(i.lonlat)">
<p>{{ inde + 1 + ". " + i.name }}</p>
<p class="grey">地址：{{ i.address }}</p>
</div>
</div>
<div class="serTip" v-if="serTipArr.length > 0">
<!-- 建议地点 -->
<ul>
<li v-for="(i, ind) in serTipArr" :key="ind" @click="toAimAdress(i.name)">
{{ i.name }}<span class="addressTxt">{{ i.address }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import {
fromLonLat,
toLonLat
} from "ol/proj";
import axios from "axios";
export default {
name: "search",
components: {
},
data() {
return {
MAP: Object,
Mutil: Object,
serVal: "",
mapStyleArr: [{
key: "gooleSatellite",
word: "谷歌卫星地图",
},
{
key: "amapSatellite",
word: "高德卫星地图",
},
{
key: "amapCity",
word: "高德城市地图",
},
],
serTipArr: [],
aimAdrsArr: [],
actInde: 0,
tipsShow: false,
}
},
watch: {
serVal(newVal){
if (newVal == "") {
this.Mutil.removeSearchm('searchM');
this.tipsShow = false;
this.serTipArr = [];
return;
}
this.searchFun("4", newVal);
}
},
methods: {
searchFun(type, newVal) {
let that = this,
url = "http://api.tianditu.gov.cn/search";
that.serTipArr = [];
that.aimAdrsArr = [];
that.tipsShow = false;
axios
.get(url, {
params: {
type: "query",
postStr: {
// specifyAdminCode: "130100000000",
keyWord: newVal,
mapBound: "114.34193,37.92687,114.63753,38.16345",
level: "12",
queryType: type, //4：普通建议词搜索， 1：普通搜索，
start: "0",
count: 10,
},
tk: "c8df739f047ce17cfe41b63cbeae6997",
},
})
.then((res) => {
if (type == 4 && res.status == 200) {
if (res.data.suggests) {
that.tipsShow = false;
let {
suggests: tipsData
} = res.data;
that.serTipArr = tipsData;
} else {
that.serTipArr = [];
that.tipsShow = true;
}
}
if (type == 1 && res.status == 200) {
if (res.data.pois) {
that.tipsShow = false;
let {
pois: aimsData
} = res.data;
that.aimAdrsArr = aimsData;
that.Mutil.removeSearchm('searchM');
//标注到地图
that.aimAdrsArr.forEach((ele, inde) => {
let lnglat = ele.lonlat.split(" ");
that.Mutil.addMarkerToMap(
'searchM',
ele.name,
require("@/assets/mark/pick.png"),
[Number(lnglat[0]), Number(lnglat[1])],
0.5
);
if (inde == 0) {
that.MAP.getView().animate({
center: fromLonLat([Number(lnglat[0]), Number(lnglat[1])]),
zoom: 17,
duration: 1000,
});
}
});
} else {
that.aimAdrsArr = [];
that.tipsShow = true;
}
}
})
.catch((err) => {
that.$message.error(err);
});
},
mapSetView(lnglat) {
let that = this,
lonlat = lnglat.split(" ");
that.MAP.getView().animate({
center: fromLonLat([Number(lonlat[0]), Number(lonlat[1])]),
zoom: 17,
duration: 1000,
});
},
mapSearch() {
let that = this,
url = "https://restapi.amap.com/v3/place/text";
that.$axios
.get(
url +
`?key=a827e19b0efcc8bf58afb4f23de188d9&keywords=${that.serVal}?city='河北省'`
)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
},
toAimAdress(name) {
this.serTipArr = [];
this.searchFun("1", name);
},
changeMapStyle(inde) {
let that = this,
arr = [0, 1, 2, 3];
console.log(inde);
arr.forEach((ele) => {
if (ele != inde) that.MAP.getLayers().getArray()[ele].setVisible(false);
});
that.MAP.getLayers().getArray()[inde].setVisible(true);
},
},
created(){},
}
</script>
<style>
.funBox {
position: absolute;
top: 10px;
left: 41px;
z-index: 2;
}
.funBox-item {
float: left;
background: #fff;
padding: 5px;
}
.funBox .ser {
width: 265px;
height: 45px;
box-sizing: border-box;
z-index: 2202;
border-radius: 2px;
position: relative;
}
.funBox .ser input {
position: absolute;
top: 12.5px;
box-sizing: border-box;
text-indent: 2px;
z-index: 2200;
border: none;
width: 219px;
height: 20px;
line-height: 20px;
padding: 0;
letter-spacing: 0.5px;
font-size: 14px;
}
.funBox .ser input:focus {
border: none;
outline: none;
}
.funBox button {
background: url("https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-black-search.png") no-repeat center;
background-size: 80%;
position: absolute;
right: 0;
top: 0;
z-index: 9308;
box-sizing: border-box;
width: 45px;
height: 45px;
outline: none;
border: none;
border-left: #eee 1px solid;
}
.funBox .btn {
line-height: 25px;
padding: 10px 8px;
border-right: #afc5ee 1px dashed;
font-size: 14px;
cursor: pointer;
}
.funBox .btn:last-child {
border: none;
}
.serTip {
overflow: hidden;
position: absolute;
top: 47px;
left: 0;
width: 100%;
height: auto;
z-index: 9;
background: #fff;
}
.serTip ul {
margin: 0;
padding: 0;
}
.serTip li {
line-height: 2;
list-style: none;
font-size: 14px;
color: black;
padding: 0 10px;
width: 100%;
overflow: hidden;
height: 2em;
cursor: pointer;
}
.serTip li:hover {
background: #eee;
}
.aimAdone {
padding: 0 10px;
cursor: pointer;
}
.aimAdone:hover {
background: burlywood;
}
.addressTxt {
margin-left: 10px;
margin-right: 5px;
color: #999;
font-size: 12px;
}
.grey {
font-size: 12px;
color: #999;
}
.atc {
color: blue;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment