<template>
|
<div ref="imageWrapper">
|
<div id="map"></div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
props:["longitude","latitude"],
|
data () {
|
return {
|
map: "",
|
polygons: [],
|
lng: "",
|
lat: "",
|
addShow: false,
|
|
currentPolygons: [],
|
|
complete: null,
|
|
rectangleLayer: null,
|
|
// 链接中的数据做处理的图层
|
currentPolygonLayer: null,
|
|
plotPolygonLayers: [],
|
|
imgUrl: "",
|
file: "",
|
|
regionFull: false,
|
|
flagList: false,
|
clickPosition: {}
|
}
|
},
|
created () {
|
let type = this.getQueryString('type')
|
|
if (type == 1) {
|
// 用户编辑
|
this.addShow = true
|
this.regionFull = true
|
} else {
|
// 单纯展示
|
this.addShow = false
|
}
|
},
|
mounted () {
|
let that = this
|
// this.lng = 115.89886924863
|
// this.lat = 28.6780931500551
|
this.lng = this.longitude
|
this.lat = this.latitude
|
this.initDate()
|
|
this.map.pm.addControls({
|
position: "topleft",
|
drawPolygon: false, // 添加绘制多边形
|
drawMarker: false, //添加按钮以绘制标记
|
drawCircleMarker: false, //添加按钮以绘制圆形标记
|
drawPolyline: false, //添加按钮绘制线条
|
drawRectangle: false, //添加按钮绘制矩形
|
drawCircle: false, // 添加按钮绘制圆圈
|
editMode: false, // 添加按钮编辑多边形
|
dragMode: false, // 添加按钮拖动多边形
|
cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
|
removalMode: false // 清除图层
|
})
|
// 设置绘制后的线条颜色等
|
this.map.pm.setPathOptions({
|
color: "orange",
|
fillColor: "green",
|
fillOpacity: 0.4
|
})
|
|
this.map.pm.setLang('zh')
|
|
this.map.on('click', (e) => {
|
|
if (e.latlng.lng != that.clickPosition.lng || e.latlng.lat != that.clickPosition.lat) {
|
that.flagList = false
|
|
that.$parent.isShowLandDetails = false
|
that.$parent.isShowFooter = true
|
|
that.currentPolygonLayer.setStyle({
|
color: 'rgba(238, 166, 108, 1)', // res.color
|
weight: 2,
|
fillColor: 'rgb(238, 166, 108)', // res.color
|
fillOpacity: 0.5,
|
})
|
}
|
})
|
|
},
|
methods: {
|
/**
|
* 添加面
|
* @param {*} position 经纬度数组
|
* @param {*} param 详细信息--返回的数据
|
*/
|
addPolygon (position, param) {
|
let obj = []
|
|
position.forEach(item => {
|
obj.push({ lng: Number(item[0]), lat: Number(item[1]) })
|
})
|
|
const that = this
|
|
let latlngs = []
|
let options = {
|
color: 'rgba(238, 166, 108, 1)', // res.color
|
weight: 2,
|
fillColor: 'rgb(238, 166, 108)', // res.color
|
fillOpacity: 0.5,
|
data: {
|
rangePoints: obj,
|
}
|
}
|
|
obj.forEach(item => {
|
latlngs.push([item.lat, item.lng])
|
})
|
|
let polygonLayer = that.$L.polygon(latlngs, options).addTo(that.map)
|
|
polygonLayer.params = param
|
|
polygonLayer.on('click', e => {
|
that.clickPosition = e.latlng
|
|
that.flagList = true
|
|
that.$parent.goTODetails({
|
pageSize: 20,
|
currentPage: 1,
|
total: 0,
|
}, e.target.params, 'children')
|
|
if (that.currentPolygonLayer != null) {
|
that.currentPolygonLayer.setStyle({
|
color: 'rgba(238, 166, 108, 1)', // res.color
|
weight: 2,
|
fillColor: 'rgb(238, 166, 108)', // res.color
|
fillOpacity: 0.5,
|
})
|
}
|
|
polygonLayer.setStyle({
|
color: 'rgb(255, 255, 255)',
|
weight: 4,
|
fillColor: 'rgb(238, 166, 108)',
|
fillOpacity: 0.5,
|
opacity: 1,
|
})
|
|
that.map.setView(that.$L.latLng(e.target.params.positionCenter[1], e.target.params.positionCenter[0]), 12)
|
|
that.currentPolygonLayer = polygonLayer
|
})
|
|
that.plotPolygonLayers.push(polygonLayer)
|
},
|
|
/**
|
* 显示详情
|
* @param {*} plotDetail 地块的详情
|
*/
|
showPlotDetails (plotDetail) {
|
this.plotPolygonLayers.forEach(item => {
|
if (item.params.id == plotDetail.id) {
|
item.setStyle({
|
color: 'rgb(255, 255, 255)',
|
weight: 4,
|
fillColor: 'rgb(238, 166, 108)',
|
fillOpacity: 0.5,
|
opacity: 1,
|
})
|
|
this.map.setView(this.$L.latLng(item.params.positionCenter[1], item.params.positionCenter[0]), 12)
|
|
this.currentPolygonLayer = item
|
}
|
})
|
},
|
|
/**
|
* 关闭详情
|
*/
|
closePlotDetails () {
|
if (this.currentPolygonLayer != null) {
|
this.currentPolygonLayer.setStyle({
|
color: 'rgba(238, 166, 108, 1)', // res.color
|
weight: 2,
|
fillColor: 'rgb(238, 166, 108)', // res.color
|
fillOpacity: 0.5,
|
})
|
|
this.map.setView(this.$L.latLng(this.lat, this.lng), 10)
|
}
|
},
|
|
|
/**
|
* 地图初始化
|
*/
|
initDate () {
|
this.map = this.$L.map("map", {
|
center: [this.lat, this.lng], // 地图中心
|
zoom: 15, //缩放比列
|
zoomControl: false, //禁用 + - 按钮
|
doubleClickZoom: false, // 禁用双击放大
|
attributionControl: false // 移除右下角leaflet标识
|
})
|
this.$L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
|
subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
|
}).addTo(this.map)
|
|
this.$L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0', {
|
subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
|
}).addTo(this.map)
|
},
|
|
/**
|
* 获取url信息
|
* @param {*} name url地址中的key
|
*/
|
getQueryString (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return unescape(r[2])
|
}
|
return null
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#map {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
z-index: 1;
|
}
|
</style>
|
