master
parent
2dec808df0
commit
c1be05aa9d
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="map-container">
|
||||||
|
<div id="map2">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-window" ref="safetyInfoWindow" v-show="isShowWindow">
|
||||||
|
<el-descriptions border :column="2">
|
||||||
|
<el-descriptions-item label="资产名称">
|
||||||
|
{{ row.zichanmingcheng }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="检查记录">
|
||||||
|
{{ row.jianchajilu }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="资产名称">
|
||||||
|
{{ (row.land_id_lands_id_relation && row.house_id_houses_id_relation) ? (row.land_id ? row.land_id_lands_id_relation.name : row.house_id_houses_id_relation.name) : "" }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="资产类型">
|
||||||
|
{{ row.zichanleixing }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShowWindow: false,
|
||||||
|
row: {},
|
||||||
|
markerList: [],
|
||||||
|
cluster: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
leases () {
|
||||||
|
return this.$store.state.bigdata.safety;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
pickRow({ row }) {
|
||||||
|
this.isShowWindow = true;
|
||||||
|
this.row = row;
|
||||||
|
let location = row.land_id_lands_id_relation ? row.land_id_lands_id_relation.zichanweizhi : row.house_id_houses_id_relation.zichanweizhi;
|
||||||
|
if (location) {
|
||||||
|
let lat, lng;
|
||||||
|
[lng, lat] = location.split(",");
|
||||||
|
this.map.panTo([lng, lat]);
|
||||||
|
this.map.setZoom(30);
|
||||||
|
this.infoWindow.open(this.map, [lng, lat]);
|
||||||
|
} else {
|
||||||
|
this.map.panTo(this.center);
|
||||||
|
this.infoWindow.open(this.map, this.center);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init(adcode = ["320200"]) {
|
||||||
|
|
||||||
|
this.map = new AMap.Map("map2", {
|
||||||
|
pitch: 50,
|
||||||
|
viewMode: "3D",
|
||||||
|
center: [120.283692, 31.614211],
|
||||||
|
rotation: -12, //初始地图顺时针旋转的角度
|
||||||
|
zoom: 20,
|
||||||
|
mapStyle: "amap://styles/blue"
|
||||||
|
});
|
||||||
|
this.infoWindow = new AMap.InfoWindow({
|
||||||
|
isCustom: true,
|
||||||
|
autoMove: true,
|
||||||
|
avoid: [20, 20, 20, 20],
|
||||||
|
content: this.$refs["safetyInfoWindow"],
|
||||||
|
closeWhenClickMap: true,
|
||||||
|
offset: new AMap.Pixel(-10, -10),
|
||||||
|
});
|
||||||
|
this.map.on('click',e => {
|
||||||
|
console.log(e)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setMapMarker() {
|
||||||
|
this.map.remove(this.markerList);
|
||||||
|
this.markerList = [];
|
||||||
|
|
||||||
|
this.leases.forEach((item) => {
|
||||||
|
let location = item.land_id_lands_id_relation ? item.land_id_lands_id_relation.zichanweizhi : item.house_id_houses_id_relation.zichanweizhi;
|
||||||
|
if (location) {
|
||||||
|
let lat, lng;
|
||||||
|
[lng, lat] = location.split(",");
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||||||
|
position: [Number(lng), Number(lat)],
|
||||||
|
offset: new AMap.Pixel(-13, -30),
|
||||||
|
});
|
||||||
|
let markerContent = document.createElement("div");
|
||||||
|
markerContent.setAttribute("class", "map-marker");
|
||||||
|
markerContent.onclick = () => {
|
||||||
|
this.pickRow({ row: item });
|
||||||
|
};
|
||||||
|
let markerImg = document.createElement("img");
|
||||||
|
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
|
||||||
|
let markerSpan = document.createElement("span");
|
||||||
|
markerSpan.setAttribute("class", "map-marker__text");
|
||||||
|
markerSpan.innerText =
|
||||||
|
item.zichanmingcheng?.length > 4
|
||||||
|
? item.zichanmingcheng.slice(0, 2) +
|
||||||
|
".." +
|
||||||
|
item.zichanmingcheng.slice(item.zichanmingcheng.length - 2)
|
||||||
|
: item.zichanmingcheng;
|
||||||
|
markerContent.appendChild(markerImg);
|
||||||
|
markerContent.appendChild(markerSpan);
|
||||||
|
marker.setContent(markerContent);
|
||||||
|
this.markerList.push(marker);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.add(this.markerList);
|
||||||
|
|
||||||
|
this.addCluster();
|
||||||
|
},
|
||||||
|
addCluster() {
|
||||||
|
if (this.cluster) {
|
||||||
|
this.cluster.setMap(null);
|
||||||
|
}
|
||||||
|
this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
|
||||||
|
gridSize: 50, // 设置网格像素大小
|
||||||
|
//renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
|
||||||
|
//renderMarker: this.renderMarker, // 自定义非聚合点样式
|
||||||
|
});
|
||||||
|
},
|
||||||
|
renderMarker(context) {
|
||||||
|
let content =
|
||||||
|
'<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
|
||||||
|
let offset = new AMap.Pixel(-9, -9);
|
||||||
|
context.marker.setContent(content);
|
||||||
|
context.marker.setOffset(offset);
|
||||||
|
},
|
||||||
|
renderClusterMarker(context) {
|
||||||
|
let factor = Math.pow(context.count / this.list.length, 1 / 18);
|
||||||
|
let div = document.createElement("div");
|
||||||
|
let Hue = 180 - factor * 180;
|
||||||
|
let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
|
||||||
|
let fontColor = "hsla(" + Hue + ",100%,90%,1)";
|
||||||
|
let borderColor = "hsla(" + Hue + ",100%,40%,1)";
|
||||||
|
let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
|
||||||
|
div.style.backgroundColor = bgColor;
|
||||||
|
let size = Math.round(
|
||||||
|
30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
|
||||||
|
);
|
||||||
|
div.style.width = div.style.height = size + "px";
|
||||||
|
div.style.border = "solid 1px " + borderColor;
|
||||||
|
div.style.borderRadius = size / 2 + "px";
|
||||||
|
div.style.boxShadow = "0 0 5px " + shadowColor;
|
||||||
|
div.innerHTML = context.count;
|
||||||
|
div.style.lineHeight = size + "px";
|
||||||
|
div.style.color = fontColor;
|
||||||
|
div.style.fontSize = "14px";
|
||||||
|
div.style.textAlign = "center";
|
||||||
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||||||
|
context.marker.setContent(div);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
leases () {
|
||||||
|
if (this.map) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setMapMarker();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map-container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#map2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.map-marker {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
background: #fff;
|
||||||
|
zoom: 0.75;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
filter: drop-shadow(2px 2px 5px #00000055);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue