Skip to content

G
gassafety
Commit 5b078f81 authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

管线设备坐标拾取 gengdidi

parent ee8f7bd4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1194 additions and 0 deletions
gassafety-web/src/components/mapDialog/index.vue → gassafety-web/src/components/mapDialog/checkDeviceLoaction.vue
View file @ 5b078f81
......@@ -23,10 +23,11 @@
<el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button
>
</el-row>
<div style="width: 47vw; height: 57vh" id="container"></div>
<div style="width: 47vw; height: 65vh" id="container"></div>
<el-col :span="8" class="button">
<el-input id="ss" placeholder="输入地址" v-model="keyWorld" ></el-input><el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
<el-input id="ss" placeholder="输入地址" v-model="keyWorld" ></el-input>
<el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
</el-col>
</el-dialog>
......@@ -47,51 +48,59 @@
keyWorld: ""
}
},
mounted(){
let that = this;
that.$nextTick(() => {
//初始化地图
let map = new AMap.Map("container", {
center: [114.72995, 38.37417],
// resizeEnable: true,
disableSocket: true,
viewMode: "3D",
showLabel: true,
pitch: 8,
zoom: 10
});
map.setFitView();
watch:{
dialogTableVisible:{
handler(value) {
if(value){
let that = this;
that.$nextTick(() => {
//初始化地图
let map = new AMap.Map("container", {
center: [114.72995, 38.37417],
// resizeEnable: true,
disableSocket: true,
viewMode: "3D",
showLabel: true,
pitch: 8,
zoom: 12
});
var overlays = [];
//坐标回显
if (typeof that.slng == "number" && that.slng != 0) {
that.lnglat.lng = that.slng;
that.lnglat.lat = that.slat;
let marker = new AMap.Marker({
position: [that.slng,that.slat]
});
marker.setMap(map);
map.setCenter([that.slng,that.slat]);
overlays.push(marker);
}
//坐标回显
if (typeof that.slng == "number" && that.slng != 0) {
that.lnglat.lng = that.slng;
that.lnglat.lat = that.slat;
let marker = new AMap.Marker({
position: [that.slng,that.slat]
});
marker.setMap(map);
map.setCenter([that.slng,that.slat]);
}
//点击获取坐标点
var mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
mouseTool.on('draw',function(e){
map.remove(overlays);
overlays.push(e.obj);
that.lnglat.lat = e.obj._position.lat;
that.lnglat.lng = e.obj._position.lng;
})
that.draw(mouseTool);
//点击获取坐标点
var mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
var overlays = [];
mouseTool.on('draw',function(e){
map.remove(overlays);
overlays.push(e.obj);
that.lnglat.lat = e.obj._position.lat;
that.lnglat.lng = e.obj._position.lng;
})
that.draw(mouseTool);
//搜索功能
AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
that.placeSearch = new AMap.PlaceSearch({
map: map
});
});
})
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
//搜索功能
AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
that.placeSearch = new AMap.PlaceSearch({
map: map
});
});
})
}
},
methods:{
confirmFun(){
......@@ -123,7 +132,7 @@
.button{
position: relative;
top: -393px;
top: -453px;
left: 14px;
}
......
gassafety-web/src/components/mapDialog/checkPipeLineLocation.vue 0 → 100644
View file @ 5b078f81
<template>
<el-dialog
title="拾取坐标"
:visible.sync="dialogTableVisible"
:show-close="false"
:close-on-click-modal="false"
>
<div style="postion:relative">
<el-row :span="8" class="button">
<el-input id="ss" placeholder="输入地址" v-model="keyWorld" ></el-input>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
</el-row>
</div>
<div style="" id="container" ref="elD"></div>
<el-row class="lt">
<el-button type="primary" size="small" @click="confirmFun">确定</el-button>
<el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
</el-row>
</el-dialog>
</template>
<script>
import gaodeMap from "./js/gaodeMapDialog.js";
import { getString } from "@/utils/gassafety.js";
export default {
props: {
dialogTableVisible: {
type:Boolean,
},
slat: 0,
slng: 0,
str:{
type:String,
}
},
data(){
return{
lnglat: {
lat: "",
lng: ""
},
keyWorld: "",
map:{},
div:null,
}
},
watch:{
dialogTableVisible:{
handler(value) {
if(value){
window.addEventListener("click", this.barClose);
this.$nextTick(() => {
this.map = new gaodeMap("石家庄");
this.map.addMouseTool();
if(this.str){
this.map.addPolyline([{coordinates:this.str}]);
}
this.map.lineType = 1;
if (this.map.newLineObj == null) {
this.map.createNewLine();
}
})
}else{
console.log("清除事件")
window.removeEventListener("click", this.barClose);
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
},
methods:{
confirmFun(){
console.log("path",this.map.newLineObj.getPath())
const pathArr = this.map.newLineObj.getPath().map(item=>{
return [
item.lng,item.lat
]
})
const str = getString(pathArr)
this.$emit('confirmFun',str);
this.$emit('dialogcancelFun');
},
search(){
this.placeSearch.search(this.keyWorld); //关键字查询查询
},
barClose() {
console.log("window");
this.deviceType = false;
// 关闭当前线条的infowindow
this.map.closeInfoWindow();
this.map.lineFlag = false;
},
},
beforeDestroy() {
},
}
</script>
<style scoped lang="scss">
.dialog{
position:relative;
}
#container{
width: 100%;
height: 500px;
}
.lt{
margin-top: 15px;
text-align: right;
}
.lt .el-input {
width: 120px;
margin-right: 15px;
display: inline-block;
}
.button{
position: absolute;
top: 90px;
left: 30px;
z-index: 999;
}
.button .el-input{
width: 180px;
margin-right: 10px;
display: inline-block;
}
</style>
gassafety-web/src/components/mapDialog/js/gaodeMapDialog.js 0 → 100644
View file @ 5b078f81
This diff is collapsed.
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