diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active.svg
new file mode 100644
index 00000000..852884d8
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active.svg
@@ -0,0 +1,68 @@
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault.svg
new file mode 100644
index 00000000..07c872e4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault.svg
@@ -0,0 +1,68 @@
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/normal.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/normal.svg
new file mode 100644
index 00000000..fb11e927
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/normal.svg
@@ -0,0 +1,68 @@
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/success.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/success.svg
new file mode 100644
index 00000000..37039ff4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/success.svg
@@ -0,0 +1,68 @@
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
index 0013e100..f8c2caf7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
@@ -23,8 +23,7 @@ export default {
computed: {
getReverseStyle() {
return {
- transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY
- })`,
+ transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY})`,
};
},
},
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index 3202ae32..7bf409fb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -54,15 +54,11 @@ export const eventMap = {
/^\.|[^/]+(?=.svg$)/g,
(data) => (data === "." ? "" : `${data}_fault`)
)}`);
-
- const markers = [];
+ // const fault = require(`@screen/images/mapBg/fault.svg`);
+ // const normal = require(`@screen/images/mapBg/active.svg`);
const markerClick = (e) => {
- const {
- target: {
- w: { extData },
- },
- } = e;
+ const extData = e.target.getExtData();
this.cameraDialogConfig = {
// 0 有（球机） 1 ⽆（枪机）
@@ -73,32 +69,28 @@ export const eventMap = {
console.log(this.cameraDialogConfig);
};
- data.forEach((item) => {
- const { lng, lat } = PilePointJSON[item.pileNum] || {};
-
- if (!lat || !lng) return;
-
- const marker = new AMap.Marker({
- position: [lng, lat],
- content: `![](${
- item.status !== "0" ? fault : normal
- })
`,
- offset: new AMap.Pixel(-15, -15),
- extData: item,
- clickable: true,
- });
-
- marker.on("click", markerClick);
-
- markers.push(marker);
- });
-
- const markerCluster = await setMarkerCluster(mapIns, markers);
+ const markerCluster = await setMarkerCluster(
+ mapIns,
+ data.map((item) => {
+ const { lng, lat } = PilePointJSON[item.pileNum] || {};
+
+ return {
+ weight: 1,
+ lnglat: [lng, lat],
+ name: "",
+ extData: item,
+ content: `![](${
+ item.status !== "0" ? fault : normal
+ })
`,
+ };
+ }),
+ markerClick
+ );
cacheRemoveFunc.DriveTestEquipment_Camera_Remove = () =>
- markerCluster.clearMarkers();
+ markerCluster.setMap(null);
- mapIns.setFitView(markers, false, [360, 360, 360, 360]);
+ mapIns.setFitView(markerCluster.U, false, [360, 360, 360, 360]);
},
async "路测设备/摄像机_close"() {
cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
index beefc276..3d6938b3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
@@ -16,16 +16,17 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.j
* @param {*} map
* @param {Point[]} points
* @param {Marker[]} markers
- * @param {*} options
+ * @param {Function} markerFun
* @returns
*/
-export async function setMarkerCluster(map, markers, options) {
+export async function setMarkerCluster(map, points, markerFun) {
const AMap = await loadAMap();
- return new AMap.MarkerClusterer(map, markers, {
+ let hasClick = false;
+
+ const markerCluster = new AMap.MarkerCluster(map, points, {
// gridSize: 15,
maxZoom: 15,
- ...options,
// 自定义聚合点样式
renderClusterMarker(context) {
// 聚合中点个数
@@ -33,10 +34,10 @@ export async function setMarkerCluster(map, markers, options) {
const div = document.createElement("div");
let bgColor = "204,235,197";
- div.style.backgroundColor = `rgba(${bgColor}, .5)`;
+ div.style.backgroundColor = `rgba(${bgColor}, .6)`;
const size = Math.round(
- 25 + Math.pow(clusterCount / markers.length, 1 / 5) * 36
+ 25 + Math.pow(clusterCount / points.length, 1 / 5) * 36
);
div.style.borderRadius =
@@ -49,8 +50,33 @@ export async function setMarkerCluster(map, markers, options) {
div.style.color = "#ffffff";
div.style.fontSize = "24px";
div.style.textAlign = "center";
+
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
},
+ renderMarker(context) {
+ const { content, extData } = context.data[0];
+
+ const offset = new AMap.Pixel(-9, -9);
+ context.marker.setContent(content);
+ context.marker.setOffset(offset);
+
+ context.marker.setExtData(extData);
+
+ context.marker.on("click", (e) => {
+ hasClick = true;
+
+ markerFun(e);
+ });
+ },
});
+
+ markerCluster.on("click", (e) => {
+ if (hasClick) return (hasClick = false);
+
+ map.setCenter(e.lnglat);
+ map.setZoom(map.getZoom() + 3);
+ });
+
+ return markerCluster;
}