|
|
@@ -52,6 +52,7 @@
|
|
|
</div>
|
|
|
<div class="draw-item" @click="openDraw">{{ mouseToolState.drawing ? '关闭绘制' : '开启绘制' }}</div>
|
|
|
<div class="draw-item" @click="handleUndo">撤销</div>
|
|
|
+ <div id="control-box"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -59,11 +60,16 @@
|
|
|
import { useHistory } from '@/hooks/useHistory';
|
|
|
import { nanoid } from 'nanoid';
|
|
|
import { deepClone } from '@/utils';
|
|
|
+import * as turf from '@turf/turf';
|
|
|
|
|
|
interface ListItem {
|
|
|
label: string;
|
|
|
value: string;
|
|
|
}
|
|
|
+const props = defineProps({
|
|
|
+ activeMap: String
|
|
|
+});
|
|
|
+const AMapType = ['vectorgraph', 'satellite'];
|
|
|
const getDrawTool = inject('getDrawTool');
|
|
|
const getMap = inject('getMap');
|
|
|
const emits = defineEmits(['handleAnalysisData']);
|
|
|
@@ -85,7 +91,11 @@ watch(
|
|
|
drawOptions.drawType = mouseToolState.drawType;
|
|
|
drawOptions.graphicsType = mouseToolState.graphicsType;
|
|
|
drawTool.drawGraphics2(drawOptions);
|
|
|
- drawTool.getMouseTool().on('draw', onDraw);
|
|
|
+ if (AMapType.includes(props.activeMap)) {
|
|
|
+ drawTool.getMouseTool().on('draw', onDraw);
|
|
|
+ } else {
|
|
|
+ drawTool.getMouseTool().on('drawend', onDraw2);
|
|
|
+ }
|
|
|
} else {
|
|
|
mouseToolState.drawing = false;
|
|
|
drawTool.closeDraw();
|
|
|
@@ -175,6 +185,7 @@ onClickOutside(selectBoxRef3, () => {
|
|
|
const openDraw = () => {
|
|
|
mouseToolState.drawing = !mouseToolState.drawing;
|
|
|
};
|
|
|
+// 高德地图绘制结束
|
|
|
const onDraw = (event) => {
|
|
|
const obj = event.obj;
|
|
|
const id = nanoid();
|
|
|
@@ -201,7 +212,6 @@ const onDraw = (event) => {
|
|
|
overlays.push(obj);
|
|
|
overlaysData.push(data);
|
|
|
commit(deepClone(overlaysData));
|
|
|
- console.log(data);
|
|
|
// 右击进入编辑
|
|
|
obj.on('rightclick', handleRightClick);
|
|
|
if (overlaysData.length === 1) {
|
|
|
@@ -215,10 +225,68 @@ const onDraw = (event) => {
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
+// 粤政图绘制结束
|
|
|
+const onDraw2 = (event) => {
|
|
|
+ const feature = event.feature;
|
|
|
+ const geometry = feature.getGeometry();
|
|
|
+ const geometryType = geometry.getType();
|
|
|
+ const id = nanoid();
|
|
|
+ feature.set('id', id);
|
|
|
+ const data: any = {
|
|
|
+ id: id,
|
|
|
+ type: drawOptions.graphicsType,
|
|
|
+ // color: feature._opts.strokeColor,
|
|
|
+ // drawType: feature._opts.fillOpacity === 0 ? '1' : '2'
|
|
|
+ };
|
|
|
+ // 获取绘制的几何信息（包括经纬度）
|
|
|
+ if (geometryType === 'Point') {
|
|
|
+ const coordinates = geometry.getCoordinates();
|
|
|
+ console.log('绘制了一个点:', coordinates);
|
|
|
+ } else if (geometryType === 'LineString') {
|
|
|
+ const coordinates = geometry.getCoordinates();
|
|
|
+ console.log('绘制了一条线:', coordinates);
|
|
|
+ // 线的坐标是点的数组，每个点都是一个经纬度数组
|
|
|
+ } else if (geometryType === 'Polygon') {
|
|
|
+ const coordinates = geometry.getCoordinates();
|
|
|
+ console.log('绘制了一个多边形:', coordinates);
|
|
|
+ // 多边形的坐标是环的数组，每个环是点的数组，每个点都是一个经纬度数组
|
|
|
+ } else if (geometryType === 'Circle') {
|
|
|
+ data.center = geometry.getCenter();
|
|
|
+ data.radius = geometry.getRadius();
|
|
|
+ const data2 = turf.sector(data.center, data.radius, 0, 360);
|
|
|
+ const pathArr = data2.geometry.coordinates[0];
|
|
|
+ data.path = pathArr;
|
|
|
+ console.log('绘制了一个圆:', data);
|
|
|
+ }
|
|
|
+ // const path = geometry.getCoordinates();
|
|
|
+ // debugger
|
|
|
+ // // 将AMap.LngLat对象数组转换为经纬度数组
|
|
|
+ // const pathArr = path.map((lngLat) => {
|
|
|
+ // // 返回经度和纬度的数组
|
|
|
+ // return [lngLat.lng, lngLat.lat];
|
|
|
+ // });
|
|
|
+ // data.path = pathArr;
|
|
|
+ overlays.push(feature);
|
|
|
+ overlaysData.push(data);
|
|
|
+ commit(deepClone(overlaysData));
|
|
|
+ // 右击进入编辑
|
|
|
+ feature.on('contextmenu', handleRightClick);
|
|
|
+ if (overlaysData.length === 1) {
|
|
|
+ analysisSpatial(data);
|
|
|
+ }
|
|
|
+ // // 点击空间分析
|
|
|
+ // feature.on('click', function () {
|
|
|
+ // // 没在编辑时
|
|
|
+ // if (!mouseToolState.drawing) {
|
|
|
+ // analysisSpatial(data);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+};
|
|
|
let rightClickObj;
|
|
|
// 图形右击事件
|
|
|
let initContextMenu = false;
|
|
|
const handleRightClick = (event) => {
|
|
|
+ debugger
|
|
|
rightClickObj = event.target;
|
|
|
const contextMenu = getDrawTool().getContextMenu();
|
|
|
if (!initContextMenu) {
|
|
|
@@ -283,7 +351,7 @@ const handleUndo = () => {
|
|
|
fillColor: restoreData.color,
|
|
|
fillOpacity: restoreData.drawType === '1' ? 0 : 0.5
|
|
|
};
|
|
|
- if (restoreData.type === 'circlr') {
|
|
|
+ if (restoreData.type === 'circle') {
|
|
|
newData.center = restoreData.center;
|
|
|
newData.radius = restoreData.radius;
|
|
|
}
|
|
|
@@ -340,6 +408,28 @@ const analysisSpatial = (data) => {
|
|
|
}
|
|
|
emits('handleAnalysisData', location);
|
|
|
};
|
|
|
+onMounted(() => {
|
|
|
+ // 监听右击事件
|
|
|
+ getMap().on('contextmenu', (event) => {
|
|
|
+ event.preventDefault(); // 阻止默认上下文菜单
|
|
|
+
|
|
|
+ // 获取右击位置的要素
|
|
|
+ const featuresAtPixel = getMap().getFeaturesAtPixel(event.pixel);
|
|
|
+
|
|
|
+ // 检查是否有要素在右击位置
|
|
|
+ if (featuresAtPixel && featuresAtPixel.length > 0) {
|
|
|
+ // 遍历要素并检查条件（这里可以根据需要添加条件）
|
|
|
+ featuresAtPixel.forEach(function(feature) {
|
|
|
+ // 执行你想要的动作，例如显示一个信息框或弹出菜单
|
|
|
+ console.log('右击了要素：', feature.get('id')); // 假设要素有一个'id'属性
|
|
|
+
|
|
|
+ // 你可以在这里显示一个自定义的右击菜单
|
|
|
+ // 例如，创建一个<div>元素，设置其内容和样式，然后添加到DOM中
|
|
|
+ // 并监听菜单项的点击事件来执行相应的动作
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+})
|
|
|
onBeforeUnmount(() => {
|
|
|
//
|
|
|
});
|
