修改分区颜色,增加图标跳动

index.html

@@ -80,6 +80,8 @@
         border: none;
         box-shadow: 0 3px 14px rgba(0, 0, 0, 0);
         align-items: center;
+        height: 220px;
+        overflow: hidden;
       }
 
       .leaflet-popup-close-button {
@@ -94,7 +96,7 @@
         background-size: 100% 100% !important;
         background-position: center center;
         width: 230px;
-        min-height: 199px;
+        height: 220px;
         color: #fff;
         padding: 10px;
         background-size: 100% 260px;

src/utils/TFMapUitl.ts

@@ -262,6 +262,10 @@ class TFMapUitl {
    * @param map定位使用的地图
    */
   clearPointLocation_list(map) {
+    if(window.breathMarker){
+      window.breathMarker.breathe()
+      window.breathMarker=null
+    }
     window.impointFlag=true
     window.getImportSites()
     this.active();
@@ -396,7 +400,12 @@ class TFMapUitl {
     <span style="font-family: Source Han Sans CN;
     font-size: 16px;
     font-weight: 500;
-    line-height: 36px;color: #FFFFFF;margin-right:10px;">${i.st_name + i.typeName}</span> 
+    line-height: 36px;color: #FFFFFF;margin-right:10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;"
+    title="${i.st_name + i.typeName}"
+    >${i.st_name + i.typeName}</span> 
     <img style="display: inline-block;width:12px"  title='查看详情' onclick="siteDetail(${data})" src='./static/img/detailArrow.png' />
     </div>
     <ul style="background: transparent; overflow: auto;height:150px">`
@@ -747,6 +756,14 @@ class TFMapUitl {
  * 所有点位点击事件后的弹框
  */
   setSTMarkerPopup(e) {
+    if(window.breathMarker){
+      window.breathMarker.breathe()
+      window.breathMarker=null
+    }
+    if (e && e.graphic && e.graphic.overlay) {
+        e.graphic.overlay.breathe()
+        window.breathMarker=e.graphic.overlay
+    }
     window.clearImpoint()
 
     var i = e.graphic.overlay.info

src/views/map/Map.vue

@@ -447,18 +447,24 @@ export default defineComponent({
       let geo = new TFMap.GeoPolygon(fenquData, 10000, '#fffff7', '#000000', true);
       geo.data.features.forEach((i) => {
         // i.properties.color='#fff';
-        i.properties.fontColor = '#000000';
-        i.properties.fontSize = '20';
+        i.properties.fontColor = '#377DFF';
+        i.properties.fontSize = 18;
         rainDatafq.value.forEach((item) => {
           if (item.name == i.properties.nameKey) {
             i.properties.color = getColorVal(item.value);
             i.properties.name = item.name + ' ' + item.value + 'mm';
+            console.log(i.properties.name,8282)
           } else if (i.properties.nameKey == '尼西站以上') {
             i.properties.color = '#fffff7';
           }
         });
       });
-      geo.label();
+      geo.label({
+        font: 'normal 18px MicroSoft YaHei',
+        fillColor: Cesium.Color.fromCssColorString('#377DFF'),
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //有填充和边框
+        outlineColor: Cesium.Color.WHITE,
+        outlineWidth:5 });
       // console.log(geo,87)
       geo.setClassify('fqPolygon'); //写一个类名也可不行，写了可以使用这个名字进行删除
       geo.addListener(map, (e) => {
@@ -469,6 +475,16 @@ export default defineComponent({
 
     eventBus.on('mapjump', (e) => {
       console.log(e, 76);
+      basicStore.getStDetailArrStore.forEach((i) => {
+              if (i.st_name == e.pageTitle) {
+                console.log(i,887)
+                    // siteDetail(i);
+                    // 高亮点
+                    window.breathMarker&& window.breathMarker.breathe();window.breathMarker=null
+                    window.breathMarker=map.findOverlay(`gcd&${i.stcd}`)
+                    window.breathMarker.breathe()
+              }
+            });
       map.flyTo(
         {
           destination: {
@@ -485,6 +501,7 @@ export default defineComponent({
         1,
         () => {
           // siteDetail(i);
+           
         }
       );
     });
@@ -497,6 +514,7 @@ export default defineComponent({
       (newV) => {
         basicStore.getStDetailArrStore.forEach((i) => {
           if (i.stcd == newV.stcd) {
+            console.log(i,887)
             map.flyTo(
               {
                 destination: {
@@ -513,6 +531,10 @@ export default defineComponent({
               1,
               () => {
                 // siteDetail(i);
+                // 高亮点
+                window.breathMarker&& window.breathMarker.breathe();window.breathMarker=null
+                window.breathMarker=map.findOverlay(`gcd&${i.stcd}`)
+                window.breathMarker.breathe()
               }
             );
           }
@@ -555,10 +577,7 @@ export default defineComponent({
     const geologicalStore = useGeologicalStore();
     const monitorDevicesStore = useMonitorDevicesStore();
     this.init(() => { });
-
     setTimeout(() => {
-      
-
       this.initWinWay();
       const basicStore = useBasicStore();
       // 测站信息
@@ -1623,13 +1642,22 @@ export default defineComponent({
               marker.label(i.name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
               marker.info = i;
               // console.log(marker.info, 71);
-              // marker.addListener(map, (e) => {
-              //   var html = TFMapUitl.gcdMarkerDom(e.graphic.overlay.info);
-              //   map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
-              //   map.popup.setOffset(-270, -30);
-              //   TFMapUitl.active(e.graphic.overlay.id);
-              //   TFMapUitl.trends(e.graphic.overlay.points, null, true);
-              // });
+              marker.addListener(map, (e) => {
+                //   if(window.breathMarker){
+                //   window.breathMarker.breathe()
+                //   window.breathMarker=null
+                // }
+                // if (e && e.graphic && e.graphic.overlay) {
+                //     e.graphic.overlay.breathe()
+                //     window.breathMarker=e.graphic.overlay
+                //     TFMapUitl.clearPointLocation_list(map)
+                // }
+                // var html = TFMapUitl.gcdMarkerDom(e.graphic.overlay.info);
+                // map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
+                // map.popup.setOffset(-270, -30);
+                // TFMapUitl.active(e.graphic.overlay.id);
+                // TFMapUitl.trends(e.graphic.overlay.points, null, true);
+              });
               map.addOverlay(marker);
             }
           });
@@ -1659,6 +1687,15 @@ export default defineComponent({
             marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
+              if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe()
+                  window.breathMarker=e.graphic.overlay
+              }
+
               var i = e.graphic.overlay.info
               map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
               map.popup.setOffset(-185, 60);
@@ -1683,6 +1720,15 @@ export default defineComponent({
             marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e =>{
+              if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe()
+                  window.breathMarker=e.graphic.overlay
+              }
+
               var i = e.graphic.overlay.info
               map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
               map.popup.setOffset(-185, 60);
@@ -1732,6 +1778,15 @@ export default defineComponent({
             marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -30, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
+              if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe()
+                  window.breathMarker=e.graphic.overlay
+              }
+
               var i = e.graphic.overlay.info
               map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
               map.popup.setOffset(-182, 64);
@@ -1773,6 +1828,15 @@ export default defineComponent({
             marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -50, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
+              if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe()
+                  window.breathMarker=e.graphic.overlay
+              }
+
               var i = e.graphic.overlay.info
               map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
               map.popup.setOffset(-185, 60);
@@ -1796,6 +1860,15 @@ export default defineComponent({
             marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -70, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
+              if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe()
+                  window.breathMarker=e.graphic.overlay
+              }
+
               var i = e.graphic.overlay.info
               map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
               map.popup.setOffset(-185, 58);
@@ -2002,6 +2075,7 @@ export default defineComponent({
           window.impointInterval=
             setInterval(
                 ()=>{
+                  window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
                   if(window.impoint&&window.impoint.length){
                         window.impoint.forEach(j=>{
                           map.removeOverlay(j);
@@ -2068,6 +2142,8 @@ export default defineComponent({
         }
       }
       window.clearImpoint=function(){
+        window.impointInterval&&clearInterval(window.impointInterval)
+        window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
         window.impointFlag=false
         if(window.impoint&&window.impoint.length){
                 window.impoint.forEach(j=>{
@@ -2075,6 +2151,7 @@ export default defineComponent({
                 })
                 window.impoint=[]
               }
+        
       }
       // 
       // 获取测站并更新测站高程