<template>
|
<div
|
style="width: 100%; height: 100vh; position: relative"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-text="正在加载地图"
|
element-loading-spinner="el-icon-loading"
|
id="downMap"
|
>
|
<div id="allmap" ref="allmap" style="width: 100%; height: 100%"></div>
|
<div v-draw class="drawTip" v-if="colorTips">
|
<!-- <div style="display: flex; "> -->
|
<i
|
class="el-icon-close drawTipIcon"
|
style="font-size: 10px"
|
@click="closeTip"
|
></i>
|
|
<div
|
style="
|
width: 40px;
|
margin-top: 20px;
|
padding-bottom: 20px;
|
margin-left: 10px;
|
"
|
>
|
<div
|
v-for="(item, index) in colors"
|
:key="index"
|
:style="{
|
height: '20px',
|
width: '40px',
|
backgroundColor: item.color,
|
}"
|
>
|
<p
|
v-if="index == 0"
|
style="line-height: 20px; font-size:10px; font-weight: 600"
|
>
|
0分
|
</p>
|
<p
|
v-if="index + 1 == colors.length"
|
style="line-height: 20px; font-size: 10px; font-weight: 600"
|
>
|
5分
|
</p>
|
</div>
|
</div>
|
<!-- </div> -->
|
</div>
|
</div>
|
</template>
|
<script>
|
import { MP } from "@/utils/map.js";
|
import styleJson from "@/utils/common_map.json";
|
|
import district_boundary from "@/utils/district_boundary";
|
import district_extent from "@/utils/district_extent";
|
import kriging_default_params from "@/utils/kriging_default_params";
|
import html2canvas from "html2canvas";
|
|
var kriging = require("@/utils/kriging.js");
|
|
export default {
|
data() {
|
return {
|
colors: [],
|
colorTips: false,
|
PreviousPoint: null,
|
launchPoint: null,
|
nowType: 0,
|
imgOverlay: null,
|
loading: true,
|
icon: [
|
require("@/assets/1.png"),
|
require("@/assets/2.png"),
|
require("@/assets/3.png"),
|
require("@/assets/4.png"),
|
require("@/assets/5.png"),
|
require("@/assets/wx.png"),
|
require("@/assets/bad.png"),
|
require("@/assets/fashedianDark.png"),
|
require("@/assets/fashedianLight.jpg"),
|
],
|
allPointData: null,
|
allMaker: [],
|
map: null,
|
ak: "003EurM0nat1YfowgMZPIBpDtGjbGOri",
|
areaList: [
|
"黄浦区",
|
"徐汇区",
|
"长宁区",
|
"静安区",
|
"普陀区",
|
"虹口区",
|
"杨浦区",
|
"闵行区",
|
"宝山区",
|
"嘉定区",
|
"浦东新区",
|
"金山区",
|
"松江区",
|
"青浦区",
|
"奉贤区",
|
"崇明区",
|
],
|
};
|
},
|
watch: {
|
nowType: {
|
handler(n, o) {
|
this.$emit("changeNowType", this.nowType);
|
},
|
},
|
changeAssessValue: {
|
handler(n, o) {
|
if (this.changeAssessValue) {
|
console.log("!!!");
|
let Overlay = this.map.getOverlays();
|
for (let i = 0; i < Overlay.length; i++) {
|
if (Overlay[i].toString() == "[object Marker]") {
|
if (this.changeAssessValue.id == Overlay[i].customData.id) {
|
let iconName = "";
|
|
if (this.changeAssessValue.assessvalue == 1) {
|
iconName = this.icon[0];
|
} else if (this.changeAssessValue.assessvalue == 2) {
|
iconName = this.icon[1];
|
} else if (this.changeAssessValue.assessvalue == 3) {
|
iconName = this.icon[2];
|
} else if (this.changeAssessValue.assessvalue == 4) {
|
iconName = this.icon[3];
|
} else if (this.changeAssessValue.assessvalue == 5) {
|
iconName = this.icon[4];
|
} else {
|
iconName = this.icon[5];
|
}
|
|
let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
|
var marker = new BMap.Marker(Overlay[i].point, { icon: icon });
|
this.map.removeOverlay(Overlay[i]);
|
this.map.addOverlay(marker);
|
|
//判断上个个坐标是否记录，用于第一次点击
|
if (this.PreviousPoint != null) {
|
//如果上一个坐标不为空，移除跳动动作，null为移除
|
this.PreviousPoint.setAnimation(null);
|
}
|
//记录当前点击的坐标
|
this.PreviousPoint = marker;
|
//当前左边开始跳动
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
}
|
}
|
}
|
}
|
},
|
deep: true,
|
},
|
frequencyValue: {
|
handler(n, o) {
|
if (this.nowType == 0) {
|
if (this.allPointData) {
|
this.dropCanvas();
|
this.getInfo();
|
}
|
} else {
|
this.dropCanvas();
|
this.getInfo();
|
this.addCanvas();
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
jumpPointId: {
|
handler(n, o) {
|
let Overlay = this.map.getOverlays();
|
for (let i = 0; i < Overlay.length; i++) {
|
if (Overlay[i].toString() == "[object Marker]") {
|
if (this.jumpPointId == Overlay[i].customData.id) {
|
//判断上个个坐标是否记录，用于第一次点击
|
if (this.PreviousPoint != null) {
|
//如果上一个坐标不为空，移除跳动动作，null为移除
|
this.PreviousPoint.setAnimation(null);
|
}
|
//记录当前点击的坐标
|
this.PreviousPoint = Overlay[i];
|
//当前左边开始跳动
|
Overlay[i].setAnimation(BMAP_ANIMATION_BOUNCE);
|
} else {
|
}
|
}
|
}
|
},
|
},
|
isChage: {
|
handler(n, o) {
|
if (this.nowType == 0) {
|
if (this.allPointData) {
|
this.dropCanvas();
|
|
this.getInfo();
|
}
|
} else {
|
this.dropCanvas();
|
this.getInfo();
|
|
this.addCanvas();
|
}
|
},
|
},
|
timeValue: {
|
handler(n, o) {
|
console.log(this.timeValue);
|
if (this.nowType == 0) {
|
// if (this.allPointData) {
|
this.dropCanvas();
|
this.getInfo();
|
// }
|
} else {
|
this.dropCanvas();
|
this.getInfo();
|
this.addCanvas();
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
switchValue: {
|
handler(n, o) {
|
if (this.nowType == 0) {
|
if (this.allPointData) {
|
this.dropCanvas();
|
this.getInfo();
|
}
|
} else {
|
this.dropCanvas();
|
this.getInfo();
|
this.addCanvas();
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
props: {
|
changeAssessValue: {
|
type: Object,
|
default: {},
|
},
|
frequencyValue: {
|
type: Number,
|
default: 1557,
|
},
|
timeValue: {
|
type: String,
|
default: "",
|
},
|
switchValue: {
|
type: Number,
|
default: 1,
|
},
|
isChage: {
|
type: Boolean,
|
},
|
jumpPointId: {
|
type: Number,
|
},
|
},
|
mounted() {
|
this.oldMapInit();
|
},
|
methods: {
|
closeTip() {
|
this.colorTips = false;
|
},
|
getColors() {
|
let userid = JSON.parse(localStorage.getItem("user")).name;
|
let param = {
|
bid: "getCoverColors",
|
userid: userid,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
console.log();
|
let getColor = JSON.parse(res.data.data[0][0].colors);
|
this.colors = [];
|
// kriging_default_params.colors = getColor;
|
getColor.forEach((item) => {
|
let one = { color: item };
|
this.colors.push(one);
|
this.colorTips = true;
|
});
|
console.log(this.colors);
|
});
|
},
|
tryDown() {
|
html2canvas(document.getElementById("downMap"), {
|
backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
|
useCORS: true, //支持图片跨域
|
scale: 1, //设置放大的倍数
|
}).then((canvas) => {
|
//截图用img元素承装，显示在页面的上
|
let img = new Image();
|
img.src = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64
|
//如果你需要下载截图，可以使用a标签进行下载
|
let a = document.createElement("a");
|
a.href = canvas.toDataURL("image/jpeg");
|
a.download = "test";
|
a.click();
|
});
|
},
|
dropCanvas() {
|
this.nowType = 0;
|
this.map.removeOverlay(this.imgOverlay);
|
this.colors = [];
|
this.colorTips = false;
|
},
|
addCanvas() {
|
console.log("a");
|
this.loading = true;
|
this.nowType = 1;
|
let param = new URLSearchParams();
|
if (this.switchValue == 1) {
|
param.append("bid", "getAssessValue");
|
}
|
if (this.switchValue == 0) {
|
param.append("bid", "getAssessValue_auto");
|
}
|
param.append("frequencystr", this.frequencyValue);
|
param.append("wdate", this.timeValue.split(" ")[0]);
|
param.append("whour", this.timeValue.split(" ")[1].split(":")[0]);
|
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
let allData = JSON.parse(JSON.stringify(res.data.data[0]));
|
let lngs = [];
|
let lats = [];
|
let values = [];
|
if (allData.length == 0) {
|
// this.map.removeOverlay(this.imgOverlay);ß
|
this.$message.warning("暂无数据加载");
|
this.loading = false;
|
} else {
|
allData.forEach((item) => {
|
lngs.push(Number(item.regionLong));
|
lats.push(Number(item.regionLat));
|
values.push(Number(item.paramvalue));
|
});
|
let vvv0 = [
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
0, 0, 0, 0,
|
];
|
let vvv1 = [
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
1, 1, 1, 1,
|
];
|
let vvv2 = [
|
0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
|
2, 2, 2, 2,
|
];
|
let vvv3 = [
|
0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
|
3, 3, 3, 3,
|
];
|
let vvv4 = [
|
0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
|
4, 4, 4, 4,
|
];
|
let vvv5 = [
|
5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
|
5, 5, 5, 5,
|
];
|
|
let vvv = [
|
2, 2, 1, 2, 2, 2, 4, 1, 3, 2, 1, 2, 1, 1, 3, 1, 1, 1, 2, 5, 3, 1,
|
3, 1, 1, 2, 4,
|
];
|
// let vvv5 = [0,1,4,5,5,3,1,3,4,7,8,9,0,3,1,3,4]
|
// let vvv6 = [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6]
|
console.log(values);
|
this.addGridCanvasOverlay(
|
values,
|
lngs,
|
lats,
|
district_boundary,
|
district_extent,
|
400
|
);
|
console.log("c");
|
}
|
} else {
|
console.log("b");
|
this.loading = false;
|
}
|
});
|
},
|
addGridCanvasOverlay(
|
values,
|
lngs,
|
lats,
|
area_boundary,
|
area_extent,
|
count
|
) {
|
console.log("d");
|
let letiogram = kriging.train(
|
values,
|
lngs,
|
lats,
|
kriging_default_params.krigingModel,
|
kriging_default_params.krigingSigma2,
|
kriging_default_params.krigingAlpha
|
);
|
|
let grid = kriging.grid(
|
area_boundary,
|
letiogram,
|
(area_extent[2] - area_extent[0]) / count
|
);
|
|
var tmpCanvas = document.createElement("canvas");
|
tmpCanvas.width = 500;
|
tmpCanvas.height = 500;
|
kriging.plot(
|
tmpCanvas,
|
grid,
|
[area_extent[0], area_extent[2]],
|
[area_extent[1], area_extent[3]],
|
kriging_default_params.colors
|
);
|
|
var pStart = new BMap.Point(area_extent[0], area_extent[1]);
|
var pEnd = new BMap.Point(area_extent[2], area_extent[3]);
|
|
var delta_up = 1.2;
|
var bounds = new BMap.Bounds(
|
new BMap.Point(pStart.lng, Number(pEnd.lat) + delta_up),
|
new BMap.Point(pEnd.lng, Number(pStart.lat) + delta_up)
|
);
|
|
// if (this.imgOverlay) {
|
// this.map.removeOverlay(this.imgOverlay);
|
// }
|
|
this.imgOverlay = null;
|
|
this.imgOverlay = new BMap.GroundOverlay(bounds, {
|
imageURL: tmpCanvas.toDataURL(), //tmpCanvas.toDataURL("image/png"),
|
opacity: 0.75,
|
});
|
|
this.map.addOverlay(this.imgOverlay);
|
console.log("f");
|
|
this.loading = false;
|
this.getColors();
|
// setTimeout(() => {
|
// this.colorTips = true;
|
// }, 1000);
|
},
|
oldMapInit() {
|
this.$nextTick(() => {
|
const _this = this;
|
MP(_this.ak).then((BMap) => {
|
_this.mapInit();
|
});
|
});
|
},
|
|
changeMapInit() {
|
if (this.nowType == 0) {
|
this.addCanvas();
|
} else {
|
this.dropCanvas();
|
}
|
},
|
changeColor() {
|
this.dropCanvas();
|
this.addCanvas();
|
},
|
getInfo() {
|
console.log("qqq")
|
|
this.loading = true;
|
console.log(localStorage.getItem("user"))
|
let userid = JSON.parse(localStorage.getItem("user")).name;
|
console.log(userid)
|
|
let param = new URLSearchParams();
|
if (this.switchValue == 1) {
|
param.append("bid", "getPointData");
|
}
|
if (this.switchValue == 0) {
|
param.append("bid", "getPointData_auto");
|
}
|
|
// console.log(this.frequencyValue);
|
console.log(this.timeValue);
|
// console.log(this.timeValue);
|
// console.log(this.timeValue);
|
// console.log(this.timeValue);
|
// console.log(this.timeValue.split(" ")[0]);
|
// console.log(userid);
|
console.log(
|
this.add0(Number(this.timeValue.split(" ")[1].split(":")[0]))
|
);
|
|
param.append("frequency", this.frequencyValue);
|
param.append("wdate", this.timeValue.split(" ")[0]);
|
param.append(
|
"whour",
|
this.add0(Number(this.timeValue.split(" ")[1].split(":")[0]))
|
);
|
param.append("userid", userid);
|
|
console.log(param);
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
console.log(res);
|
this.allPointData = JSON.parse(JSON.stringify(res.data.data[0]));
|
|
this.allPointData.forEach((item) => {
|
if (this.switchValue == 1) {
|
item.pressvalue = item.assessvalue;
|
}
|
if (this.switchValue == 0) {
|
item.pressvalue = item.autopressvalue;
|
}
|
});
|
console.log(this.allPointData);
|
let param1 = new URLSearchParams();
|
param1.append("bid", "getLauncher");
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param1
|
).then((res1) => {
|
console.log(res1);
|
this.launchPoint = JSON.parse(JSON.stringify(res1.data.data));
|
this.getMarker();
|
});
|
});
|
},
|
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
|
/**
|
* 初始化地图
|
*/
|
mapInit() {
|
console.log("222")
|
this.loading = true;
|
this.map = new BMap.Map("allmap");
|
let point = new BMap.Point(121.479965, 31.234941);
|
this.map.centerAndZoom(point, 11);
|
this.map.enableScrollWheelZoom(true);
|
//个性化地图
|
this.map.setMapStyleV2({ styleJson: styleJson });
|
|
let that = this;
|
|
//行政区划
|
for (let k in this.areaList) {
|
let bdary = new BMap.Boundary();
|
bdary.get("上海市" + this.areaList[k], function (rs) {
|
var count = rs.boundaries.length;
|
if (count === 0) {
|
return;
|
}
|
var pointArray = [];
|
for (var i = 0; i < count; i++) {
|
var ply = new BMap.Polygon(rs.boundaries[i], {
|
strokeWeight: 2,
|
strokeColor: "#409EFF",
|
fillColor: "rgba(255,255,255,0)",
|
}); //建立多边形覆盖物
|
that.map.addOverlay(ply);
|
ply.disableMassClear(); //禁止删除
|
pointArray = pointArray.concat(ply.getPath());
|
}
|
});
|
}
|
this.dropCanvas();
|
this.getInfo();
|
},
|
|
getMarker() {
|
console.log("1");
|
// this.map.clearOverlays();
|
|
let pointArray = new Array();
|
this.allMaker = [];
|
console.log(this.allPointData);
|
for (let i in this.allPointData) {
|
if (
|
this.isFloat(this.allPointData[i].regionLong) &&
|
this.isFloat(this.allPointData[i].regionLat)
|
) {
|
let iconName = "";
|
if (this.allPointData[i].status == 1) {
|
if (this.allPointData[i].pressvalue == 1) {
|
iconName = this.icon[0];
|
} else if (this.allPointData[i].pressvalue == 2) {
|
iconName = this.icon[1];
|
} else if (this.allPointData[i].pressvalue == 3) {
|
iconName = this.icon[2];
|
} else if (this.allPointData[i].pressvalue == 4) {
|
iconName = this.icon[3];
|
} else if (this.allPointData[i].pressvalue == 5) {
|
iconName = this.icon[4];
|
} else {
|
iconName = this.icon[5];
|
}
|
} else {
|
iconName = this.icon[6];
|
}
|
let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
|
let point = new BMap.Point(
|
this.allPointData[i].regionLong,
|
this.allPointData[i].regionLat
|
);
|
pointArray.push(point);
|
let marker = new BMap.Marker(point, { icon: icon });
|
|
marker.customData = { id: this.allPointData[i].monitorpointId };
|
|
let lableStr = this.allPointData[i].rssi
|
? "+" + this.allPointData[i].rssi
|
: "--";
|
|
let label = new BMap.Label(lableStr, {
|
offset: new BMap.Size(10, -25),
|
});
|
label.setStyle({
|
border: "none",
|
background: "none",
|
color: "red",
|
padding: "3px 5px",
|
fontSize: "14px",
|
});
|
marker.setLabel(label);
|
|
this.allMaker.push({
|
id: this.allPointData[i].monitorpointId,
|
marker: marker,
|
});
|
this.map.addOverlay(marker);
|
this.addActionHandler(this.allPointData[i], marker);
|
console.log("2");
|
}
|
}
|
for (let i in this.launchPoint) {
|
if (
|
this.isFloat(this.launchPoint[i].regionLong) &&
|
this.isFloat(this.launchPoint[i].regionLat)
|
) {
|
let iconName = "";
|
if (this.launchPoint[i].status == 1) {
|
iconName = this.icon[8];
|
} else {
|
iconName = this.icon[7];
|
}
|
let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
|
let point = new BMap.Point(
|
this.launchPoint[i].regionLong,
|
this.launchPoint[i].regionLat
|
);
|
pointArray.push(point);
|
let marker = new BMap.Marker(point, { icon: icon });
|
|
this.allMaker.push({
|
id: this.allPointData[i].monitorpointId,
|
marker: marker,
|
});
|
this.map.addOverlay(marker);
|
console.log("3");
|
}
|
}
|
|
console.log("4");
|
this.map.setViewport(pointArray, {
|
margins: [10, 10, 10, 10],
|
zoomFactor: 0,
|
}); //调整视野范围
|
console.log("5");
|
this.loading = false;
|
},
|
|
addActionHandler(content, marker) {
|
let that = this;
|
marker.addEventListener("click", function (e) {
|
that.$emit("showInfo", content);
|
});
|
},
|
|
isFloat(string) {
|
return /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(
|
string
|
);
|
},
|
|
//改变状态
|
changePointState(data) {
|
let Overlay = this.map.getOverlays();
|
for (let i = 0; i < Overlay.length; i++) {
|
if (Overlay[i].toString() == "[object Marker]") {
|
// console.log(Overlay[i].customData)
|
|
data.forEach((item) => {
|
if (Overlay[i].customData) {
|
if (item.monitorpointId == Overlay[i].customData.id) {
|
// console.log(item);
|
// console.log(Overlay[i].customData.id);
|
// console.log(this.allPointData);
|
let iconName = "";
|
|
if (item.status == 0) {
|
iconName = this.icon[6];
|
}
|
if (item.status == 1) {
|
this.allPointData.forEach((i) => {
|
if (i.monitorpointId == item.monitorpointId) {
|
if (i.assessvalue == 1) {
|
iconName = this.icon[0];
|
} else if (i.assessvalue == 2) {
|
iconName = this.icon[1];
|
} else if (i.assessvalue == 3) {
|
iconName = this.icon[2];
|
} else if (i.assessvalue == 4) {
|
iconName = this.icon[3];
|
} else if (i.assessvalue == 5) {
|
iconName = this.icon[4];
|
} else {
|
iconName = this.icon[5];
|
}
|
}
|
});
|
}
|
console.log(iconName);
|
|
let icon = new BMap.Icon(iconName, new BMap.Size(50, 50));
|
var marker = new BMap.Marker(Overlay[i].point, { icon: icon });
|
this.map.removeOverlay(Overlay[i]);
|
this.map.addOverlay(marker);
|
|
// //判断上个个坐标是否记录，用于第一次点击
|
// if (this.PreviousPoint != null) {
|
// //如果上一个坐标不为空，移除跳动动作，null为移除
|
// this.PreviousPoint.setAnimation(null);
|
// }
|
// //记录当前点击的坐标
|
// this.PreviousPoint = marker;
|
// //当前左边开始跳动
|
// marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
}
|
}
|
});
|
}
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
/deep/ .BMap_Marker .BMap_noprint {
|
z-index: 9999 !important;
|
}
|
|
.drawTip {
|
z-index: 9000 !important;
|
// overflow: scroll !important;
|
position: fixed !important;
|
top: 150px;
|
// height: 300px !important;
|
width: 60px !important;
|
background-color: white !important;
|
border-radius: 5px;
|
left: 73%;
|
// scrollbar-width: none; /* firefox */
|
// -ms-overflow-style: none; /* IE 10+ */
|
// overflow-x: hidden;
|
// overflow-y: auto;
|
|
.drawTipIcon {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
}
|
}
|
|
// .drawTip::-webkit-scrollbar {
|
// display: none; /* Chrome Safari */
|
// }
|
</style>
|
