|
|
|
|
@ -1,202 +1,222 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="bmap" id="container" ref="container"></div>
|
|
|
|
|
<el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="bmap" id="container" ref="container"></div>
|
|
|
|
|
<el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MapLine from "../../../public/zhenhaiLine.json"
|
|
|
|
|
import MapPoint from "../../../public/zhenhaiPoint.json"
|
|
|
|
|
import styleJson from "../../../public/custom_map_config.json"
|
|
|
|
|
import { topMap, topMapOne } from '@/api/offLineMap'
|
|
|
|
|
import MapLine from "../../../public/zhenhaiLine.json";
|
|
|
|
|
import MapPoint from "../../../public/zhenhaiPoint.json";
|
|
|
|
|
import styleJson from "../../../public/custom_map_config.json";
|
|
|
|
|
import { topMap, topMapOne } from "@/api/offLineMap";
|
|
|
|
|
export default {
|
|
|
|
|
name: 'zhenhaimap',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
dongtaiPoint: [121.604192, 29.971189],
|
|
|
|
|
isGoBack: false,
|
|
|
|
|
villageList: [],
|
|
|
|
|
villageSumList: [],
|
|
|
|
|
flag: true,
|
|
|
|
|
companyList: [],
|
|
|
|
|
label1: {}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
topMap({ scoreType: 'season' }).then(res => {
|
|
|
|
|
this.companyList = res.data
|
|
|
|
|
this.initMap()
|
|
|
|
|
})
|
|
|
|
|
name: "zhenhaimap",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
dongtaiPoint: [121.604192, 29.971189],
|
|
|
|
|
isGoBack: false,
|
|
|
|
|
villageList: [],
|
|
|
|
|
villageSumList: [],
|
|
|
|
|
flag: true,
|
|
|
|
|
companyList: [],
|
|
|
|
|
label1: {},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
topMap({ scoreType: "season" }).then((res) => {
|
|
|
|
|
this.companyList = res.data;
|
|
|
|
|
this.initMap();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
goBack() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
this.isGoBack = false;
|
|
|
|
|
this.$emit("goBack");
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
goBack() {
|
|
|
|
|
this.initMap()
|
|
|
|
|
this.isGoBack = false
|
|
|
|
|
this.$emit('goBack')
|
|
|
|
|
initMap() {
|
|
|
|
|
var BMap = window.BMap;
|
|
|
|
|
// console.log(BMap, 'BMap');
|
|
|
|
|
var map = new BMap.Map("container", {
|
|
|
|
|
style: {
|
|
|
|
|
styleJson,
|
|
|
|
|
},
|
|
|
|
|
initMap() {
|
|
|
|
|
var BMap = window.BMap
|
|
|
|
|
// console.log(BMap, 'BMap');
|
|
|
|
|
var map = new BMap.Map('container', {
|
|
|
|
|
style: {
|
|
|
|
|
styleJson
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
let that = this
|
|
|
|
|
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 12);
|
|
|
|
|
map.setMinZoom(12)
|
|
|
|
|
map.setMaxZoom(19)
|
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
// hjrequest({
|
|
|
|
|
// url: '/yc/dt/statistical/village',
|
|
|
|
|
// method: 'get',
|
|
|
|
|
// params: { areaCode: that.areaCode }
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
// that.villageSumList = res.data
|
|
|
|
|
// })
|
|
|
|
|
// console.log(MapLine, 'MapLine');
|
|
|
|
|
for (var i = 0, n = MapLine.features.length; i < n; i++) {
|
|
|
|
|
showBoundaryEx(MapLine.features[i]);
|
|
|
|
|
});
|
|
|
|
|
let that = this;
|
|
|
|
|
map.centerAndZoom(
|
|
|
|
|
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
|
|
|
|
|
12
|
|
|
|
|
);
|
|
|
|
|
map.setMinZoom(12);
|
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
// hjrequest({
|
|
|
|
|
// url: '/yc/dt/statistical/village',
|
|
|
|
|
// method: 'get',
|
|
|
|
|
// params: { areaCode: that.areaCode }
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
// that.villageSumList = res.data
|
|
|
|
|
// })
|
|
|
|
|
// console.log(MapLine, 'MapLine');
|
|
|
|
|
for (var i = 0, n = MapLine.features.length; i < n; i++) {
|
|
|
|
|
showBoundaryEx(MapLine.features[i]);
|
|
|
|
|
}
|
|
|
|
|
var label = new BMap.Label();
|
|
|
|
|
showPoint();
|
|
|
|
|
function showBoundaryEx(city) {
|
|
|
|
|
var paths = [];
|
|
|
|
|
var list = city.geometry.coordinates;
|
|
|
|
|
// console.log(list.length, 'list[0].length')
|
|
|
|
|
//console.log(list[1], 'list[1].length')
|
|
|
|
|
var polygon = {};
|
|
|
|
|
if (list.length > 1) {
|
|
|
|
|
for (let a = 0; a < list.length; a++) {
|
|
|
|
|
paths = [];
|
|
|
|
|
for (let i = 0; i < list[a][0].length; i++) {
|
|
|
|
|
let lat = list[a][0][i][1],
|
|
|
|
|
lng = list[a][0][i][0];
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
}
|
|
|
|
|
var label = new BMap.Label();
|
|
|
|
|
showPoint()
|
|
|
|
|
function showBoundaryEx(city) {
|
|
|
|
|
var paths = []
|
|
|
|
|
var list = city.geometry.coordinates
|
|
|
|
|
// console.log(list.length, 'list[0].length')
|
|
|
|
|
//console.log(list[1], 'list[1].length')
|
|
|
|
|
var polygon = {}
|
|
|
|
|
if (list.length > 1) {
|
|
|
|
|
for (let a = 0; a < list.length; a++) {
|
|
|
|
|
paths = []
|
|
|
|
|
for (let i = 0; i < list[a][0].length; i++) {
|
|
|
|
|
let lat = list[a][0][i][1],
|
|
|
|
|
lng = list[a][0][i][0];
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
}
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
fillColor: '#3b4c44',
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
// // console.log(list, 'length');
|
|
|
|
|
} else {
|
|
|
|
|
// console.log(list[0], ' list[0]');
|
|
|
|
|
for (let i = 0; i < list[0].length; i++) {
|
|
|
|
|
let lat = list[0][i][1],
|
|
|
|
|
lng = list[0][i][0];
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
}
|
|
|
|
|
// console.log(list, 'length');
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
fillColor: '#3b4c44',
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
polygon.infowindow = new BMap.InfoWindow();
|
|
|
|
|
polygon.infowindow.name = city.properties.name;
|
|
|
|
|
polygon.addEventListener("mouseover", function () {
|
|
|
|
|
polygon.setFillColor("#ffa500");
|
|
|
|
|
});
|
|
|
|
|
polygon.addEventListener("mouseout", function () {
|
|
|
|
|
map.removeOverlay(label);
|
|
|
|
|
polygon.setFillColor('#3b4c44');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
|
|
|
|
|
polygon.addEventListener("click", function () {
|
|
|
|
|
console.log(city.properties.name, 'city.properties.name');
|
|
|
|
|
if (city.properties.name == '骆驼街道') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '招宝山街道') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '蛟川街道') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '庄市街道') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '贵驷街道') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '澥浦镇') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
} else if (city.properties.name == '九龙湖镇') {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
|
|
|
|
|
that.isGoBack = true
|
|
|
|
|
}
|
|
|
|
|
// let streetCode = that.streetCodeList.filter((item) => {
|
|
|
|
|
// if (item.areaName == city.properties.name) {
|
|
|
|
|
// return item.areaCode
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
|
|
|
|
|
// that.$emit('goStreet', streetCode[0].areaCode)
|
|
|
|
|
// hjrequest({
|
|
|
|
|
// url: '/yc/dt/statistical/villages',
|
|
|
|
|
// method: 'get',
|
|
|
|
|
// params: goStreetData
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
// that.villageList = res.data
|
|
|
|
|
// that.villageList.forEach((item) => {
|
|
|
|
|
// var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
// var marker = new BMap.Marker(point); // 创建标注
|
|
|
|
|
// map.addOverlay(marker);
|
|
|
|
|
// var content = item.villageName;
|
|
|
|
|
// var label = new BMap.Label(content, { // 创建文本标注
|
|
|
|
|
// position: point, // 设置标注的地理位置
|
|
|
|
|
// offset: new BMap.Size(-10, -50) // 设置标注的偏移量
|
|
|
|
|
// })
|
|
|
|
|
// label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
|
|
|
|
|
// map.addOverlay(label);
|
|
|
|
|
// marker.addEventListener("click", function () {
|
|
|
|
|
// // Cookies.set('village_current', item.villageCode)
|
|
|
|
|
// window.open(window.location.origin + '/#/communityShow', '_blank');
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
fillColor: "#3b4c44",
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1,
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
// // console.log(list, 'length');
|
|
|
|
|
} else {
|
|
|
|
|
// console.log(list[0], ' list[0]');
|
|
|
|
|
for (let i = 0; i < list[0].length; i++) {
|
|
|
|
|
let lat = list[0][i][1],
|
|
|
|
|
lng = list[0][i][0];
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
}
|
|
|
|
|
// console.log(list, 'length');
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
fillColor: "#3b4c44",
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1,
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
polygon.infowindow = new BMap.InfoWindow();
|
|
|
|
|
polygon.infowindow.name = city.properties.name;
|
|
|
|
|
polygon.addEventListener("mouseover", function () {
|
|
|
|
|
polygon.setFillColor("#ffa500");
|
|
|
|
|
});
|
|
|
|
|
polygon.addEventListener("mouseout", function () {
|
|
|
|
|
map.removeOverlay(label);
|
|
|
|
|
polygon.setFillColor("#3b4c44");
|
|
|
|
|
});
|
|
|
|
|
//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
|
|
|
|
|
polygon.addEventListener("click", function () {
|
|
|
|
|
console.log(city.properties.name, "city.properties.name");
|
|
|
|
|
if (city.properties.name == "骆驼街道") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "招宝山街道") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "蛟川街道") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "庄市街道") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "贵驷街道") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "澥浦镇") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
} else if (city.properties.name == "九龙湖镇") {
|
|
|
|
|
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
|
|
|
|
|
that.isGoBack = true;
|
|
|
|
|
}
|
|
|
|
|
// let streetCode = that.streetCodeList.filter((item) => {
|
|
|
|
|
// if (item.areaName == city.properties.name) {
|
|
|
|
|
// return item.areaCode
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
|
|
|
|
|
// that.$emit('goStreet', streetCode[0].areaCode)
|
|
|
|
|
// hjrequest({
|
|
|
|
|
// url: '/yc/dt/statistical/villages',
|
|
|
|
|
// method: 'get',
|
|
|
|
|
// params: goStreetData
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
// that.villageList = res.data
|
|
|
|
|
// that.villageList.forEach((item) => {
|
|
|
|
|
// var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
// var marker = new BMap.Marker(point); // 创建标注
|
|
|
|
|
// map.addOverlay(marker);
|
|
|
|
|
// var content = item.villageName;
|
|
|
|
|
// var label = new BMap.Label(content, { // 创建文本标注
|
|
|
|
|
// position: point, // 设置标注的地理位置
|
|
|
|
|
// offset: new BMap.Size(-10, -50) // 设置标注的偏移量
|
|
|
|
|
// })
|
|
|
|
|
// label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
|
|
|
|
|
// map.addOverlay(label);
|
|
|
|
|
// marker.addEventListener("click", function () {
|
|
|
|
|
// // Cookies.set('village_current', item.villageCode)
|
|
|
|
|
// window.open(window.location.origin + '/#/communityShow', '_blank');
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
that.companyList.forEach((item) => {
|
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
console.log(point, 'point123');
|
|
|
|
|
var marker = new BMap.Marker(point); // 创建标注
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
var content = item.companyName;
|
|
|
|
|
var label = new BMap.Label(content, { // 创建文本标注
|
|
|
|
|
position: point, // 设置标注的地理位置
|
|
|
|
|
offset: new BMap.Size(-10, -50) // 设置标注的偏移量
|
|
|
|
|
})
|
|
|
|
|
label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
|
|
|
|
|
map.addOverlay(label);
|
|
|
|
|
label.addEventListener("click", function () {
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
topMapOne({ companyId: item.companyId, companyName: item.companyName }).then(res => {
|
|
|
|
|
that.label1 = new BMap.Label();
|
|
|
|
|
that.label1.setStyle({
|
|
|
|
|
color: 'blue',
|
|
|
|
|
borderRadius: '5px',
|
|
|
|
|
borderColor: '#ccc',
|
|
|
|
|
padding: '10px',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
fontFamily: '微软雅黑',
|
|
|
|
|
transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
|
|
|
|
|
});
|
|
|
|
|
that.companyList.forEach((item) => {
|
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
console.log(point, "point123");
|
|
|
|
|
var marker = new BMap.Marker(point); // 创建标注
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
var content = item.companyName;
|
|
|
|
|
var label = new BMap.Label(content, {
|
|
|
|
|
// 创建文本标注
|
|
|
|
|
position: point, // 设置标注的地理位置
|
|
|
|
|
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
|
|
|
|
|
});
|
|
|
|
|
label.setStyle({
|
|
|
|
|
backgroundColor: " rgba(0, 0, 0, 0)",
|
|
|
|
|
border: "0",
|
|
|
|
|
color: "#409EFF",
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
});
|
|
|
|
|
map.addOverlay(label);
|
|
|
|
|
label.addEventListener("click", function () {
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
topMapOne({
|
|
|
|
|
companyId: item.companyId,
|
|
|
|
|
companyName: item.companyName,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
that.label1 = new BMap.Label();
|
|
|
|
|
that.label1.setStyle({
|
|
|
|
|
color: "blue",
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
borderColor: "#ccc",
|
|
|
|
|
padding: "10px",
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
that.label1.setPosition(new BMap.Point(item.longitude, item.latitude));
|
|
|
|
|
that.label1.setOffset(new BMap.Size(130, -10))
|
|
|
|
|
that.label1.setStyle({ width: '372px', height: '242px', background: 'url(pbImg/bz49.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', padding: '13px 20px' })
|
|
|
|
|
that.label1.setContent(`
|
|
|
|
|
that.label1.setPosition(
|
|
|
|
|
new BMap.Point(item.longitude, item.latitude)
|
|
|
|
|
);
|
|
|
|
|
that.label1.setOffset(new BMap.Size(130, -10));
|
|
|
|
|
that.label1.setStyle({
|
|
|
|
|
width: "372px",
|
|
|
|
|
height: "242px",
|
|
|
|
|
background: "url(pbImg/bz49.png) no-repeat",
|
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
|
border: "0",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
padding: "13px 20px",
|
|
|
|
|
});
|
|
|
|
|
that.label1.setContent(`
|
|
|
|
|
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png) no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div><div class='closeBtn1' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;position:relative;z-index:200000000;
|
|
|
|
|
margin-top:-15px;"'></div></div>
|
|
|
|
|
<div style='height:70px;width:100%;margin-top:15px;background: url(pbImg/编组.png);display:flex;justify-content: space-around;align-items: center;'>
|
|
|
|
|
@ -244,78 +264,75 @@ export default {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`);
|
|
|
|
|
map.addOverlay(that.label1);
|
|
|
|
|
let closebtn = document.querySelector('.closeBtn')
|
|
|
|
|
let closeBtn1 = document.querySelector('.closeBtn1')
|
|
|
|
|
closeBtn1.addEventListener('click', () => {
|
|
|
|
|
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
})
|
|
|
|
|
//console.log(btn, 'btn');
|
|
|
|
|
closebtn.addEventListener('click', () => {
|
|
|
|
|
that.$emit('toArchives', item)
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
polygon.removeEventListener('mousemove')
|
|
|
|
|
map.addOverlay(that.label1);
|
|
|
|
|
let closebtn = document.querySelector(".closeBtn");
|
|
|
|
|
let closeBtn1 = document.querySelector(".closeBtn1");
|
|
|
|
|
closeBtn1.addEventListener("click", () => {
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function showPoint() {
|
|
|
|
|
console.log(MapPoint, 'MapPoint');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < MapPoint.features.length; i++) {
|
|
|
|
|
var opts = {
|
|
|
|
|
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
|
|
|
|
|
offset: new BMap.Size(-30, -30) // 设置文本偏移量
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 创建文本标注对象
|
|
|
|
|
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
|
|
|
|
|
// 自定义文本标注样式
|
|
|
|
|
label1.setStyle({
|
|
|
|
|
color: 'orange',
|
|
|
|
|
borderRadius: '5px',
|
|
|
|
|
borderColor: '#ccc',
|
|
|
|
|
padding: '10px',
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
height: '20px',
|
|
|
|
|
lineHeight: '20px',
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
|
|
border: '0',
|
|
|
|
|
fontFamily: '微软雅黑'
|
|
|
|
|
});
|
|
|
|
|
map.addOverlay(label1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//console.log(btn, 'btn');
|
|
|
|
|
closebtn.addEventListener("click", () => {
|
|
|
|
|
that.$emit("toArchives", item);
|
|
|
|
|
map.removeOverlay(that.label1);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
polygon.removeEventListener("mousemove");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function showPoint() {
|
|
|
|
|
console.log(MapPoint, "MapPoint");
|
|
|
|
|
for (let i = 0; i < MapPoint.features.length; i++) {
|
|
|
|
|
var opts = {
|
|
|
|
|
position: new BMap.Point(
|
|
|
|
|
MapPoint.features[i].geometry.coordinates[0],
|
|
|
|
|
MapPoint.features[i].geometry.coordinates[1]
|
|
|
|
|
), // 指定文本标注所在的地理位置
|
|
|
|
|
offset: new BMap.Size(-30, -30), // 设置文本偏移量
|
|
|
|
|
};
|
|
|
|
|
// 创建文本标注对象
|
|
|
|
|
var label1 = new BMap.Label(
|
|
|
|
|
MapPoint.features[i].properties.name,
|
|
|
|
|
opts
|
|
|
|
|
);
|
|
|
|
|
// 自定义文本标注样式
|
|
|
|
|
label1.setStyle({
|
|
|
|
|
color: "orange",
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
borderColor: "#ccc",
|
|
|
|
|
padding: "10px",
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
height: "20px",
|
|
|
|
|
lineHeight: "20px",
|
|
|
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
|
|
|
border: "0",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
});
|
|
|
|
|
map.addOverlay(label1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.bmap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: 1px solid #000000;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: 1px solid #000000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fanhui {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 49%;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
z-index: 50;
|
|
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 49%;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
z-index: 50;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
