临时：路网版本

riku

2025-03-05 4097cc9ad6c60bbb5e9864d3f54a37cfbb40026e

临时：路网版本

 index.html

@@ -16,7 +16,7 @@
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.5&key=520c5e5cf44c7793104e500cbf0ed711&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder"
      src="https://webapi.amap.com/maps?v=1.4.5&key=520c5e5cf44c7793104e500cbf0ed711&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder,AMap.DistrictSearch"
    ></script>
    <!-- <script src="/src/lib/jquery-3.5.1.min.js"></script> -->
    <script type="module" src="/src/main.js"></script>

 src/model/Factor.js

@@ -60,7 +60,8 @@
  this.standardMin = -1; //监测因子类型对应的标准最小值
  this.standardMax = -1; //监测因子类型对应的标准最大值

  this.legendType = Legend.S_TYPE; //图例模式
  // this.legendType = Legend.S_TYPE; //图例模式
  this.legendType = Legend.D_TYPE; //图例模式

  if (options != undefined) {
    this.datas = options.datas;

 src/model/Legend.js

@@ -142,13 +142,21 @@
    ]
  },

  // _custom: [
  //   [0.05, 0.9, 0.03, 0.75],
  //   [0.3, 0.65, 0.02, 0.75],
  //   [0.87, 0.92, 0.03, 0.75],
  //   [0.8, 0.67, 0.04, 0.75],
  //   [0.92, 0.28, 0.07, 0.75],
  //   [0.6, 0.05, 0.05, 0.75]
  // ],
  _custom: [
    [0.05, 0.9, 0.03, 0.75],
    [0.3, 0.65, 0.02, 0.75],
    [0.87, 0.92, 0.03, 0.75],
    [0.8, 0.67, 0.04, 0.75],
    [0.92, 0.28, 0.07, 0.75],
    [0.6, 0.05, 0.05, 0.75]
    [0, 0.89, 0, 0.75],
    [1, 1, 0, 0.75],
    [1, 0.49, 0, 0.75],
    [1, 0, 0, 0.75],
    [0.6, 0, 0.3, 0.75],
    [0.49, 0, 0.14, 0.75]
  ],

  getStandardRange: function (name) {
@@ -241,7 +249,7 @@

  getCustomColor: function (data, min, max) {
    var per = (max - min) / this._custom.length;
    var i = parseInt(data / per);
    var i = parseInt((data - min) / per);
    if (i >= this._custom.length) {
      i = this._custom.length - 1;
    }

 src/utils/map/index_old.js

@@ -47,7 +47,7 @@
    alwaysRender: false,
    showLabel: true,
    showBuildingBlock: true,
    mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
    // mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
    features: ['bg', 'road'],
    pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
    viewMode: '3D', // 地图模式

 src/utils/map/line.js

@@ -40,8 +40,6 @@
      const lastC = colors[i - 1];
      if (distance > 500 || c != lastC) {
        let _path, _color;
        // 当两点距离超过500时，认为两点不连续，不绘制连线
        if (distance > 500) {
          _path = path.slice(sIndex, i);
          _color = getHexColor(
            lastC.map((v, index) => {
@@ -52,28 +50,21 @@
              }
            })
          );
        // 当两点距离超过500时，认为两点不连续，不绘制连线
        if (distance > 500) {
          sIndex = i;
        } else {
          _path = path.slice(sIndex, i + 1);
          _color = getHexColor(
            c.map((v, index) => {
              if (index < c.length - 1) {
                return v * 255;
              } else {
                return v;
              }
            })
          );
          sIndex = i - 1;
        }

        // 创建折线实例
        const polyline = newPolyline(_path, _color);
        _polylineArr.push(polyline);

        sIndex = i;
      }
    }
    if (sIndex == 0) {
      const c = colors[sIndex];
    if (sIndex < path.length - 1) {
      const c = colors[path.length - 1];
      const _path = path.slice(sIndex, path.length);
      const _color = getHexColor(
        c.map((v, index) => {
          if (index < c.length - 1) {
@@ -83,7 +74,7 @@
          }
        })
      );
      const polyline = newPolyline(path, _color);
      const polyline = newPolyline(_path, _color);
      _polylineArr.push(polyline);
    }
    // 将折线添加至地图实例

 src/views/HomePage.vue

@@ -17,7 +17,47 @@
</template>

<script setup>
import SatelliteTelemetry from '@/views/satellitetelemetry/SatelliteTelemetry.vue';
import { map, onMapMounted } from '@/utils/map/index_old';

let districtPolygon;
// 绘制区县边界
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (districtPolygon && !isNew) {
      map.remove(districtPolygon);
      map.add(districtPolygon);
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, 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
            districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 1, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0.6, //多边形填充透明度
              // fillColor: '#CCF3FF', //多边形填充颜色
              fillColor: '#0077ff',
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: 'white', //线条颜色
              zIndex: 9
            });
          }
          map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}

drawDistrict('长宁区');
</script>

<style scoped>