|
@@ -28,11 +28,15 @@ export default defineComponent({
|
|
components: {
|
|
components: {
|
|
VanSearch: Search,
|
|
VanSearch: Search,
|
|
},
|
|
},
|
|
- setup(props) {
|
|
|
|
|
|
+ setup(props, contx) {
|
|
let ctx: any = {};
|
|
let ctx: any = {};
|
|
|
|
+ let canvasImageArr: any = {};
|
|
|
|
+ let iconData: any = [];
|
|
const proxyData = reactive({
|
|
const proxyData = reactive({
|
|
mapData: props.mapData, // 地图数据
|
|
mapData: props.mapData, // 地图数据
|
|
|
|
+ iconData: iconData,
|
|
parseImgUrl: parseImgUrl,
|
|
parseImgUrl: parseImgUrl,
|
|
|
|
+ canvasImageArr: canvasImageArr,
|
|
ctx: ctx,
|
|
ctx: ctx,
|
|
/**
|
|
/**
|
|
* 设置空间的图标
|
|
* 设置空间的图标
|
|
@@ -53,18 +57,32 @@ export default defineComponent({
|
|
item.icon = "";
|
|
item.icon = "";
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ // 地图缩放
|
|
|
|
+ scaleCanvas(data: any) {
|
|
|
|
+ proxyData.mapData = data;
|
|
|
|
+ let removeIconArr: any = document.querySelectorAll(".load-icon") || [];
|
|
|
|
+ // removeIconArr.map((item: any) => {
|
|
|
|
+ // item.remove();
|
|
|
|
+ // });
|
|
|
|
+ proxyData.canvasImageArr = {};
|
|
|
|
+ proxyData.initCanvas(1);
|
|
|
|
+ // proxyData.ctx.clearRect(0, 0, proxyData.mapData.width, proxyData.mapData.height);
|
|
|
|
+ },
|
|
// canvas画图
|
|
// canvas画图
|
|
- initCanvas() {
|
|
|
|
|
|
+ initCanvas(type: any = 0) {
|
|
let canvasDom: any = document.querySelector("#myCanvas");
|
|
let canvasDom: any = document.querySelector("#myCanvas");
|
|
|
|
+ // canvasDom.style.display = "none";
|
|
let ctx: any = canvasDom.getContext("2d");
|
|
let ctx: any = canvasDom.getContext("2d");
|
|
|
|
+ proxyData.ctx = ctx;
|
|
// debugger;
|
|
// debugger;
|
|
proxyData.drawDpiBegin(
|
|
proxyData.drawDpiBegin(
|
|
canvasDom,
|
|
canvasDom,
|
|
ctx,
|
|
ctx,
|
|
proxyData.mapData.width,
|
|
proxyData.mapData.width,
|
|
- proxyData.mapData.height
|
|
|
|
|
|
+ proxyData.mapData.height,
|
|
|
|
+ type
|
|
);
|
|
);
|
|
- proxyData.ctx = ctx;
|
|
|
|
|
|
+
|
|
let spaceList: any =
|
|
let spaceList: any =
|
|
(proxyData.mapData && proxyData.mapData.spaceList) || [];
|
|
(proxyData.mapData && proxyData.mapData.spaceList) || [];
|
|
spaceList.map((item: any) => {
|
|
spaceList.map((item: any) => {
|
|
@@ -85,7 +103,6 @@ export default defineComponent({
|
|
pointLeftArr.push(childItem.left);
|
|
pointLeftArr.push(childItem.left);
|
|
pointTopArr.push(childItem.top);
|
|
pointTopArr.push(childItem.top);
|
|
});
|
|
});
|
|
-
|
|
|
|
ctx.fill();
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
ctx.closePath();
|
|
ctx.beginPath();
|
|
ctx.beginPath();
|
|
@@ -101,8 +118,9 @@ export default defineComponent({
|
|
circleArr[0].top
|
|
circleArr[0].top
|
|
);
|
|
);
|
|
}
|
|
}
|
|
- ctx.closePath();
|
|
|
|
ctx.fill();
|
|
ctx.fill();
|
|
|
|
+ ctx.closePath();
|
|
|
|
+
|
|
let min1: any =
|
|
let min1: any =
|
|
proxyData.MaxAndMin(pointLeftArr)[1] -
|
|
proxyData.MaxAndMin(pointLeftArr)[1] -
|
|
proxyData.MaxAndMin(pointLeftArr)[0];
|
|
proxyData.MaxAndMin(pointLeftArr)[0];
|
|
@@ -114,26 +132,44 @@ export default defineComponent({
|
|
ctx.font = "12px serif";
|
|
ctx.font = "12px serif";
|
|
ctx.textAlign = "center";
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = item.fillColor === "#fff" ? "#000" : "#8995BA";
|
|
ctx.fillStyle = item.fillColor === "#fff" ? "#000" : "#8995BA";
|
|
|
|
+ let localName: any = item.localName;
|
|
|
|
+ let drutionLef: any = localName ? item.localName["length"] * 12 : 0;
|
|
ctx.fillText(
|
|
ctx.fillText(
|
|
item.localName,
|
|
item.localName,
|
|
item.logoPointArr[0].left,
|
|
item.logoPointArr[0].left,
|
|
- item.logoPointArr[0].top + 45,
|
|
|
|
- item.width
|
|
|
|
|
|
+ item.logoPointArr[0].top,
|
|
|
|
+ 50
|
|
);
|
|
);
|
|
- let localName: any = item.localName;
|
|
|
|
- let drutionLef: any = localName ? item.localName["length"] * 12 : 0;
|
|
|
|
|
|
+
|
|
if (item.icon) {
|
|
if (item.icon) {
|
|
- proxyData.drawIcon(ctx, item.icon, {
|
|
|
|
- left: item.logoPointArr[0].left - drutionLef / 2 + 15,
|
|
|
|
- top: item.logoPointArr[0].top - 15,
|
|
|
|
|
|
+ proxyData.addIcon(item, 1, {
|
|
|
|
+ left: item.logoPointArr[0].left - 50 / 2 + 15,
|
|
|
|
+ top: item.logoPointArr[0].top * 1 + 5,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
ctx.closePath();
|
|
ctx.closePath();
|
|
} else {
|
|
} else {
|
|
|
|
+ ctx.beginPath();
|
|
let img: any = new Image();
|
|
let img: any = new Image();
|
|
img.src = require("@/assets/svg/bg_disable.png");
|
|
img.src = require("@/assets/svg/bg_disable.png");
|
|
- img.onload = function () {
|
|
|
|
- ctx.beginPath();
|
|
|
|
|
|
+ if (type == 0) {
|
|
|
|
+ img.onload = function () {
|
|
|
|
+ item.pointArr.map((item: any, index: any) => {
|
|
|
|
+ if (index === 0) {
|
|
|
|
+ ctx.moveTo(item.left, item.top);
|
|
|
|
+ } else {
|
|
|
|
+ ctx.lineTo(item.left, item.top);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ let pat: any = ctx.createPattern(img, "repeat");
|
|
|
|
+ ctx.fillStyle = pat;
|
|
|
|
+ ctx.fill();
|
|
|
|
+ ctx.closePath();
|
|
|
|
+ ctx.lineWidth = 2;
|
|
|
|
+ ctx.strokeStyle = "#DFE3ED";
|
|
|
|
+ ctx.stroke();
|
|
|
|
+ };
|
|
|
|
+ } else {
|
|
item.pointArr.map((item: any, index: any) => {
|
|
item.pointArr.map((item: any, index: any) => {
|
|
if (index === 0) {
|
|
if (index === 0) {
|
|
ctx.moveTo(item.left, item.top);
|
|
ctx.moveTo(item.left, item.top);
|
|
@@ -148,9 +184,10 @@ export default defineComponent({
|
|
ctx.lineWidth = 2;
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeStyle = "#DFE3ED";
|
|
ctx.strokeStyle = "#DFE3ED";
|
|
ctx.stroke();
|
|
ctx.stroke();
|
|
- };
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+ proxyData.drawIcon(ctx, type);
|
|
proxyData.drawDpiEnd(canvasDom, ctx);
|
|
proxyData.drawDpiEnd(canvasDom, ctx);
|
|
},
|
|
},
|
|
MaxAndMin(arr: any) {
|
|
MaxAndMin(arr: any) {
|
|
@@ -164,16 +201,21 @@ export default defineComponent({
|
|
},
|
|
},
|
|
// 解决canvas画图模糊的问题
|
|
// 解决canvas画图模糊的问题
|
|
// 开始画
|
|
// 开始画
|
|
- drawDpiBegin(dom: any, context: any, width: any, height: any) {
|
|
|
|
|
|
+ drawDpiBegin(
|
|
|
|
+ dom: any,
|
|
|
|
+ context: any,
|
|
|
|
+ width: any,
|
|
|
|
+ height: any,
|
|
|
|
+ type: any = 0
|
|
|
|
+ ) {
|
|
context.save();
|
|
context.save();
|
|
|
|
+ context.clearRect(0, 0, width, height);
|
|
let scaleValue = window.devicePixelRatio;
|
|
let scaleValue = window.devicePixelRatio;
|
|
dom.setAttribute("width", width * scaleValue);
|
|
dom.setAttribute("width", width * scaleValue);
|
|
dom.setAttribute("height", height * scaleValue);
|
|
dom.setAttribute("height", height * scaleValue);
|
|
-
|
|
|
|
dom.style.width = width + "px";
|
|
dom.style.width = width + "px";
|
|
dom.style.height = height + "px";
|
|
dom.style.height = height + "px";
|
|
context.scale(scaleValue, scaleValue);
|
|
context.scale(scaleValue, scaleValue);
|
|
- context.clearRect(0, 0, width, height);
|
|
|
|
},
|
|
},
|
|
// 画图介绍
|
|
// 画图介绍
|
|
drawDpiEnd(dom: any, context: any) {
|
|
drawDpiEnd(dom: any, context: any) {
|
|
@@ -220,6 +262,7 @@ export default defineComponent({
|
|
// console.log(flag);
|
|
// console.log(flag);
|
|
if (flag) {
|
|
if (flag) {
|
|
console.log("点击了区域" + item.localName);
|
|
console.log("点击了区域" + item.localName);
|
|
|
|
+ contx.emit("checkSpace", item);
|
|
break;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -273,16 +316,83 @@ export default defineComponent({
|
|
return v1.x * v2.y - v1.y * v2.x;
|
|
return v1.x * v2.y - v1.y * v2.x;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 画图标
|
|
|
|
- drawIcon(ctx: any, url: any, iconPerstion: any) {
|
|
|
|
- if (iconPerstion) {
|
|
|
|
|
|
+ loadAllImages(imgUrls: any) {
|
|
|
|
+ let _load: any = function (imgUrl: any) {
|
|
|
|
+ //创建img标签
|
|
let img: any = new Image();
|
|
let img: any = new Image();
|
|
- img.src = url;
|
|
|
|
- img.onload = function () {
|
|
|
|
- ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
|
|
|
|
- iconPerstion.width = 30;
|
|
|
|
- iconPerstion.height = 30;
|
|
|
|
|
|
+ img.src = imgUrl;
|
|
|
|
+ // img.src = require("@/assets/svg/coffee.svg");
|
|
|
|
+ //跨域选项
|
|
|
|
+ img.setAttribute("crossOrigin", "Anonymous");
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ //文件加载完毕
|
|
|
|
+ img.onload = function () {
|
|
|
|
+ resolve(img);
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ let _loadAll: any = function (imgUrls: any) {
|
|
|
|
+ let loadedImageUrls: any = [];
|
|
|
|
+ for (let i = 0, len = imgUrls.length; i < len; i++) {
|
|
|
|
+ loadedImageUrls.push(_load(imgUrls[i]));
|
|
|
|
+ }
|
|
|
|
+ return loadedImageUrls;
|
|
|
|
+ };
|
|
|
|
+ return Promise.all(_loadAll(imgUrls));
|
|
|
|
+ },
|
|
|
|
+ // 记录需要画的图片
|
|
|
|
+ addIcon(item: any, type: any, iconPerstion: any) {
|
|
|
|
+ let key: any = item.spaceId + "" + type;
|
|
|
|
+ if (proxyData.canvasImageArr[key]) {
|
|
|
|
+ proxyData.canvasImageArr[key].iconPerstion = iconPerstion;
|
|
|
|
+ } else {
|
|
|
|
+ let obj: any = {
|
|
|
|
+ url: item.icon,
|
|
|
|
+ iconPerstion: iconPerstion,
|
|
};
|
|
};
|
|
|
|
+ proxyData.canvasImageArr[key] = obj;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 画图标
|
|
|
|
+ drawIcon(ctx: any, type: any = 0) {
|
|
|
|
+ let canvasImageArr: any = proxyData.canvasImageArr;
|
|
|
|
+ let imgUrlArr: any = [];
|
|
|
|
+ let perstionArr: any = [];
|
|
|
|
+
|
|
|
|
+ for (let key in canvasImageArr) {
|
|
|
|
+ let item: any = canvasImageArr[key];
|
|
|
|
+ imgUrlArr.push(item.url);
|
|
|
|
+ perstionArr.push(item.iconPerstion);
|
|
|
|
+ }
|
|
|
|
+ if (type == 0) {
|
|
|
|
+ proxyData.loadAllImages(imgUrlArr).then((res: any) => {
|
|
|
|
+ proxyData.iconData = res;
|
|
|
|
+ res.map((icon: any, index: any) => {
|
|
|
|
+ let iconPerstion: any = perstionArr[index];
|
|
|
|
+ iconPerstion.width = 25;
|
|
|
|
+ iconPerstion.height = 15;
|
|
|
|
+ ctx.drawImage(
|
|
|
|
+ icon,
|
|
|
|
+ iconPerstion.left,
|
|
|
|
+ iconPerstion.top,
|
|
|
|
+ iconPerstion.width,
|
|
|
|
+ iconPerstion.height
|
|
|
|
+ );
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ proxyData.iconData.map((icon: any, index: any) => {
|
|
|
|
+ let iconPerstion: any = perstionArr[index];
|
|
|
|
+ iconPerstion.width = 25;
|
|
|
|
+ iconPerstion.height = 15;
|
|
|
|
+ ctx.drawImage(
|
|
|
|
+ icon,
|
|
|
|
+ iconPerstion.left,
|
|
|
|
+ iconPerstion.top,
|
|
|
|
+ iconPerstion.width,
|
|
|
|
+ iconPerstion.height
|
|
|
|
+ );
|
|
|
|
+ });
|
|
}
|
|
}
|
|
},
|
|
},
|
|
init(data: any) {
|
|
init(data: any) {
|