<style>
.mapContent{
position: relative;
}
.menuMap{
position: absolute;
top: 10px;
left: 200px;
z-index: 100;
width: 690px;
}
.menuMap .ivu-btn{
padding: 0 15px;
height: 40px;
}
.menuMap .ivu-btn span{
display: block;
line-height: 12px;
}
.menuMap .ivu-btn span p{
font-size: 12px
}
.menuMap .ivu-input-group, .menuMap .ivu-input-group .ivu-input{
height: 39px;
}
.demo-drawer-footer{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
background: #fff;
}
.radioList .ivu-radio-group{
height: 40px;
}
.radioList .ivu-radio-wrapper{
height: 100%;
line-height: 10px
}
.alertPos{
position: absolute;
bottom: -10px;
left: 15px;
z-index: 100;
width: 300px;
}
.alertPos ul li,.qixiangPos ul li{
list-style-type: none
}
.qixiangPos{
position: absolute;
top: 60px;
left: 15px;
width: 300px;
}
.mapDiv{
width: 100%;
height: 85vh;
z-index:0;
}
</style>
<template>
<div>
<Col>
<div id="mapDiv" style="min-height: 730px;">
</div>
</div>
</template>
<script>
import Vue from 'vue';
import BaiduMap from '../../../build/js'
export default {
components: {
addPeoples,
formUpImgIdentity,
PlantFormUpImgS
},
name: 'editAcre',
data () {
return {
polygonTool:'',
zoom: '11',
points: [],
line: '',
T: '',
lay: '',
map: '',
drivingRoute: '',
_CarTrack: '',
onDrawPolygon:"",
config: '',
iconMaker: [],
latitude:'',
longtitude:"",
value11: '',
modal: false,
modal2: false,
modal4: false,
modal5: false,
modal6: false,
modal7: false,
imgShow: false,
single: false,
modal_loading: false,
styles: {
height: 'calc(100% - 55px)',
overflow: 'auto',
paddingBottom: '53px',
position: 'static'
},
index: 1,
formData2: {
color: '',
diaphaneity: 100,
},
markersArray: [],
formData4: {},
formData5: {},
formData6: {},
peasantList: [],
principalList: [],
alertPosCon: [],
modalObj: {},
cameraList: {},
shebei: {},
urllist:[
{
lat:'',
lng:''
}
]
}
},created(){
if(location.href.indexOf('#reloaded')==-1){
location.href=location.href+"#reloaded";
location.reload();
}
},
methods: {
init() {
if(this.$route.params.id != undefined) {
this.modal2 = true
this.$http.get('soil/findById/'+this.$route.params.id).then((res) => {
this.formData2 = res.data
this.formData2.type = res.data.type.toString()
this.formData2.diaphaneity = parseInt(res.data.diaphaneity)
if(res.data.coordinate != ''){
var zb = JSON.parse(res.data.coordinate)
this.longtitude = zb[0].lng
this.latitude = zb[0].lat
this.urllist = zb
}
})
}
BaiduMap.init()
.then((T) => {
this.T = T
this.zoom = 12
this.map = new T.Map('mapDiv')
this.map.centerAndZoom(new T.LngLat(this.longtitude,this.latitude), 12)
this.map.addControl(TMAP_HYBRID_MAP);
var icon = new T.Icon({
iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
})
var config = {
strokeColor:"blue",
fillColor:"blue",
strokeWeight:"3px",
strokeOpacity:0.5,
fillOpacity:0.5,
showLabel:true
};
this.polygonTool = new T.PolygonTool(this.map,config);
var line = new T.Polygon(this.urllist, { color: 'blue' })
this.map.addOverLay(line)
})
init1(val) {
},
init2(val){
},
showLonLat(arr){
arr.map(item=>{
this.markersArray.push({
lat:item.lat(),
lng:item.lng(),
})
})
},
childChick(obj) {
if (obj==true) {
this.modal = false
this.init();
}
},
addListRow2() {
this.urllist.push({
lat: '',
lng: '',
});
},
deleteListRow2() {
if(this.urllist.length > 3){
this.urllist.splice(this.urllist.length - 1,1)
}else{
this.$Notice.error({
title: '地理坐标点不能小于三个！',
duration: 8,
});
}
},
addTudi(){
this.modal_loading = true;
this.formData2.coordinate = JSON.stringify(this.urllist)
this.$http.post('/soil/update',this.formData2).then((res) => {
if (res.code == 200) {
this.$Message.success('修改成功!');
setTimeout(() => {
this.modal2 = false
this.$router.go(-1);
}, 1000);
}
});
this.modal_loading = false;
},
preview() {
this.init1()
},
esc() {
this.modal2 = false
this.$router.go(-1);
},
changePeasant(ele){
this.formData2.peasantName = ele.label
},
changePrincipal(ele){
this.formData2.principalName = ele.label
},
look(obj,index){
this.modal7 = true
this.$http.get('/camera/live/'+obj.id).then((res) => {
this.cameraList = res.data
this.$nextTick(function () {
var player = new EZUIPlayer('myPlayer'+index);
})
})
if (obj != '') {
this.modalObj = obj
}
}
},
mounted() {
this.init();
this.init1();
let act = this.$route.params.action
let id = this.$route.params.id
if (act === 'modify') {
this.modal2 = true
}
}
};
</script>
Processed:
0.011, SQL:
9
