diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue index 535fc08c..93f035b3 100644 --- a/ruoyi-ui/src/App.vue +++ b/ruoyi-ui/src/App.vue @@ -64,4 +64,9 @@ export default { font-family: "PangMenZhengDao-3"; src: url("/static/fonts/庞门正道标题体3.ttf"); } + +.amap-marker-label { + border: 0; + background-color: transparent; +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg new file mode 100644 index 00000000..e3158ed2 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg new file mode 100644 index 00000000..f09c1e6b --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg new file mode 100644 index 00000000..9009a869 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue new file mode 100644 index 00000000..6940b663 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue @@ -0,0 +1,96 @@ + + + + + + + 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 8aeb6151..12e76a5b 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 @@ -24,6 +24,8 @@ import { upperFirst } from "lodash"; */ const faultBg = require(`@screen/images/mapBg/fault.svg`); const normalBg = require(`@screen/images/mapBg/active.svg`); +const faultTitleBg = require(`@screen/images/mapBg/fault_title.svg`); +const normalTitleBg = require(`@screen/images/mapBg/active_title.svg`); /** * 聚合点 @@ -206,12 +208,37 @@ export class MarkerCluster { lnglat: { lat, lng }, } = markerData; const lngLatStr = `${lng}/${lat}`; - - if (lngLatMap[lngLatStr]) { - context.marker.setContent(getContent(lngLatMap[lngLatStr])); + const data = lngLatMap[lngLatStr]; + if (data) { + const state = getState(data); + let nowTitleBg, nowTitleColor; + if (state) { + nowTitleBg = normalTitleBg; + nowTitleColor = "#FFDB82"; + } else { + nowTitleBg = faultTitleBg; + nowTitleColor = "#FF7575"; + } + const item = data[0]; + const { stakeMark } = item.extData; + const titleTemplate = window.showStakeText + ? `

${stakeMark}

` + : ""; context.marker.setAnchor("bottom-center"); + context.marker.setLabel({ + direction: "bottom", + // offset: new AMap.Pixel(10, 0), //设置文本标注偏移量 + content: titleTemplate, //设置文本标注内容 + }); + + context.marker.setContent(getContent(data)); + // if (window.showStakeText) context.marker.setAnchor("center"); + // else context.marker.setAnchor("bottom-center"); + const offset = new AMap.Pixel(0, 0); context.marker.setOffset(offset); @@ -278,32 +305,50 @@ export class MarkerCluster { this.markerCluster.setData(this.data); } + + setData() { + this.markerCluster.setData(this.data); + } } export function getContent(data) { // const faultBg = require(`@screen/images/mapBg/fault.svg`); // const normalBg = require(`@screen/images/mapBg/active.svg`); - const nowBg = getState(data) ? normalBg : faultBg; + const state = getState(data); + let nowBg, nowTitleBg, nowTitleColor; + if (state) { + nowBg = normalBg; + nowTitleBg = normalTitleBg; + nowTitleColor = "#FFDB82"; + } else { + nowBg = faultBg; + nowTitleBg = faultTitleBg; + nowTitleColor = "#FF7575"; + } + + const item = data[0]; + const { stakeMark } = item.extData; if (data.length === 1) { return ` -
- -
+
+ +
`; } else { const width = `${36 + `${data.length}`.length * 15}px`; @@ -319,6 +364,7 @@ export function getContent(data) { justify-content: center; align-items: center; padding-bottom: 9px; + align-self: center; "> ${data.length} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue index e4c81b64..7bd3b707 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue @@ -1,13 +1,9 @@