|
|
@ -43,68 +43,11 @@ export class MarkerCluster { |
|
|
return (this.map = Vue.prototype.mapIns); |
|
|
return (this.map = Vue.prototype.mapIns); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async addData(data) { |
|
|
async addData(data, isDefault) { |
|
|
this.infoWindow?.close?.(); |
|
|
this.infoWindow?.close?.(); |
|
|
const graphInstance = window.graphInstance; |
|
|
if (!isDefault) { |
|
|
console.log(data, "xxxxx"); |
|
|
marksAddInGraph(data); |
|
|
data?.forEach((markerData, index) => { |
|
|
|
|
|
const lnglat = markerData.lnglat; |
|
|
|
|
|
if (lnglat) { |
|
|
|
|
|
const getLatAndLng = () => { |
|
|
|
|
|
if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; |
|
|
|
|
|
else return lnglat; |
|
|
|
|
|
}; |
|
|
|
|
|
const { lat, lng } = getLatAndLng(); |
|
|
|
|
|
const lngLatStr = `${lng}/${lat}`; |
|
|
|
|
|
const data = lngLatMap[lngLatStr]; |
|
|
|
|
|
const nowBg = getState(data) ? normalBg : faultBg; |
|
|
|
|
|
const extData = data[0].extData; |
|
|
|
|
|
const { item: eventItem } = data[0].config; |
|
|
|
|
|
if (eventItem.id.match("./事件专题")) { |
|
|
|
|
|
let { stakeMark, lang } = extData; |
|
|
|
|
|
const distance = |
|
|
|
|
|
(Number( |
|
|
|
|
|
stakeMark |
|
|
|
|
|
.replace(/\.\d+/, "") |
|
|
|
|
|
.replace("+", ".") |
|
|
|
|
|
.replace(/[Kk]/, "") |
|
|
|
|
|
) - |
|
|
|
|
|
54.394) * |
|
|
|
|
|
window.canvasRatio + |
|
|
|
|
|
window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
|
|
|
|
|
|
|
|
|
|
|
|
const node = {}; |
|
|
|
|
|
if (data.length === 1) { |
|
|
|
|
|
node.shape = "singleNode-html"; |
|
|
|
|
|
node.data = { |
|
|
|
|
|
nowBg, |
|
|
|
|
|
src: `${getIcon(data[0])}`, |
|
|
|
|
|
extData, |
|
|
|
|
|
}; |
|
|
|
|
|
} else { |
|
|
|
|
|
node.shape = "multiNode-html"; |
|
|
|
|
|
node.data = { |
|
|
|
|
|
nowBg, |
|
|
|
|
|
// width: `${36 + `${data.length}`.length * 15}px`,
|
|
|
|
|
|
length: data.length, |
|
|
|
|
|
extData, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
} |
|
|
if (graphInstance.getCellById(stakeMark)) { |
|
|
|
|
|
graphInstance.removeNode(stakeMark); |
|
|
|
|
|
} |
|
|
|
|
|
graphInstance.addNode({ |
|
|
|
|
|
x: distance, |
|
|
|
|
|
y: 60, |
|
|
|
|
|
width: 20, |
|
|
|
|
|
height: 20, |
|
|
|
|
|
...node, |
|
|
|
|
|
zIndex: 1, |
|
|
|
|
|
id: stakeMark, |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (!data) return; |
|
|
if (!data) return; |
|
|
if (!Array.isArray(data)) data = [data]; |
|
|
if (!Array.isArray(data)) data = [data]; |
|
|
@ -124,7 +67,7 @@ export class MarkerCluster { |
|
|
"font-size:15px; background:#641f14; color:#a86358;", |
|
|
"font-size:15px; background:#641f14; color:#a86358;", |
|
|
data |
|
|
data |
|
|
); |
|
|
); |
|
|
|
|
|
console.log(); |
|
|
this.markerCluster.addData(data); |
|
|
this.markerCluster.addData(data); |
|
|
console.log( |
|
|
console.log( |
|
|
"%c [ this.markerCluster ]-234-「map.js」", |
|
|
"%c [ this.markerCluster ]-234-「map.js」", |
|
|
@ -398,4 +341,71 @@ function getStateSingle({ config, extData }) { |
|
|
: extData.deviceState == 1; |
|
|
: extData.deviceState == 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export function marksAddInGraph(data) { |
|
|
|
|
|
for (let markerData of data || []) { |
|
|
|
|
|
const lnglat = markerData.lnglat; |
|
|
|
|
|
if (lnglat) { |
|
|
|
|
|
const getLatAndLng = () => { |
|
|
|
|
|
if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; |
|
|
|
|
|
else return lnglat; |
|
|
|
|
|
}; |
|
|
|
|
|
const { lat, lng } = getLatAndLng(); |
|
|
|
|
|
const lngLatStr = `${lng}/${lat}`; |
|
|
|
|
|
const data = lngLatMap[lngLatStr]; |
|
|
|
|
|
addInGraphHandle(data); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export function addInGraphHandle(data) { |
|
|
|
|
|
const graphInstance = window.graphInstance; |
|
|
|
|
|
const nowBg = getState(data) ? normalBg : faultBg; |
|
|
|
|
|
const extData = data[0].extData; |
|
|
|
|
|
const { item: eventItem } = data[0].config; |
|
|
|
|
|
if (eventItem.id.match("./事件专题")) { |
|
|
|
|
|
let { stakeMark, lang } = extData; |
|
|
|
|
|
const distance = |
|
|
|
|
|
(Number( |
|
|
|
|
|
stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "") |
|
|
|
|
|
) - |
|
|
|
|
|
54.394) * |
|
|
|
|
|
window.canvasRatio + |
|
|
|
|
|
window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺
|
|
|
|
|
|
|
|
|
|
|
|
const node = {}; |
|
|
|
|
|
if (data.length === 1) { |
|
|
|
|
|
node.shape = "singleNode-html"; |
|
|
|
|
|
node.data = { |
|
|
|
|
|
nowBg, |
|
|
|
|
|
src: `${getIcon(data[0])}`, |
|
|
|
|
|
extData, |
|
|
|
|
|
}; |
|
|
|
|
|
} else { |
|
|
|
|
|
node.shape = "multiNode-html"; |
|
|
|
|
|
node.data = { |
|
|
|
|
|
nowBg, |
|
|
|
|
|
// width: `${36 + `${data.length}`.length * 15}px`,
|
|
|
|
|
|
length: data.length, |
|
|
|
|
|
extData, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
const existNode = graphInstance.getCellById(stakeMark); |
|
|
|
|
|
if (existNode) { |
|
|
|
|
|
graphInstance.removeCell(existNode.id); |
|
|
|
|
|
} |
|
|
|
|
|
console.log(lang, "lang"); |
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
|
graphInstance.addNode({ |
|
|
|
|
|
x: distance, |
|
|
|
|
|
y: 60, |
|
|
|
|
|
width: 20, |
|
|
|
|
|
height: 20, |
|
|
|
|
|
...node, |
|
|
|
|
|
zIndex: 1, |
|
|
|
|
|
id: stakeMark, |
|
|
|
|
|
}); |
|
|
|
|
|
// }, 0);
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
export const markerClusterIns = new MarkerCluster(); |
|
|
export const markerClusterIns = new MarkerCluster(); |
|
|
|
