临时：路网版本

riku

2025-03-05 4097cc9ad6c60bbb5e9864d3f54a37cfbb40026e

 src/views/HomePage.vue

@@ -2,12 +2,63 @@
  <BaseMap></BaseMap>
  <div class="overlay-container">
    <CoreHeader></CoreHeader>
    <MapToolbox></MapToolbox>
    <el-row class="dropdown-wrap">
      <MapToolbox></MapToolbox>
      <!-- <SatelliteTelemetry></SatelliteTelemetry> -->
      <!-- <MissionManage></MissionManage> -->
      <ConfigManage></ConfigManage>
      <!-- <MapLocation></MapLocation> -->
      <SceneSearch></SceneSearch>
      <MapScene></MapScene>
    </el-row>
    <CoreMenu></CoreMenu>
    <router-view></router-view>
  </div>
</template>

<script setup></script>
<script setup>
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>
.overlay-container {
@@ -22,4 +73,12 @@
  /* padding: 4px; */
  pointer-events: none;
}

.dropdown-wrap {
  /* background-color: aliceblue; */
  position: absolute;
  top: 10px;
  left: 2px;
  gap: 4px;
}
</style>