更改图片样式

src/utils/getcolor.js

@@ -9,32 +9,29 @@
 const getColorVal = (val)=>{
     let color;
     switch (true) {
-        case val >= 0 && val < 0.1:
-            color = "#FFFFFF";
+        case val >= 0 && val < 1:
+            color = "#fffdff";
             break;
-        case val >= 0.1 && val < 2.5:
-            color = "#d9f9ce";
+        case val >= 1 && val <= 9.9:
+            color = "#a6f28e";
             break;
-        case val >= 2.5 && val < 5:
-            color = "#b4f7a3";
+        case val >= 10 && val <= 24.9:
+            color = "#3db93d";
             break;
-        case val >= 5 && val < 10:
-            color = "#6dd969";
+        case val >= 25 && val <= 49.9:
+            color = "#61b8ff";
             break;
-        case val >= 10 && val < 25:
-            color = "#43b635";
+        case val >=50&&val<=99.9:
+            color = "#0000fe";
             break;
-        case val >= 25 && val < 50:
-            color = "#62b7fb";
+        case val >=100&&val<=250:
+            color = "#f900fb";
             break;
-        case val >=50&&val<100:
-            color = "#0000f7";
-            break;
-        case val >=100:
-            color = "#fd00f9";
+        case val >250:
+            color = "#81013d";
             break;
         default:
-            color = "rgba(153,153,153,0.56)";
+            color = "#eaeaea";
             break;
 
     }

src/views/map/Map.vue

@@ -276,7 +276,7 @@ export default defineComponent({
           context.fill();
 
           var marker = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, canvas, {
-            scale: 1,
+            scale: 1.5,
           })
             // .action('./static/img/gc2.png')
             .init()
@@ -285,10 +285,18 @@ export default defineComponent({
           const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + 'rainMap*';
           marker.setClassify(tempClass);
           dzgcMarkerIdList[marker.id] = marker;
-          marker.label(i.st_name + ' ' + i.value + 'mm', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -30, 'rgba(6,161,239,0)');
+          marker.label(i.st_name + ' ' + i.value + 'mm', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
           marker.info = i;
           // console.log(marker.info, 74);
           marker.addListener(map, (e) => {
+            if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe(-0.5)
+                  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);
@@ -298,17 +306,31 @@ export default defineComponent({
       });
     };
     const colors = [
-    { min: 100, max: 99999, color: "#fd00f9" },
-    { min: 50, max: 100, color: "#0000f7" },
-    { min: 25, max: 50, color: "#62b7fb" },
-    { min: 10, max: 25, color: "#43b635" },
-    { min: 5, max: 10, color: "#6dd969" },
-    { min: 2.5, max: 5, color: "#b4f7a3" },
-    { min: 0, max: 2.5, color: "#d9f9ce" },
-]
+    { min: 800, max: 99999, color: "rgba(0,0,0,0)" },
+    { min: 250, max: 400, color: "#84003f" },
+    { min: 100, max: 250, color: "#fa00fa" },
+    { min: 50, max: 100, color: "#0000fe" },
+    { min: 25, max: 50, color: "#61b8ff" },
+    { min: 10, max: 25, color: "#3db93d" },
+    { min: 1, max: 10, color: "#a6f28e" },
+    { min: 0.01, max: 1, color: "#ffffff" },
+    { min: 0, max: 0.01, color: "rgba(0,0,0,0)" },
+    ]
     // 更新面雨量分布图
     const uprainAreaLayer = () => {
-      window.iso = new TFMap.Isosurface(map, rainData.value, range,colors);
+      // window.mapConfig.isosurfaceUrl='http://106.12.170.138:4001/isosurface'
+      rainData.value.forEach(i=>{
+        if(Number(i.value)){
+          i.value=Number(i.value)
+        }else{
+          i.value=0
+        }
+      })
+      const key = 'updatable';
+        createMessage.loading({ content: '正在进行面雨量分布图计算,请勿进行其他操作', key, duration: 0 });
+      window.iso = new TFMap.Isosurface(map, rainData.value, range,colors,()=>{
+        createMessage.success({ content: '面雨量分布图计算完成', key, duration: 2 });
+      });
       iso.init();
     };
     // 温度图
@@ -343,7 +365,7 @@ export default defineComponent({
           context.fill();
 
           var marker = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, canvas, {
-            scale: 1,
+            scale: 1.5,
           })
             // .action('./static/img/gc2.png')
             .init()
@@ -352,10 +374,18 @@ export default defineComponent({
           const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + 'wdMap*';
           marker.setClassify(tempClass);
           dzgcMarkerIdList[marker.id] = marker;
-          marker.label(i.st_name + ' ' + i.value + '℃', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -30, 'rgba(6,161,239,0)');
+          marker.label(i.st_name + ' ' + i.value + '℃', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
           marker.info = i;
           // console.log(marker.info, 74);
           marker.addListener(map, (e) => {
+            if(window.breathMarker){
+                window.breathMarker.breathe()
+                window.breathMarker=null
+              }
+              if (e && e.graphic && e.graphic.overlay) {
+                  e.graphic.overlay.breathe(-0.5)
+                  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);
@@ -534,7 +564,12 @@ export default defineComponent({
                 // 高亮点
                 window.breathMarker&& window.breathMarker.breathe();window.breathMarker=null
                 window.breathMarker=map.findOverlay(`gcd&${i.stcd}`)
-                window.breathMarker.breathe()
+                if(i.st_type == 1||i.st_type==2||i.st_type==4){
+                  window.breathMarker.breathe(-0.5)
+                }else{
+                  window.breathMarker.breathe()
+                }
+                
               }
             );
           }
@@ -1639,7 +1674,7 @@ export default defineComponent({
               const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.gc;
               marker.setClassify(tempClass);
               dzgcMarkerIdList[marker.id] = marker;
-              marker.label(i.name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
+              marker.label(i.name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
               marker.info = i;
               // console.log(marker.info, 71);
               marker.addListener(map, (e) => {
@@ -1684,7 +1719,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.shuiwenzhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
               if(window.breathMarker){
@@ -1692,7 +1727,7 @@ export default defineComponent({
                 window.breathMarker=null
               }
               if (e && e.graphic && e.graphic.overlay) {
-                  e.graphic.overlay.breathe()
+                  e.graphic.overlay.breathe(-0.5)
                   window.breathMarker=e.graphic.overlay
               }
 
@@ -1717,7 +1752,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.shuiweizhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -40, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e =>{
               if(window.breathMarker){
@@ -1725,7 +1760,7 @@ export default defineComponent({
                 window.breathMarker=null
               }
               if (e && e.graphic && e.graphic.overlay) {
-                  e.graphic.overlay.breathe()
+                  e.graphic.overlay.breathe(-0.5)
                   window.breathMarker=e.graphic.overlay
               }
 
@@ -1766,7 +1801,7 @@ export default defineComponent({
             context.fill();
 
             var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, canvas, {
-              scale: 1,
+              scale: 1.2,
             })
               // .action('./static/img/gc2.png')
               .init()
@@ -1775,7 +1810,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.yuliangzhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -30, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
               if(window.breathMarker){
@@ -1783,7 +1818,7 @@ export default defineComponent({
                 window.breathMarker=null
               }
               if (e && e.graphic && e.graphic.overlay) {
-                  e.graphic.overlay.breathe()
+                  e.graphic.overlay.breathe(-1)
                   window.breathMarker=e.graphic.overlay
               }
 
@@ -1807,7 +1842,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.yibanqixiangzhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -70, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -10, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => TFMapUitl.setSTMarkerPopup(e));
             map.addOverlay(marker);
@@ -1825,7 +1860,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.tanshuitongliangzhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -50, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
               if(window.breathMarker){
@@ -1833,7 +1868,7 @@ export default defineComponent({
                 window.breathMarker=null
               }
               if (e && e.graphic && e.graphic.overlay) {
-                  e.graphic.overlay.breathe()
+                  e.graphic.overlay.breathe(-0.5)
                   window.breathMarker=e.graphic.overlay
               }
 
@@ -1857,7 +1892,7 @@ export default defineComponent({
             const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.biaozhunqixiangzhan;
             marker.setClassify(tempClass);
             dzgcMarkerIdList[marker.id] = marker;
-            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -70, 'rgba(6,161,239,0)');
+            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 14, 'rgba(6,161,239,0)');
             marker.info = i;
             marker.addListener(map, e => {
               if(window.breathMarker){
@@ -2024,7 +2059,7 @@ export default defineComponent({
       window.getImportSites=function (){
         window.impointInterval&&clearInterval(window.impointInterval)
         window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
-        if(window.impointFlag){
+        if(window.impointFlag&&!window.impointNotShow){
           getImportPoint().then(res=>{
                   if(res.code==200&&res.data){
                     if(window.impoint&&window.impoint.length){

src/views/map/changeMap.vue

@@ -95,7 +95,7 @@
     <div class="class-legend" v-show="mapLgendShow">
       <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">mm</div>
       <div v-for="item in rainLegendNow" :style="item.style">{{ item.value }}</div>
-      <div style="border-radius: 0 0 25px 25px ;background-color: #3f3dbd;color: #fff;">0</div>
+      <div style="border-radius: 0 0 25px 25px ;background-color: #eaeaea;color: #000;font-size: 12px;">无数据</div>
     </div>
     <div class="class-legendtwo" v-show="mapLgendShow2">
       <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">℃</div>
@@ -162,32 +162,32 @@ eventBus.on('wdLegend', (e) => {
 const rainLegendNow=ref()
 const rainLegend = reactive([
 {
-    style: 'background:#d9f9ce',
-    value: '0~2.5',
+    style: 'background:#fffdff',
+    value: '0~1',
   },
   {
-    style: 'background:#b4f7a3',
-    value: '2.5~5',
+    style: 'background:#a6f28e',
+    value: '1~9.9',
   },
   {
-    style: 'background:#6dd969',
-    value: '5~10',
+    style: 'background:#3db93d',
+    value: '10~24.9',
   },
   {
-    style: 'background:#43b635',
-    value: '10~25',
+    style: 'background:#61b8ff',
+    value: '25~49.9',
   },
   {
-    style: 'background:#62b7fb',
-    value: '25~50',
+    style: 'background:#0000fe',
+    value: '50~99.9',
   },
   {
-    style: 'background:#0000f7',
-    value: '50~100',
+    style: 'background:#fa00fa',
+    value: '100~250',
   },
   {
-    style: 'background:#fd00f9',
-    value: '>100',
+    style: 'background:#810041',
+    value: '>250',
   },
 ]);
 const wdLegendNow=ref([])
@@ -620,7 +620,7 @@ const closetip = () => {
   z-index: 10;
   box-shadow: 5px rgba(53, 53, 52, 0.5);
   div {
-    width: 50px;
+    min-width: 50px;
     height: 25px;
     line-height: 25px;
     text-align: center;
@@ -634,7 +634,7 @@ const closetip = () => {
   z-index: 10;
   box-shadow: 5px rgba(53, 53, 52, 0.5);
   div {
-    width: 50px;
+    min-width: 50px;
     height: 25px;
     line-height: 25px;
     text-align: center;

src/views/map/toolBox.vue

@@ -508,6 +508,7 @@ export default defineComponent({
         this.sideMenu()
       }else if (i == 8) {
         // 控制重要站点显隐
+        window.impointNotShow=this.bkclick[8]
        if(this.bkclick[8]){
         // 关闭
         window.clearImpoint()