|
|
@@ -13,7 +13,7 @@
|
|
|
</div>
|
|
|
<div class="btn-box">
|
|
|
<div class="btn1" @click="handleScreenshot">
|
|
|
- <div class="icon1"></div>
|
|
|
+ <div class="icon1" />
|
|
|
当前地图截图导出
|
|
|
</div>
|
|
|
<div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>
|
|
|
@@ -207,6 +207,16 @@ import { Search } from '@element-plus/icons-vue';
|
|
|
import html2canvas from 'html2canvas';
|
|
|
import LayerDetail from './LayerDetail.vue';
|
|
|
import { createWebSocket } from '@/utils/websocket';
|
|
|
+import * as turf from '@turf/turf';
|
|
|
+import Style from 'ol/style/Style';
|
|
|
+import Icon from 'ol/style/Icon';
|
|
|
+import { Fill, Stroke } from 'ol/style';
|
|
|
+import Text from 'ol/style/Text';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ activeMap: String
|
|
|
+});
|
|
|
+const AMapType = ['vectorgraph', 'satellite'];
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const getDrawTool = inject('getDrawTool');
|
|
|
@@ -242,7 +252,7 @@ const lineWidthOptions = reactive([
|
|
|
{ name: '2像素', value: '2' },
|
|
|
{ name: '3像素', value: '3' }
|
|
|
]);
|
|
|
-let showTextEdit = ref();
|
|
|
+let showTextEdit = ref(false);
|
|
|
let lnglat = ref([]);
|
|
|
// 协同
|
|
|
let collaboration = ref(false);
|
|
|
@@ -361,10 +371,10 @@ const clickTab3 = (item, index) => {
|
|
|
mouseToolState.value.title = item.name;
|
|
|
}
|
|
|
const drawTool = getDrawTool();
|
|
|
- const newOptions = drawTool.drawGraphics(mouseToolState.value);
|
|
|
- if (mouseToolState.value.graphicsType !== 'anyLine') {
|
|
|
+ if (mouseToolState.value.graphicsType === 'anyLine') {
|
|
|
drawTool.setDrawEndMethod(handleEndDraw);
|
|
|
} else if (mouseToolState.value.graphicsType !== 'text') {
|
|
|
+ const newOptions = drawTool.drawGraphics(mouseToolState.value);
|
|
|
// 绘制完成事件
|
|
|
initDrawMethod(newOptions);
|
|
|
}
|
|
|
@@ -393,7 +403,11 @@ const handleTextEdit = () => {
|
|
|
};
|
|
|
const handleClickMap = (e) => {
|
|
|
// 获取点击位置的经纬度
|
|
|
- lnglat.value = [e.lnglat.lng, e.lnglat.lat];
|
|
|
+ if (AMapType.includes(props.activeMap)) {
|
|
|
+ lnglat.value = [e.lnglat.lng, e.lnglat.lat];
|
|
|
+ } else {
|
|
|
+ lnglat.value = e.coordinate;
|
|
|
+ }
|
|
|
showTextEdit.value = true;
|
|
|
};
|
|
|
const addText = (textEditState) => {
|
|
|
@@ -420,7 +434,11 @@ const addText = (textEditState) => {
|
|
|
res.text.on('rightclick', handleRightClick);
|
|
|
const map = drawTool.getMap();
|
|
|
// 监听地图点击事件
|
|
|
- map.off('click', handleClickMap);
|
|
|
+ if (AMapType.includes(props.activeMap)) {
|
|
|
+ map.off('click', handleClickMap);
|
|
|
+ } else {
|
|
|
+ map.un('click', handleClickMap);
|
|
|
+ }
|
|
|
sendWebSocket(data);
|
|
|
close();
|
|
|
};
|
|
|
@@ -436,7 +454,11 @@ watch(
|
|
|
() => {
|
|
|
if (mouseToolState.value.graphicsType !== 'text') {
|
|
|
const map = getMap();
|
|
|
- map.off('click', handleClickMap);
|
|
|
+ if (AMapType.includes(props.activeMap)) {
|
|
|
+ map.off('click', handleClickMap);
|
|
|
+ } else {
|
|
|
+ map.un('click', handleClickMap);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
@@ -447,72 +469,158 @@ watch(
|
|
|
const initDrawMethod = (options) => {
|
|
|
const drawTool = getDrawTool();
|
|
|
const mouseTool = drawTool.getMouseTool();
|
|
|
- const onDraw = (event) => {
|
|
|
- mouseTool.off('draw', onDraw);
|
|
|
- close();
|
|
|
- const obj = event.obj;
|
|
|
- const id = nanoid();
|
|
|
- obj._opts.extData = {
|
|
|
- id: id
|
|
|
+ let onDraw;
|
|
|
+ if (AMapType.includes(props.activeMap)) {
|
|
|
+ onDraw = (event) => {
|
|
|
+ mouseTool.off('draw', onDraw);
|
|
|
+ close();
|
|
|
+ const obj = event.obj;
|
|
|
+ const id = nanoid();
|
|
|
+ obj._opts.extData = {
|
|
|
+ id: id
|
|
|
+ };
|
|
|
+ const data: any = deepClone(options);
|
|
|
+ data.id = id;
|
|
|
+ if (options.type == 'marker') {
|
|
|
+ const position = obj.getPosition();
|
|
|
+ data.lnglat = [position.lng, position.lat];
|
|
|
+ data.latitude = position.lat;
|
|
|
+ data.longitude = position.lng;
|
|
|
+ data.icon = data.iconName;
|
|
|
+ data.image = data.iconName;
|
|
|
+ data.imageHover = data.iconName;
|
|
|
+ data.visible = true;
|
|
|
+ obj.setLabel({
|
|
|
+ content: '<div>' + data.title + '</div>',
|
|
|
+ direction: 'top'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (options.type == 'circle') {
|
|
|
+ data.center = [obj.getCenter().lng, obj.getCenter().lat];
|
|
|
+ data.radius = obj.getRadius();
|
|
|
+ } else {
|
|
|
+ const path = obj.getPath();
|
|
|
+ // 将AMap.LngLat对象数组转换为经纬度数组
|
|
|
+ const pathArr = path.map((lngLat) => {
|
|
|
+ // 返回经度和纬度的数组
|
|
|
+ return [lngLat.lng, lngLat.lat];
|
|
|
+ });
|
|
|
+ if (options.type !== 'straightLine') {
|
|
|
+ pathArr.push(pathArr[0]);
|
|
|
+ }
|
|
|
+ data.path = pathArr;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (options.type == 'measureArea') {
|
|
|
+ const AMap = getDrawTool().getAMap();
|
|
|
+ const map = getMap();
|
|
|
+ // 计算区域面积
|
|
|
+ const area = Math.round(AMap.GeometryUtil.ringArea(data.path));
|
|
|
+ const text = new AMap.Text({
|
|
|
+ position: data.path[data.path.length - 1],
|
|
|
+ text: '区域面积' + area + '平方米',
|
|
|
+ offset: new AMap.Pixel(-20, -20)
|
|
|
+ });
|
|
|
+ data.area = area;
|
|
|
+ map.add(text);
|
|
|
+ overlays.push([obj, text]);
|
|
|
+ overlaysData.push(data);
|
|
|
+ commit(deepClone(overlaysData));
|
|
|
+ } else {
|
|
|
+ overlays.push(obj);
|
|
|
+ overlaysData.push(data);
|
|
|
+ commit(deepClone(overlaysData));
|
|
|
+ console.log(overlaysData);
|
|
|
+ }
|
|
|
+ // 右击进入编辑
|
|
|
+ obj.on('rightclick', handleRightClick);
|
|
|
+ // 发送
|
|
|
+ sendWebSocket(data);
|
|
|
};
|
|
|
- const data: any = deepClone(options);
|
|
|
- data.id = id;
|
|
|
- if (options.type == 'marker') {
|
|
|
- const position = obj.getPosition();
|
|
|
- data.lnglat = [position.lng, position.lat];
|
|
|
- data.latitude = position.lat;
|
|
|
- data.longitude = position.lng;
|
|
|
- data.icon = data.iconName;
|
|
|
- data.image = data.iconName;
|
|
|
- data.imageHover = data.iconName;
|
|
|
- data.visible = true;
|
|
|
- obj.setLabel({
|
|
|
- content: '<div>' + data.title + '</div>',
|
|
|
- direction: 'top'
|
|
|
- });
|
|
|
- } else {
|
|
|
- const path = obj.getPath();
|
|
|
- // 将AMap.LngLat对象数组转换为经纬度数组
|
|
|
- const pathArr = path.map((lngLat) => {
|
|
|
- // 返回经度和纬度的数组
|
|
|
- return [lngLat.lng, lngLat.lat];
|
|
|
- });
|
|
|
- if (options.type !== 'straightLine') {
|
|
|
- pathArr.push(pathArr[0]);
|
|
|
+ mouseTool.on('draw', onDraw);
|
|
|
+ } else {
|
|
|
+ onDraw = (event) => {
|
|
|
+ mouseTool.un('draw', onDraw);
|
|
|
+ close();
|
|
|
+ const feature = event.feature;
|
|
|
+ const geometry = feature.getGeometry();
|
|
|
+ const id = nanoid();
|
|
|
+ feature.set('id', id);
|
|
|
+ const data: any = deepClone(options);
|
|
|
+ data.id = id;
|
|
|
+ if (options.type == 'marker') {
|
|
|
+ const img = new Image();
|
|
|
+ img.onload = () => {
|
|
|
+ // 图片加载完成后，可以访问其 width 和 height 属性
|
|
|
+ const width = img.width;
|
|
|
+ const height = img.height;
|
|
|
+ const style = new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: options.icon,
|
|
|
+ anchor: [0.5, 0.5], // 图标锚点，通常是图标的中心点
|
|
|
+ anchorXUnits: 'fraction',
|
|
|
+ anchorYUnits: 'fraction',
|
|
|
+ size: [width, height],
|
|
|
+ scale: !!options.size[0] ? options.size[0] / width : 1
|
|
|
+ }),
|
|
|
+ // text: new Text({
|
|
|
+ // text: data.title, // 使用属性中的值作为文本
|
|
|
+ // font: '14px sans-serif',
|
|
|
+ // fill: new Fill({
|
|
|
+ // color: '#ffff'
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ });
|
|
|
+ feature.setStyle(style);
|
|
|
+ const position = geometry.getCoordinates();
|
|
|
+ data.lnglat = position;
|
|
|
+ data.latitude = position[0];
|
|
|
+ data.longitude = position[1];
|
|
|
+ data.icon = data.iconName;
|
|
|
+ data.image = data.iconName;
|
|
|
+ data.imageHover = data.iconName;
|
|
|
+ data.visible = true;
|
|
|
+ };
|
|
|
+ img.src = options.icon; // 设置图片的 URL，触发加载
|
|
|
+ } else {
|
|
|
+ if (options.type == 'circle') {
|
|
|
+ data.center = [geometry.getCenter().lng, geometry.getCenter().lat];
|
|
|
+ data.radius = geometry.getRadius();
|
|
|
+ } else {
|
|
|
+ const coordinates = geometry.getCoordinates();
|
|
|
+ const pathArr = coordinates[0];
|
|
|
+ data.path = pathArr;
|
|
|
+ }
|
|
|
}
|
|
|
- data.path = pathArr;
|
|
|
- if (options.type == 'circle') {
|
|
|
- data.center = [obj.getCenter().lng, obj.getCenter().lat];
|
|
|
- data.radius = obj.getRadius();
|
|
|
+ if (options.type == 'measureArea') {
|
|
|
+ // 计算区域面积
|
|
|
+ const area = turf.area(turf.polygon([data.path]));
|
|
|
+
|
|
|
+
|
|
|
+ // const text = new AMap.Text({
|
|
|
+ // position: data.path[data.path.length - 1],
|
|
|
+ // text: '区域面积' + area + '平方米',
|
|
|
+ // offset: new AMap.Pixel(-20, -20)
|
|
|
+ // });
|
|
|
+ data.area = area;
|
|
|
+ // map.add(text);
|
|
|
+ // overlays.push([feature, text]);
|
|
|
+ overlays.push(feature);
|
|
|
+ overlaysData.push(data);
|
|
|
+ commit(deepClone(overlaysData));
|
|
|
+ } else {
|
|
|
+ overlays.push(feature);
|
|
|
+ overlaysData.push(data);
|
|
|
+ commit(deepClone(overlaysData));
|
|
|
+ console.log(overlaysData);
|
|
|
}
|
|
|
- }
|
|
|
- if (options.type == 'measureArea') {
|
|
|
- const AMap = getDrawTool().getAMap();
|
|
|
- const map = getMap();
|
|
|
- // 计算区域面积
|
|
|
- const area = Math.round(AMap.GeometryUtil.ringArea(data.path));
|
|
|
- const text = new AMap.Text({
|
|
|
- position: data.path[data.path.length - 1],
|
|
|
- text: '区域面积' + area + '平方米',
|
|
|
- offset: new AMap.Pixel(-20, -20)
|
|
|
- });
|
|
|
- data.area = area;
|
|
|
- map.add(text);
|
|
|
- overlays.push([obj, text]);
|
|
|
- overlaysData.push(data);
|
|
|
- commit(deepClone(overlaysData));
|
|
|
- } else {
|
|
|
- overlays.push(obj);
|
|
|
- overlaysData.push(data);
|
|
|
- commit(deepClone(overlaysData));
|
|
|
- console.log(overlaysData);
|
|
|
- }
|
|
|
- // 右击进入编辑
|
|
|
- obj.on('rightclick', handleRightClick);
|
|
|
- // 发送
|
|
|
- sendWebSocket(data);
|
|
|
- };
|
|
|
- mouseTool.on('draw', onDraw);
|
|
|
+ // 右击进入编辑
|
|
|
+ feature.on('rightclick', handleRightClick);
|
|
|
+ // 发送
|
|
|
+ sendWebSocket(data);
|
|
|
+ };
|
|
|
+ mouseTool.on('drawend', onDraw);
|
|
|
+ }
|
|
|
};
|
|
|
const handleEndDraw = (options, obj) => {
|
|
|
const drawTool = getDrawTool();
|
