/* eslint-disable no-undef */ import { watch } from 'vue'; import { map, satellite, onMapMounted } from './index_old'; import { useToolboxStore } from '@/stores/toolbox'; import { DialogUtil } from '@/utils/map/dialog'; const toolboxStore = useToolboxStore(); watch( () => toolboxStore.selectedDistrict, (nV, oV) => { if (nV != oV && toolboxStore.districtStatus) { if (activeDistrict) map.remove(activeDistrict); drawDistrict(toolboxStore.selectedDistrict); } } ); /** * 坐标拾取鼠标点击回调事件 */ var _locationMarker, _locationText; function _coorPickListener(e) { var text = `经度: ${e.lnglat.getLng()}
纬度: ${e.lnglat.getLat()}`; if (_locationMarker == undefined) { var textM = new AMap.Text({ style: { 'font-size': '12px' }, text: text, position: e.lnglat, offset: new AMap.Pixel(0, 30) }); var marker = new AMap.Marker({ position: e.lnglat // icon: icon, // anchor: 'top-center', // content: '' }); map.add(marker); map.add(textM); _locationMarker = marker; _locationText = textM; } else { _locationMarker.setPosition(e.lnglat); _locationText.setPosition(e.lnglat); _locationText.setText(text); } } let districtPolygonMap = new Map(); let activeDistrict = undefined; // 绘制区县边界 function drawDistrict(districtName, isNew) { onMapMounted(() => { if (!isNew && districtPolygonMap.has(districtName)) { const districtPolygon = districtPolygonMap.get(districtName); map.remove(districtPolygon); map.add(districtPolygon); activeDistrict = 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 const districtPolygon = new AMap.Polygon({ map: map, //显示该覆盖物的地图对象 strokeWeight: 1, //轮廓线宽度 path: bounds[i], //多边形轮廓线的节点坐标数组 fillOpacity: 0.6, //多边形填充透明度 // fillColor: '#CCF3FF', //多边形填充颜色 fillColor: '#0077ff', // strokeColor: '#ffffff' //线条颜色 strokeColor: 'white', //线条颜色 zIndex: 9 }); districtPolygonMap.set(districtName, districtPolygon); activeDistrict = districtPolygon; } // map.setFitView(); //将覆盖物调整到合适视野 } }); } }); } export default { /** * 开关行政区划 * @param {boolean} value */ toggleDistrict(value) { if (value) { if (toolboxStore.selectedDistrict) drawDistrict(toolboxStore.selectedDistrict); } else { if (activeDistrict) map.remove(activeDistrict); } toolboxStore.districtStatus = value; }, /** * 开关地物标注 * @param {boolean} value */ toggleFeatures(value) { value ? map.setFeatures(['bg', 'road', 'point', 'building']) : map.setFeatures(['bg', 'road']); toolboxStore.featuresStatus = value; }, /** * 开关卫星地图 * @param {boolean} value */ toggleSatellite(value) { value ? satellite.show() : satellite.hide(); toolboxStore.satelliteStatus = value; }, /** * 开关控制罗盘 * @param {boolean} value */ toggleControlbar(value) { // value ? controlbar.show() : controlbar.hide(); value ? $('.amap-controlbar').show() : $('.amap-controlbar').hide(); toolboxStore.controlbarStatus = value; }, /** * 开关坐标拾取 * @param {boolean} value */ toggleCoorPicking(value) { if (value) { map.on('click', _coorPickListener); } else { map.off('click', _coorPickListener); map.remove([_locationMarker, _locationText]); _locationMarker = undefined; _locationText = undefined; } toolboxStore.coorPickStatus = value; }, /** * 开关数据弹框 */ toggleDataDialogStatus(value) { toolboxStore.dataDialogStatus = value; if (value) { DialogUtil.openWindow(); } else { DialogUtil.closeWindow(); } }, /** * 开关溯源清单 */ toggleSceneSearch(value) { toolboxStore.sceneSearchStatus = value; } };