<template>
|
<BaseMap></BaseMap>
|
<div class="overlay-container">
|
<CoreHeader></CoreHeader>
|
<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>
|
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 {
|
/* background: transparent; */
|
position: absolute;
|
min-height: var(--screen-min-height);
|
min-width: var(--screen-min-width);
|
width: 100vw;
|
height: 100vh;
|
top: 0;
|
left: 0;
|
/* padding: 4px; */
|
pointer-events: none;
|
}
|
|
.dropdown-wrap {
|
/* background-color: aliceblue; */
|
position: absolute;
|
top: 10px;
|
left: 2px;
|
gap: 4px;
|
}
|
</style>
|
