riku
2025-03-05 4097cc9ad6c60bbb5e9864d3f54a37cfbb40026e
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>