调整网格文本样式

riku

2025-01-03 68ba3376731aa7a5760ba5fce1dc6ba0c80982b4

调整网格文本样式

 src/api/index.js

@@ -10,7 +10,7 @@
}

if (debug) {
  ip1 = 'http://localhost:8084/';
  ip1 = 'http://192.168.0.138:8084/';
}

const $http = axios.create({

 src/model/Legend.js

@@ -309,24 +309,16 @@
      };
    }

    // if (data == min) {
    //   console.log(data);
    // }

    var per = (max - min) / this._custom.length;
    // 将数据按照颜色数量分隔，求出每一段的数据偏移量
    var per = (max - min) / (this._custom.length - 1);
    // 计算当前数据所在的分段范围
    var i = parseInt((data - min) / per);
    var range = min + i * per
    if (i >= this._custom.length - 1) {
      i = this._custom.length - 2;
      range = min + i * per
    }
    // 如果是最大值，同样分割到最后一段
    if (i == this._custom.length - 1) i--;
    var range = min + i * per;

    let nextIndex = i + 1;
    let nextRange = min + nextIndex * per
    if (nextIndex > this._custom.length - 1) {
      nextIndex = this._custom.length - 1;
      nextRange = min + nextIndex * per
    }
    let nextRange = min + nextIndex * per;

    return {
      color: this._custom[i],
@@ -334,7 +326,7 @@
      range,
      nextRange
    };
  },
  }
};

export { Legend };

 src/utils/map/grid.js

@@ -84,10 +84,11 @@
 * 文本标记
 * 可修改position
 */
function textMaker(position, text) {
function textMaker(position, text, anchor) {
  // eslint-disable-next-line no-undef
  return new AMap.Text({
    text: text,
    anchor,
    position: position,
    style: {
      'font-size': '13px',
@@ -96,7 +97,7 @@
      'background-color': 'transparent',
      'text-shadow': 'black 2px 2px 2px',
      'border-radius': '2px',
      border: '0px',
      border: '1px',
      padding: '4px'
    }
  });
@@ -105,7 +106,7 @@
/**
 * 海量文本标注
 */
function textLabelMarker(position, text, direction) {
function textLabelMarker(position, text, direction, style) {
  // eslint-disable-next-line no-undef
  return new AMap.LabelMarker({
    position: position,
@@ -124,15 +125,16 @@
      content: text ? text + '' : '',
      direction: direction ? direction : 'center',
      style: {
        'border-radius': '.25rem',
        fontSize: 12,
        fillColor: '#fff',
        // strokeColor: 'rgba(0, 0, 0, 0.5)',
        // strokeWidth: 3,
        backgroundColor: '#122b54a9'
        // padding: [3, 10],
        strokeColor: 'rgba(0, 0, 0, 1)',
        strokeWidth: 4,
        // backgroundColor: '#122b54a9',
        padding: [3, 10],
        // backgroundColor: 'yellow',
        // borderColor: '#ccc',
        // borderWidth: 3
        borderColor: '#ccc',
        borderWidth: 30
      }
    }
  });
@@ -202,7 +204,7 @@
    return gridViews;
  },

  drawGridText(points, textViews) {
  drawGridText(points, textViews, anchor) {
    if (textViews) {
      points.forEach((p, i) => {
        textViews[i].setPosition(p.lnglat_GD);
@@ -212,11 +214,11 @@
    } else {
      const _textViews = [];
      points.forEach((p) => {
        const m = textMaker(p.lnglat_GD, p.data);
        const m = textMaker(p.lnglat_GD, p.data, anchor);
        _textViews.push(m);
      });
      map.add(_textViews);
      return _textViews;
      return { textViews: _textViews };
    }
  },

@@ -241,9 +243,6 @@
        animation: false
      });
      const _textViews = [];
      // const m = textLabelMarker([121.329723, 31.240625], 25);
      // _textViews.push(m);
      // labelsLayer.add(m);
      points.forEach((p) => {
        const m = textLabelMarker(p.lnglat_GD, p.data, direction);
        _textViews.push(m);
@@ -251,9 +250,9 @@
        labelsLayer.add(m);
      });
      map.add(labelsLayer);
      map.on('zoomend', () => {
        console.log(map.getZoom());
      });
      // map.on('zoomend', () => {
      //   console.log(map.getZoom());
      // });
      return { textViews: _textViews, labelsLayer };
    }
  },
@@ -277,13 +276,14 @@
  },

  drawGridColorCustom(gridViews, texts) {
    var max,min
    texts.forEach(t => {
    var max, min;
    texts.forEach((t) => {
      if (!t) return;
      if (!max || t > max) {
        max = t
        max = t;
      }
      if (!min || t < min) {
        min = t
        min = t;
      }
    });
    gridViews.forEach((g, i) => {
@@ -291,7 +291,7 @@
      const { color, nextColor, range, nextRange } =
        Legend.getCustomColorAndNext(data, min, max);
      const ratio = (data - range) / (nextRange - range);
      

      const _color = getColorBetweenTwoColors(
        color.map((v) => v * 255),
        nextColor.map((v) => v * 255),
@@ -303,5 +303,5 @@
        fillOpacity: color[3] == 0 ? 0 : 0.7
      });
    });
  },
  }
};

 src/views/satellitetelemetry/SatelliteProxy.js

@@ -23,8 +23,8 @@
function drawPolyline(gridInfo) {
  // 绘制网格
  const points = gridInfo.map((v) => {
    // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    return [v.longitude, v.latitude]
    return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
    // return [v.longitude, v.latitude]
  });
  const gridPoints = gridMapUtil.parseGridPoint(points);
  const gridViews = gridMapUtil.drawPolylines(gridPoints);
@@ -37,10 +37,11 @@
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? (v.pm25 + 'μg/m³') : ''
      data: v.pm25 ? (v.pm25) : ''
      data: v.pm25 ? v.pm25 : ''
    };
  });
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
  return gridMapUtil.drawGridText(data, textViews, 'top-center');
}

// 绘制监测数据排名文本
@@ -49,10 +50,11 @@
    return {
      lnglat_GD: points[i],
      // data: v.pm25 ? ('排名: ' + v.rank) : ''
      data: v.pm25 ? (v.rank) : ''
      data: v.pm25 ? v.rank : ''
    };
  });
  return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
  return gridMapUtil.drawGridText(data, textViews, 'bottom-center');
}

// 绘制监测数据值对应网格颜色

 src/views/satellitetelemetry/SatelliteTelemetry.vue

@@ -50,32 +50,34 @@
import { useSatelliteGridStore } from '@/stores/satellite-grid';

// 查询长宁区行政区划
onMapMounted(()=>{
  // eslint-disable-next-line no-undef
  var district = new AMap.DistrictSearch({
    extensions: "all", //返回行政区边界坐标等具体信息
    level: "district", //设置查询行政区级别为区
  });
  district.search("长宁区", function (status, result) {
    var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
    if (bounds) {
      for (var i = 0; i < bounds.length; i++) {
        //生成行政区划 polygon
        // eslint-disable-next-line no-undef
        var polygon = new AMap.Polygon({
          map: map, //显示该覆盖物的地图对象
          strokeWeight: 3, //轮廓线宽度
          path: bounds[i], //多边形轮廓线的节点坐标数组
          fillOpacity: 0.1, //多边形填充透明度
          fillColor: "#CCF3FF", //多边形填充颜色
          // strokeColor: "#CC66CC", //线条颜色
          strokeColor: "#0066ff", //线条颜色      
        });
function initDistrict() {
  onMapMounted(() => {
    // eslint-disable-next-line no-undef
    var district = new AMap.DistrictSearch({
      extensions: 'all', //返回行政区边界坐标等具体信息
      level: 'district' //设置查询行政区级别为区
    });
    district.search('长宁区', function (status, result) {
      var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
      if (bounds) {
        for (var i = 0; i < bounds.length; i++) {
          //生成行政区划 polygon
          // eslint-disable-next-line no-undef
          var polygon = new AMap.Polygon({
            map: map, //显示该覆盖物的地图对象
            strokeWeight: 3, //轮廓线宽度
            path: bounds[i], //多边形轮廓线的节点坐标数组
            fillOpacity: 0.1, //多边形填充透明度
            fillColor: '#CCF3FF', //多边形填充颜色
            // strokeColor: '#ffffff' //线条颜色
            strokeColor: '#0077ff' //线条颜色
          });
        }
        map.setFitView(); //将覆盖物调整到合适视野
      }
      map.setFitView(); //将覆盖物调整到合适视野
    }
    });
  });
})
}

const satelliteGridStore = useSatelliteGridStore();
const { loading, fetchData } = useFetchData(10000);
@@ -94,10 +96,11 @@
function onSearch(options) {
  satelliteGridStore.fetchGridCell(options.id).then(() => {
    drawGrid(satelliteGridStore.gridInfo);
    initDistrict();
  });
  satelliteGridStore.fetchGridData(options.id).then(()=>{
    max = satelliteGridStore.gridDataList.length
    fetchGridDataDetail(satelliteGridStore.gridDataList)
  satelliteGridStore.fetchGridData(options.id).then(() => {
    max = satelliteGridStore.gridDataList.length;
    // fetchGridDataDetail(satelliteGridStore.gridDataList);
  });
}

@@ -175,11 +178,13 @@
}

function handleRankClick(rankVisible) {
  rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer);
  // rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer);
  rankVisible ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
}

function handleDataClick(dataVisible) {
  dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
  // dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer);
  dataVisible ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
}

function handleColorClick(isStandardColor) {
@@ -203,7 +208,7 @@
  bottom: 10px;
  left: 0;
  right: 0;
  color: #0066ff;
  color: #0077ff;
}

.data-mix {