<template>
<div class="full">
<div class="park-map-nav">
<div class="park-map-nav-item">
<button-vue
icon-class="icomoon-common_add_sm"
:name="$t('add')"
:disabled="getActiveMode('batchSelect')"
:type="getModel('addPark')"
@click="addPark('addPark')"
></button-vue>
<button-vue
icon-class="icomoon-common_add_all"
:name="$t('hcp_dock_batch_add')"
:disabled="getActiveMode('batchSelect')"
:type="getModel('batchAddPark')"
@click="batchAddPark('batchAddPark')"
></button-vue>
<button-vue
icon-class="h-icon-copy"
:name="$t('hcp_dock_config_copy')"
:disabled="!(addNewData.ID)"
@click="handleCopy"
></button-vue>
<span class="line"></span>
<button-vue
icon-class="icomoon-common_sel"
:name="$t('hcp_dock_batch_select')"
:type="getModel('batchSelect')"
@click="batchSelect('batchSelect')"
></button-vue>
<button-vue
icon-class="icomoon-common_delete"
:disabled="!selectList.length"
:name="$t('delete')"
@click="deleteSelectPark"
></button-vue>
<span class="line"></span>
<button-vue
:title="$t('hcp_dock_vertically_center')"
icon-class="icomoon-common_align_h_center"
:disabled="!selectList.length"
@click="doCenter('vertical')"
></button-vue>
<button-vue
:title="$t('hcp_dock_horizontally_center')"
icon-class="icomoon-common_align_v_center"
:disabled="!selectList.length"
@click="doCenter('horizontally')"
></button-vue>
</div>
<div class="park-map-nav-item right">
<button-vue
:name="$t('hcp_dock_update_map')"
type="primary"
@click="changeMap"
></button-vue>
<button-vue
:name="$t('hcp_dock_delete_map')"
type="primary"
@click="deleteMap"
></button-vue>
</div>
</div>
<el-button icon="icon_return_origin" class="reset-map" :title="$t('hcp_dock_config_reset_btn')" @click="toFit" />
<div id="dockMapConfig" ref="dockMapConfig" @contextmenu.prevent="mouseclick()" class="dock-map-config" :class="{'active-park':getActiveMode('addPark')}"></div>
<div v-show="getActiveMode('addPark') || getActiveMode('batchSelect') || getActiveMode('batchAddPark')" class="pop1" ref="pop1">
{{ popTip() }}
</div>
<div v-show="getPopModel('addPark') && !startDraging" id="popContent" ref="popContent">
<CreateForm ref="createForm" :data="addNewData" @onSubmit="onSubmit" @delete="deleteDock"></CreateForm>
</div>
<div v-show="getPopModel('batchAddPark')" id="batchPopContent" ref="batchPopContent">
<BatchCreateForm @onSubmit="batchAdd" ref="batchPopForm"></BatchCreateForm>
</div>
</div>
</template>
<script>
import { createMapInstance, utils, createOverContainer, createContent, createContainerInstance, destroyOverContainer } from './ibcmap.js';
import ButtonVue from './Button';
import CreateForm from './CreateForm';
import BatchCreateForm from './BatchCreateForm';
import { mapState } from 'vuex';
import isapi from '@/DockManagement/api/map/isapi.ts';
import eventBus from '@/Common/service/event/eventBus';
import isapiHelper from '@/Common/http/hcp/isapiHelper.js';
import _ from 'lodash';
import { Style, Fill, Text, Stroke, Circle} from 'ol/style';
import { DragBox, Draw } from 'ol/interaction';
import { mouseActionButton } from 'ol/events/condition';
import {
getMathCenterHorizontally,
getMathCenterVertical
} from '@/DockManagement/api/map/utils';
import DomSize from './domsize.js';
import { containsXY } from 'ol/extent';
import * as turf from '@turf/turf';
import * as ol from 'ol';
export default {
name: 'MapConfig',
components: { ButtonVue, CreateForm, BatchCreateForm },
props: {
mapData: {
type: Object,
default: () => ({})
}
},
data() {
return {
AddHotRegionComposition: null,
map: null,
parkCreatePlugin: null,
PBatchSelectPlugin: null,
BatchCreateParkPlugin: null,
disableBigSize: false,
disableSmallSize: false,
disableSort: true,
selectList: [],
model: '',
activeMode: '',
popMode: '',
pointContainer: null,
pointContent: null,
OverContainer: null,
posX: 10,
posY: 20,
offset: 50,
originExtent: null,
addNewData: {
Name: '',
ID: '',
coordinate: []
},
lineDrawList: [],
draw: null,
drag: null,
lineClick: 0,
modify: null,
timer: null,
lineDraw: null,
addRectangleDraw: null,
startDraging: false
};
},
computed: {
...mapState('dock', {
dockID: (state) => state.dockID
})
},
watch: {
mapData: {
handler(val) {
if (val) {
this.destroy();
setTimeout(() => {
this.initMap();
}, 300);
}
},
deep: true
}
},
created() {
eventBus.$on('dragDockSuccess', (info) => {
const contents = this.pointContainer.getContents();
const content = contents.find(el => el._feature.id_ === info.id);
this.dragCb(info.coor, info.id, content.name);
});
eventBus.$on('startDockDraging', () => {
if (!this.startDraging) {
this.startDraging = true;
}
});
},
mounted() {
this.initMap();
this.bindDom();
},
beforeDestroy() {
eventBus.$off('dragDockSuccess');
this.uninstall();
},
methods: {
judgeIsInMap(coor) {
let isExist = coor[0].find(el => this.IsPointInPolygon(el[0], el[1], this.originExtent));
return !!isExist;
},
IsPointInPolygon(testLat, testLon, polygonPoints) {
let bool = false;
const minX = polygonPoints[0];
const minY = polygonPoints[1];
const maxX = polygonPoints[2];
const maxY = polygonPoints[3];
if (testLat < minX || testLat > maxX) {
bool = true;
}
if (testLon < minY || testLon > maxY) {
bool = true;
}
return bool;
},
judgeIsInMapA(coor) {
const overPoints = [];
let overList = [];
coor[0].forEach(el => {
const over = this.IsPointInPolygonA(el[0], el[1], this.originExtent);
if (over.length) {
overList = [...overList, ...over];
overPoints.push(el);
}
});
overList = [...new Set(overList)];
return {
overPoints,
overList
};
},
IsPointInPolygonA(testLat, testLon, polygonPoints) {
let over = [];
const minX = polygonPoints[0];
const minY = polygonPoints[1];
const maxX = polygonPoints[2];
const maxY = polygonPoints[3];
if (testLat < minX) {
over.push('L');
}
if (testLat > maxX) {
over.push('R');
}
if (testLon < minY) {
over.push('B');
}
if (testLon > maxY) {
over.push('T');
}
return over;
},
toFit() {
this.map.olMap.updateSize();
this.fitExtent(this.originExtent);
},
bindDom() {
const el = this.$refs.dockMapConfig;
DomSize.bind(el, () => {
if (this.timer) {
return false;
}
this.timer = setTimeout(() => {
this.map.olMap.updateSize();
clearTimeout(this.timer);
this.timer = null;
}, 100);
});
},
popTip() {
let tip = '';
if (this.activeMode === 'addPark') {
tip = this.$t('hcp_dock_config_mapClickTip1');
} else if (this.activeMode === 'batchSelect') {
tip = this.$t('hcp_dock_map_select_dock_tips');
} else if (this.activeMode === 'batchAddPark') {
if (this.lineClick === 0) {
tip = this.$t('hcp_dock_config_addStartDockTip');
} else {
tip = this.$t('hcp_dock_config_addEndDockTip');
}
}
return tip;
},
async handleCopy() {
let id = this.addNewData.ID;
const contents = this.pointContainer.getContents();
const filterContents = contents.filter(el => el._feature.id_ && el._feature.id_ !== id);
const copyItem = contents.find(el => el._feature.id_ === id);
const dealCoor = this.offsetContent(copyItem, filterContents);
let dealOverCoor = dealCoor;
const { overPoints, overList } = this.judgeIsInMapA([dealCoor]);
if (overPoints.length) {
if (overList.length === 1) {
if (overList.includes('B')) {
const yList = overPoints.map(el => el[1]);
const minY = Math.min(...yList);
const target1 = overPoints.find(el => el[1] === minY);
const pix1 = utils.calc.getPixelFromCoordinate(this.map, target1);
const pix2 = utils.calc.getPixelFromCoordinate(this.map, [target1[0], this.originExtent[1]]);
const offset = Math.abs(pix2[1] - pix1[1]);
dealOverCoor = dealCoor.map(el => {
const pix = utils.calc.getPixelFromCoordinate(this.map, el);
const copyCoordinate = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1, pix[1] * 1 - offset]);
return copyCoordinate;
});
} else if (overList.includes('R')) {
const xList = overPoints.map(el => el[0]);
const maxX = Math.max(...xList);
const target1 = overPoints.find(el => el[0] === maxX);
const pix1 = utils.calc.getPixelFromCoordinate(this.map, target1);
const pix2 = utils.calc.getPixelFromCoordinate(this.map, [this.originExtent[2], target1[1]]);
const offset = Math.abs(pix2[0] - pix1[0]);
dealOverCoor = dealCoor.map(el => {
const pix = utils.calc.getPixelFromCoordinate(this.map, el);
const copyCoordinate = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 - offset, pix[1] * 1]);
return copyCoordinate;
});
}
} else if (overList.length === 2) {
const yList = overPoints.map(el => el[1]);
const minY = Math.min(...yList);
const target1 = overPoints.find(el => el[1] === minY);
const pix1 = utils.calc.getPixelFromCoordinate(this.map, target1);
const pix2 = utils.calc.getPixelFromCoordinate(this.map, [target1[0], this.originExtent[1]]);
const offsetY = Math.abs(pix2[1] - pix1[1]);
const xList = overPoints.map(el => el[0]);
const maxX = Math.max(...xList);
const target2 = overPoints.find(el => el[0] === maxX);
const pix3 = utils.calc.getPixelFromCoordinate(this.map, target2);
const pix4 = utils.calc.getPixelFromCoordinate(this.map, [this.originExtent[2], target2[1]]);
const offsetX = Math.abs(pix4[0] - pix3[0]);
dealOverCoor = dealCoor.map(el => {
const pix = utils.calc.getPixelFromCoordinate(this.map, el);
const copyCoordinate = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 - offsetX, pix[1] * 1 - offsetY]);
return copyCoordinate;
});
}
}
const params = this.offsetParams(copyItem, filterContents, dealOverCoor);
try {
isapi.addDockSpace(this.dockID, [params]).then(() => {
this.initDocks(params);
});
} catch (e) {
console.log(e);
}
},
offsetContent(content) {
const coordinate = content.coordinate[0];
const dealCoor = coordinate.map(el => {
const pix = utils.calc.getPixelFromCoordinate(this.map, el);
const copyCoordinate = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 + this.offset, pix[1] * 1 + this.offset]);
return copyCoordinate;
});
return dealCoor;
},
offsetParams(content, filterContents, dealCoor) {
const nameList = filterContents.map(el => el.name);
let DockSpaceSerial = content.name + '_copy';
while (nameList.includes(DockSpaceSerial)) {
DockSpaceSerial += '_copy';
}
const addParams = this.getAddParams(dealCoor);
const params = {
...addParams,
dealCoor,
id: content.id,
DockSpaceSerial
};
return params;
},
deleteSelectPark() {
this.deletePark(this.selectList, false);
},
deleteDock(id) {
this.deletePark([id], true);
},
batchAdd(data) {
this.batchPopLayer.setVisible(true);
const filterContet = this.pointContainer.filterContent('type', 'line');
const coordinate = filterContet.coordinate;
const {ParkNum, batchParkStartNo, SortType} = data;
let contentList = [];
let existName = this.getNameNum(batchParkStartNo);
if (ParkNum * 1 === 1) {
const coordinates = this.getRectCoor([(coordinate[0][0] + coordinate[1][0]) * 1 / 2, (coordinate[0][1] + coordinate[1][1]) * 1 / 2]);
const addParams = this.getAddParams(coordinates[0]);
contentList = [{
...addParams,
coor: coordinates,
DockSpaceSerial: batchParkStartNo + (existName.length + '' === 1 ? `0${existName}` : `${existName}`)
}];
} else {
const n = ParkNum - 1;
const x = (coordinate[1][0] - coordinate[0][0]) * 1 / n;
const y = (coordinate[1][1] - coordinate[0][1]) * 1 / n;
for (let i = 0; i < ParkNum; i++) {
let num = '';
if (SortType === 'shun') {
num = (existName * 1 + i * 1 + '').length === 1 ? `0${existName * 1 + i * 1}` : `${existName * 1 + i * 1}`;
} else {
num = (ParkNum * 1 - i * 1 + '').length === 1 ? `0${ParkNum * 1 - i * 1}` : `${ParkNum * 1 - i * 1}`;
}
const coordinates = this.getRectCoor([coordinate[0][0] + x * i, coordinate[0][1] + y * i]);
const addParams = this.getAddParams(coordinates[0]);
contentList.push({
...addParams,
coor: coordinates,
DockSpaceSerial: batchParkStartNo + num
});
}
}
let isOut = null;
let isExist = null;
contentList.forEach(el => {
const out = this.judgeIsInMap(el.coor);
if (out) {
isOut = true;
}
el.coor[0].forEach(co => {
const pix = utils.calc.getPixelFromCoordinate(this.map, co);
const targetList = utils.map.getContentsAtPixel(this.map, pix);
targetList.forEach(target => {
if (target && target.id && target.id !== el.id) {
isExist = target;
}
});
});
});
if (isOut) {
this.$message.error(this.$t('hcp_dock_config_drawMapConfigTip'));
this.mouseclick();
return false;
}
if (isExist) {
this.$message.error(this.$t('hcp_dock_config_dockOverlayTip'));
this.mouseclick();
} else {
isapi.addDockSpace(this.dockID, contentList).then(() => {
this.initDocks();
this.mouseclick();
});
}
},
getNameNum(name) {
const contents = this.pointContainer.getContents();
const numList = [];
contents.filter(el => el._feature.id_).forEach(el => {
const num = el.name.replace(/[^\d]/g, "");
if (el.name.split(num)[0] === name) {
numList.push(num * 1);
}
});
const max = Math.max(...numList);
return numList.length ? max + 1 : 1;
},
getAddParams(coordinates) {
const params = {
TopLeftX: coordinates && coordinates.length ? coordinates[2][0] + '' : undefined,
TopLeftY: coordinates && coordinates.length ? coordinates[2][1] + '' : undefined,
TopRightX: coordinates && coordinates.length ? coordinates[1][0] + '' : undefined,
TopRightY: coordinates && coordinates.length ? coordinates[1][1] + '' : undefined,
BottomLeftX: coordinates && coordinates.length ? coordinates[3][0] + '' : undefined,
BottomLeftY: coordinates && coordinates.length ? coordinates[3][1] + '' : undefined,
BottomRightX: coordinates && coordinates.length ? coordinates[0][0] + '' : undefined,
BottomRightY: coordinates && coordinates.length ? coordinates[0][1] + '' : undefined
};
return params;
},
onSubmit(data) {
const isEdit = _.isNumber(data.ID);
let req = isapi.addDockSpace;
const coordinates = data.coordinate[0];
const addParams = this.getAddParams(coordinates);
console.log(data, 778);
if (!addParams.TopLeftX) {
this.mouseclick();
this.initDocks();
return false;
}
let params = {
...addParams,
DockSpaceSerial: data.Name
};
if (isEdit) {
params.ID = data.ID;
req = isapi.updateDockSpace;
}
req(this.dockID, [params])
.then(() => {
this.mouseclick();
this.initDocks();
})
.catch((e) => {
console.log(e);
});
},
mouseclick() {
if (this.model || this.popMode) {
this.model = '';
if (this.popLayer) {
this.popLayer.setVisible(false);
}
this.clearActive();
}
},
clearSelected() {
const selectContent = this.pointContainer.getContents().filter(el => el.selected);
if (selectContent && selectContent.length) {
selectContent.forEach(el => {
this.changeDockColor(el, false);
});
}
},
clearActive() {
this.activeMode = '';
this.popMode = '';
if (this.draw) {
this.draw.un('boxend', this.dragBoxListener);
this.map._Map.olMap.removeInteraction(this.draw);
}
if (this.addRectangleDraw) {
this.addRectangleDraw.un('boxend', this.dragRectBoxListener);
this.map._Map.olMap.removeInteraction(this.addRectangleDraw);
}
if (this.lineDraw) {
this.lineDraw.un('drawend', this.onDrawend);
this.map._Map.olMap.removeInteraction(this.lineDraw);
}
const filterContet = this.pointContainer.filterContent('type', 'line');
if (filterContet) {
this.pointContainer.removeContents([filterContet]);
}
const newContent = this.pointContainer.filterContent('type', 'newOne');
if (newContent) {
this.pointContainer.removeContents([newContent]);
}
this.clearSelected();
this.modify && this.modify();
this.addNewData = {
Name: '',
ID: '',
coordinate: []
};
this.selectList = [];
this.$refs.createForm?.reset();
this.map.off("pointermove", this.createOrMoveOc);
this.createOrMoveOc('', '', true);
},
clearContainer(container) {
container.clear();
},
destroy() {
this.clearActive();
this.map?.destroy();
if (this.OverContainer) {
destroyOverContainer(this.OverContainer);
this.OverContainer = null;
}
if (this.popLayer) {
destroyOverContainer(this.popLayer);
this.popLayer = null;
}
if (this.batchPopLayer) {
destroyOverContainer(this.batchPopLayer);
this.batchPopLayer = null;
}
this.map = null;
},
async initMap() {
const mapData = {
dockID: this.dockID,
mapType: 'static',
$el: 'dockMapConfig',
staticOptions: {
name: '',
filename: '',
map_max_level: this.mapData.MaxMapLevel,
map_min_level: this.mapData.MinMapLevel,
width: this.mapData.Width,
height: this.mapData.Height
}
};
this.map = createMapInstance(mapData);
const authInfo = await isapiHelper.getSessionAndToken('', {}, 0);
this.map._Map.setUrl(
`/ISAPI/Bumblebee/dockmanagement/V1/Canvas/${this.mapData.ID}/Image?NAME=${this.mapData.ImageGuid}_{z}-{x}-{y}&SID=${authInfo.session}`
);
this.initLayer();
this.map.on("click", this.mapClick);
this.map.olMap.on("movestart", this.movestart);
if (this.dockID) {
this.initDocks();
}
this.fitExtent();
},
onEdit() {
console.log('ssss```````', ol);
const transform = new ol.Map.interaction({
translateFeature: true,
rotateFeature: true,
scaleFeature: true,
scale: true,
rotate: true,
selection: true,
keepAspectRatio: false,
translate: true,
stretch: true,
modifyCenter: true
});
this.map._Map.olMap.addInteraction(transform);
},
movestart(e) {
console.log(e);
},
fitExtent(originExtent) {
const view = this.map.olMap.getView();
let extent = null;
if (!originExtent) {
extent = this.map._Map.getOperationExtent();
this.originExtent = extent;
} else {
extent = originExtent;
}
view.setConstrainResolution(false);
view.fit(extent);
},
initDocks(copyItem) {
isapi.getDockSpace(this.dockID).then((res) => {
if (res && res.length) {
this.clearContainer(this.pointContainer);
res.forEach(el => {
const coordinate = [
[
[el.BottomRightX * 1, el.BottomRightY * 1],
[el.TopRightX * 1, el.TopRightY * 1],
[el.TopLeftX * 1, el.TopLeftY * 1],
[el.BottomLeftX * 1, el.BottomLeftY * 1]
]
];
const yList = coordinate[0].map(el => el[1]);
const minY = Math.min(...yList);
const textCoor = [(el.BottomRightX * 1 + el.TopLeftX * 1) / 2, minY];
const centerCoor = [(el.BottomRightX * 1 + el.TopLeftX * 1) / 2, (el.BottomRightY * 1 + el.TopLeftY * 1) / 2];
this.addText(textCoor, el.DockSpaceSerial, el.ID);
this.addRectangle(coordinate, el.ID, el.DockSpaceSerial, true, centerCoor);
});
this.$nextTick(() => {
if (copyItem) {
const contents = this.pointContainer.getContents();
const ids = res.map(el => el.ID);
const id = Math.max(...ids);
const content = contents.find(el => el._feature.id_ === id);
this.addNewData = {
Name: copyItem.DockSpaceSerial,
ID: id,
coordinate: copyItem.dealCoor
};
this.addPop(content.centerCoor, content.coordinate);
this.changeDockColor(content, true);
}
});
} else if (res && !res.length) {
this.clearContainer(this.pointContainer);
}
this.startDraging = false;
});
},
judgeIsRepeat(extent, id, coor) {
const contents = this.pointContainer.getContents();
const filterContent = contents.filter(el => el._feature.id_ && el._feature.id_ !== id);
const point = [];
const extents = [];
filterContent.forEach(el => {
extents.push(el.geometry.extent_);
el.coordinate[0].forEach(e => {
point.push(e);
});
});
let exist = point.find(el => containsXY(extent, el[0], el[1]));
if (!exist) {
extents.forEach(el => {
coor.forEach(e => {
const isExist = containsXY(el, e[0], e[1]);
if (isExist) {
exist = true;
}
});
});
}
return !!exist;
},
dragCb(tCoor, id, name) {
const isOut = this.judgeIsInMap([tCoor]);
if (isOut) {
this.$message.error(this.$t('hcp_dock_config_drawMapConfigTip'));
this.clearActive();
this.initDocks();
return false;
}
let isExist = null;
const contents = this.pointContainer.getContents();
const filterContent = contents.filter(el => el._feature.id_ && el._feature.id_ !== id);
tCoor.forEach(tc => {
const pt = turf.point(tc);
filterContent.forEach(el => {
const poly2 = turf.polygon([[...el.coordinate[0], el.coordinate[0][0]]]);
const overlap = turf.booleanPointInPolygon(pt, poly2);
if (overlap) {
isExist = overlap;
}
});
});
const poly1 = turf.polygon([[...tCoor, tCoor[0]]]);
filterContent.forEach(el => {
el.coordinate[0].forEach(i => {
const pt = turf.point(i);
const overlap = turf.booleanPointInPolygon(pt, poly1);
if (overlap) {
isExist = overlap;
}
});
});
if (isExist) {
this.$message.error(this.$t('hcp_dock_config_dockOverlayTip'));
this.clearActive();
this.initDocks();
} else {
const data = {
Name: name,
ID: id,
coordinate: [tCoor]
};
this.onSubmit(data);
}
},
mapClick(e, coord) {
console.log(coord);
const content = utils.map.getContentsAtPixel(this.map, e.pixel)?.[0];
if (!this.model) {
if (content) {
this.popMode = 'addPark';
this.modify && this.modify();
const cb = (e) => {
const coor = e.feature.values_.geometry.flatCoordinates;
const tCoor = [
[coor[0], coor[1]],
[coor[2], coor[3]],
[coor[4], coor[5]],
[coor[6], coor[7]]
];
this.dragCb(tCoor, content.id, content.name);
};
this.clearSelected();
this.changeDockColor(content, true);
const coordinate = content.coordinate;
this.addNewData = {
Name: content.name,
ID: content.id,
coordinate
};
const yList = coordinate[0].map(el => el[1]);
const maxY = Math.max(...yList);
const theCoor = [(coordinate[0][0][0] * 1 + coordinate[0][2][0] * 1) / 2, maxY];
this.addPop(theCoor, coordinate);
} else {
if (this.getPopModel('addPark')) {
this.clearActive();
}
}
} else {
if (this.activeMode === 'addPark') {
this.addNewData = {
Name: '',
ID: '',
coordinate: []
};
this.$refs.createForm?.reset();
const coordinates = this.getRectCoor(coord);
const isOut = this.judgeIsInMap(coordinates);
if (isOut) {
this.$message.error(this.$t('hcp_dock_config_drawMapConfigTip'));
this.initDocks();
return false;
}
let isExist = null;
coordinates[0].forEach(co => {
const pix = utils.calc.getPixelFromCoordinate(this.map, co);
const target = utils.map.getContentsAtPixel(this.map, pix)?.[0];
if (target) {
isExist = target;
}
});
if (isExist) {
this.$message.error(this.$t('hcp_dock_config_dockOverlayTip'));
}
return false;
}
if (this.activeMode === 'batchAddPark') {
if (this.lineClick === 0) {
this.lineClick = 1;
} else {
this.lineClick = 0;
}
}
if (this.activeMode === 'batchSelect') {
if (content) {
const idExist = this.selectList.find(el => el === content.id);
if (!idExist) {
this.selectList.push(content.id);
this.changeDockColor(content, true);
} else {
this.selectList = this.selectList.filter(el => el !== content.id);
this.changeDockColor(content, false);
}
} else {
this.clearActive();
this.model = '';
}
return false;
}
if (this.getPopModel('batchAddPark')) {
this.popMode = '';
this.batchPopLayer.setVisible(false);
const filterContet = this.pointContainer.filterContent('type', 'line');
if (filterContet) {
this.pointContainer.removeContents([filterContet]);
}
this.model = '';
}
}
},
changeDockColor(content, select) {
const color = select ? '#ff000047' : '#4caf507d';
const strokeColor = select ? '#ff000047' : '#4CAF50';
content.setStyle(
new Style({
stroke: new Stroke({
color: strokeColor,
width: 2
}),
fill: new Fill({
color
})
})
);
content.setProperty('selected', select);
},
dealLineDrawList(coord) {
if (!this.lineDrawList.length) {
this.lineDrawList.push(coord);
}
if (this.lineDrawList.length === 1) {
this.lineDrawList.push(coord);
this.lineDraw.stop();
}
},
initLayer() {
this.pointContainer = createContainerInstance({
name: 'testCreateContainerCircle'
});
this.map.addContainer(this.pointContainer);
},
initDraw() {
this.drawAndAddRectangle();
},
computedPop(coordinate, halfPopWidth = 160, halfPopHeight = 125) {
const clientWidth = this.$refs.dockMapConfig.clientWidth;
const clientHeight = this.$refs.dockMapConfig.clientHeight;
const coor = coordinate[0];
let popCoor = [(coor[0][0] * 1 + coor[2][0] * 1) / 2, (coor[0][1] * 1 + coor[2][1] * 1) / 2];
const xList = coor.map(el => el[0]);
const yList = coor.map(el => el[1]);
const minX = Math.min(...xList);
const minY = Math.min(...yList);
const maxX = Math.max(...xList);
const maxY = Math.max(...yList);
const left = [minX, coor.find(el => el[0] === minX)[1]];
const pixLeft = utils.calc.getPixelFromCoordinate(this.map, left);
const leftEnough = !(pixLeft[0] < halfPopWidth);
const right = [maxX, coor.find(el => el[0] === maxX)[1]];
const pixRight = utils.calc.getPixelFromCoordinate(this.map, right);
const rightEnough = !((clientWidth - pixRight[0]) < halfPopWidth);
const top = [coor.find(el => el[1] === minY)[0], maxY];
const pixTop = utils.calc.getPixelFromCoordinate(this.map, top);
const topEnough = !(pixTop[1] < halfPopHeight);
const bottom = [coor.find(el => el[1] === maxY)[0], minY];
const pixBottom = utils.calc.getPixelFromCoordinate(this.map, bottom);
const bottomEnough = !((clientHeight - pixBottom[1]) < halfPopHeight);
let pos1 = 'center';
let pos2 = 'center';
if (topEnough) {
pos1 = 'bottom';
} else if (!topEnough && bottomEnough) {
pos1 = 'top';
} else {
pos1 = 'center';
}
if (leftEnough && !rightEnough) {
pos2 = 'right';
} else if (!leftEnough && rightEnough) {
pos2 = 'left';
} else {
pos2 = 'center';
}
const positioning = `${pos1}-${pos2}`;
if (positioning === 'bottom-right') {
popCoor = [minX, maxY];
} else if (positioning === 'top-center') {
popCoor = [(coor[0][0] * 1 + coor[2][0] * 1) / 2, minY];
} else if (positioning === 'top-left') {
popCoor = [maxX, minY];
} else if (positioning === 'top-right') {
popCoor = [minX, minY];
} else if (positioning === 'bottom-center') {
popCoor = [(coor[0][0] * 1 + coor[2][0] * 1) / 2, maxY];
} else if (positioning === 'bottom-left') {
popCoor = [maxX, maxY];
} else if (positioning === 'center-left') {
popCoor = [maxX, (coor[0][1] * 1 + coor[2][1] * 1) / 2];
} else if (positioning === 'center-right') {
popCoor = [minX, (coor[0][1] * 1 + coor[2][1] * 1) / 2];
}
return {
positioning: positioning,
popCoor
};
},
computedPop2(coordinate, halfPopWidth = 160, halfPopHeight = 125) {
const clientWidth = this.$refs.dockMapConfig.clientWidth;
const clientHeight = this.$refs.dockMapConfig.clientHeight;
let offset = [0, 0];
const pix = utils.calc.getPixelFromCoordinate(this.map, coordinate);
let pos1 = 'left';
let pos2 = 'top';
if ((clientWidth - pix[0]) < halfPopWidth) {
pos1 = 'right';
} else {
pos1 = 'left';
}
if ((clientHeight - pix[1]) < halfPopHeight) {
pos2 = 'bottom';
} else {
pos2 = 'top';
}
const positioning = `${pos2}-${pos1}`;
return {
positioning: positioning,
offset: offset
};
},
addPop(coordinate, allCoor) {
let { positioning, popCoor } = this.computedPop(allCoor, 160, 180);
let offset = [0, 0];
if (positioning === 'bottom-center') {
offset = [0, -25];
} else if (positioning === 'top-center') {
offset = [0, 25];
}
if (this.popLayer) {
this.popLayer.setVisible(true);
this.popLayer.setPositioning(positioning);
this.popLayer.setOffset(offset);
this.popLayer.setPosition(popCoor);
} else {
this.popLayer = createOverContainer(this.map, {
id: "popContent",
offset: offset,
position: popCoor,
positioning: positioning || "bottom-center"
});
}
},
addText(coordinates, name, id) {
const content = createContent({
GeometryType: 'Point',
coordinates
});
content.setStyle(() => {
let result = new Style({
text: new Text({
text: name,
font: '16px Calibri,sans-serif',
fill: new Fill({
color: '#000'
}),
stroke: new Stroke({
color: '#fff',
width: 1
}),
offsetY: 12
})
});
return result;
});
if (id) {
content.setProperty('id', id);
content.setProperty('name', name);
content.setProperty('coordinate', coordinates);
}
this.pointContainer.addContent(content);
},
getRectCoor(coordinate) {
const pix = utils.calc.getPixelFromCoordinate(this.map, coordinate);
const posX = this.posX;
const posY = this.posY;
const x1 = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 - posX, pix[1] * 1 - posY]);
const x2 = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 + posX, pix[1] * 1 - posY]);
const x4 = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 - posX, pix[1] * 1 + posY]);
const x5 = utils.calc.getCoordinateFromPixel(this.map, [pix[0] * 1 + posX, pix[1] * 1 + posY]);
const coordinates = [
[x5, x2, x1, x4]
];
return coordinates;
},
drawAndAddRectangle() {
this.addRectangleDraw = new DragBox({
className: 'dock-config-dragBoxClass',
condition: (event) => {
const feature = event.map.getFeaturesAtPixel(event.pixel);
if (feature.length && feature[0].get('instance')) {
return false;
}
return mouseActionButton(event);
}
});
this.addRectangleDraw.on('boxstart', () => {
this.popMode = '';
const newContent = this.pointContainer.filterContent('type', 'newOne');
if (newContent) {
this.pointContainer.removeContents([newContent]);
}
});
this.addRectangleDraw.on('boxend', this.dragRectBoxListener);
this.map._Map.olMap.addInteraction(this.addRectangleDraw);
this.onEdit();
},
dragRectBoxListener() {
this.popMode = 'addPark';
const extent = this.addRectangleDraw.getGeometry().flatCoordinates;
const coordinate = [
[extent[0], extent[1]],
[extent[2], extent[3]],
[extent[4], extent[5]],
[extent[6], extent[7]]
];
const allCoor = this.addRectangle([coordinate]);
this.addNewData.coordinate = allCoor;
this.addPop(coordinate, allCoor);
this.activeMode = '';
this.popMode = 'addPark';
this.map.off("pointermove", this.createOrMoveOc);
this.createOrMoveOc('', '', true);
},
addRectangle(coordinate, id, name, dataAdd, centerCoor) {
let coordinates = [];
coordinates = coordinate;
const content = createContent({
GeometryType: 'Polygon',
coordinates
});
content.setStyle(
new Style({
stroke: new Stroke({
color: '#4CAF50',
width: 2
}),
fill: new Fill({
color: '#4caf507d'
})
})
);
if (id) {
content.setProperty('id', id);
content.setProperty('name', name);
content.setProperty('coordinate', coordinate);
content.setProperty('centerCoor', centerCoor);
content._feature.setId(id);
}
if (!dataAdd) {
content.setProperty('type', 'newOne');
}
this.pointContainer.addContent(content);
return coordinates;
},
judgeMode(mode) {
if (this.model) {
if (this.model !== mode) {
this.clearActive();
return true;
}
return false;
}
return true;
},
judgeModeA(mode) {
if (this.model) {
if (this.model !== mode) {
this.mouseclick();
return true;
}
return false;
}
this.model = '';
if (this.popLayer) {
this.popLayer.setVisible(false);
}
this.clearActive();
return true;
},
addPark(mode) {
const continueA = this.judgeMode(mode);
if (!continueA) {
return false;
}
this.model = mode;
this.activeMode = mode;
this.initMouseTip();
this.initDraw();
},
initMouseTip(ele) {
this.map.on("pointermove", (e, coord) => this.createOrMoveOc(e, coord, false, ele));
},
createOrMoveOc(e, coord, destroy = false) {
if (destroy) {
if (this.OverContainer) {
this.OverContainer.setVisible(false);
}
return;
}
if (!this.OverContainer) {
this.OverContainer = createOverContainer(this.map, {
element: this.$refs.pop1,
offset: [10, 20],
position: coord,
positioning: "top-left"
});
} else {
this.OverContainer.setPosition(coord);
}
},
batchAddPark(mode) {
const continueA = this.judgeMode(mode);
if (!continueA) {
return false;
}
this.model = mode;
this.activeMode = mode;
this.initMouseTip();
this.lineDraw = new Draw({
source: this.source,
type: 'LineString',
maxPoints: 2,
condition: mouseActionButton,
finishCondition: mouseActionButton,
style: new Style({
image: new Circle({
fill: new Fill({
color: '#4CAF50'
}),
radius: 5
}),
stroke: new Stroke({
color: '#4CAF50',
width: 1
}),
fill: new Fill({
color: '#4caf507d'
})
})
});
this.map._Map.olMap.addInteraction(this.lineDraw);
this.lineDraw.on('drawend', this.onDrawend);
},
onDrawend(event) {
setTimeout(() => {
this.activeMode = '';
if (this.lineDraw) {
this.lineDraw.un('drawend', this.onDrawend);
this.map._Map.olMap.removeInteraction(this.lineDraw);
}
const coords = event.target.sketchCoords_;
const content = createContent({
GeometryType: 'LineString',
coordinates: coords
});
content.setStyle(() => {
let result = new Style({
stroke: new Stroke({
color: '#4CAF50',
width: 1
}),
fill: new Fill({
color: '#4caf507d'
})
});
return result;
});
content.setProperty('type', 'line');
content.setProperty('coordinate', coords);
this.pointContainer.addContent(content);
this.popMode = 'batchAddPark';
let { positioning } = this.computedPop2(coords[1], 160 * 2, 117 * 2);
if (this.batchPopLayer) {
this.batchPopLayer.setVisible(true);
this.batchPopLayer.setPositioning(positioning);
this.batchPopLayer.setPosition(coords[1]);
this.$refs.batchPopForm?.reset();
} else {
this.batchPopLayer = createOverContainer(this.map, {
id: "batchPopContent",
offset: [0, 0],
position: coords[1],
positioning: positioning || "top-left"
});
}
}, 100);
},
batchSelect(model) {
const continueA = this.judgeModeA(model);
if (!continueA) {
return false;
}
this.model = model;
this.activeMode = model;
this.initMouseTip();
this.draw = new DragBox({
condition: (event) => {
const feature = event.map.getFeaturesAtPixel(event.pixel);
if (feature.length && feature[0].get('instance')) {
return false;
}
return mouseActionButton(event);
}
});
this.draw.on('boxend', this.dragBoxListener);
this.map._Map.olMap.addInteraction(this.draw);
},
dragBoxListener(e) {
const { ctrlKey } = e.mapBrowserEvent.originalEvent;
const extent = this.draw.getGeometry().getExtent();
const source = this.pointContainer.source;
if (ctrlKey) {
source.forEachFeatureIntersectingExtent(extent, feature => {
if (feature.id_) {
this.changeRectangle(feature.id_, true);
}
});
} else {
source.forEachFeatureIntersectingExtent(extent, feature => {
if (feature.id_) {
this.changeRectangle(feature.id_);
}
});
}
const contents = this.pointContainer.getContents();
this.selectList = contents.filter(el => el.selected).map(el => el.id);
},
changeRectangle(id, reverse) {
const contents = this.pointContainer.getContents();
const content = contents.find(el => el._feature.id_ === id);
this.changeDockColor(content, !reverse);
},
changeModel(modelName) {
this.model = modelName || '';
},
getPopModel(modelName) {
return this.popMode === modelName ? 'actived' : '';
},
getActiveMode(modelName) {
return this.activeMode === modelName ? 'actived' : '';
},
getModel(modelName) {
return this.model === modelName ? 'actived' : '';
},
async deleteMap() {
await this.deleteConfirm();
await this.doDelete();
await this.doDeleteCb();
},
deleteConfirm() {
return this.$confirm({
confirmButtonText: this.$t('ok'),
cancelButtonText: this.$t('btn_cancel'),
type: 'question',
title: `${this.$t('hcp_dock_delete_map_image')}？`
});
},
async doDelete() {
await isapi.deleteDockMap(this.dockID);
},
doDeleteCb() {
this.$emit('clear-map', true);
},
async changeMap() {
this.$emit('change-park-map');
},
async deletePark(ids, clear) {
try {
await this.deleteParkPrompt();
await this.doDeletePark(ids);
await this.deleteParkCb(clear);
this.selectList = [];
} catch (e) {
await this.deleteParkCb(false);
}
},
deleteParkPrompt() {
return this.$confirm({
confirmButtonText: this.$t('ok'),
cancelButtonText: this.$t('btn_cancel'),
type: 'question',
message: this.$t('hcp_dock_delete_dock_space')
});
},
doDeletePark(ids) {
let DockSpaceIDs = ids.join(',');
return isapi.deleteDockSpace(this.dockID, DockSpaceIDs);
},
deleteParkCb(clear) {
if (clear) {
this.mouseclick();
}
this.initDocks();
},
doCenter(type) {
const contents = this.pointContainer.getContents();
let markers = contents.filter(el => this.selectList.includes(el.id) && el.selected);
let params = [];
const coors = [];
if (type === 'horizontally') {
let x = getMathCenterHorizontally(markers);
markers.forEach((marker) => {
const total = marker.centerCoor[0] * 1 + x;
const coordinates = marker.coordinate[0].map(el => {
const tx = total - el[0] * 1;
return [tx, el[1]];
});
const coors1 = [
[coordinates[2][0], coordinates[0][1]],
[coordinates[3][0], coordinates[1][1]],
[coordinates[0][0], coordinates[2][1]],
[coordinates[1][0], coordinates[3][1]]
];
const addParams = this.getAddParams(coors1);
coors.push(coors1);
params.push({
ID: marker.id,
...addParams,
coor: coors1,
DockSpaceSerial: marker.name
});
});
} else if (type === 'vertical') {
let y = getMathCenterVertical(markers);
markers.forEach((marker) => {
const total = marker.centerCoor[1] * 1 + y;
const coordinates = marker.coordinate[0].map(el => {
const ty = total - el[1] * 1;
return [el[0], ty];
});
const coors1 = [
[coordinates[0][0], coordinates[2][1]],
[coordinates[1][0], coordinates[3][1]],
[coordinates[2][0], coordinates[0][1]],
[coordinates[3][0], coordinates[1][1]]
];
const addParams = this.getAddParams(coors1);
coors.push(coors1);
params.push({
ID: marker.id,
...addParams,
coor: coors1,
DockSpaceSerial: marker.name
});
});
}
let isExist = null;
params.forEach(el => {
const filterMarkers = params.filter(i => el.ID !== i.ID);
el.coor.forEach(ec => {
const pt = turf.point(ec);
filterMarkers.forEach(item => {
const poly2 = turf.polygon([[...item.coor, item.coor[0]]]);
const overlap = turf.booleanPointInPolygon(pt, poly2);
console.log(overlap, 887);
if (overlap) {
isExist = true;
}
});
});
});
console.log(isExist);
if (isExist) {
this.$message.error(this.$t('hcp_dock_config_dockOverlayTip'));
this.initDocks();
} else {
isapi.updateDockSpace(this.dockID, params).finally(() => {
this.initDocks();
});
}
}
}
};
</script>
<style lang="less">
.dock-config-dragBoxClass{
background: #4caf507d;
border: 2px solid #4CAF50;
}
.add-park-cursor {
cursor: url('../../../DockManagement/view/map/images/emap_icon_camera_nor.cur'),
auto;
}
.park-map-nav {
.h-icon-copy{
font-size: 24px;
}
}
.dock-map-config {
.ol-zoom {
left: auto;
top: auto;
bottom: 0.5em;
right: 0.5em;
position: absolute;
cursor: pointer;
}
.ol-control {
button{
color: black;
background-color: white;
&:hover {
background-color: white;
}
&:focus{
background-color: white;
}
}
}
}
</style>
<style lang="less" scoped>
.reset-map {
position: absolute;
bottom: 64px;
right: 7px;
z-index: 1;
background: white;
min-width: 27px !important;
height: 27px !important;
&:hover{
background: white !important;
}
}
.park-map-nav {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 24px;
padding: 0 32px 0 16px;
.line{
display:inline-block;
width: 1px;
height: 17px;
background: #cccccc;
margin-right: 10px;
}
&-item {
display: flex;
align-items: center;
float: left;
background: white;
padding: 4px;
z-index: 1;
box-shadow: 0px 1px 12px 0px #E1E2E6;
> div {
float: left;
display: inline-block;
margin-right: 10px;
}
&.right {
float: right;
}
}
}
.active-park{
// cursor: url('./images/icon_add.svg'), auto;
}
.dock-map-config {
height: 100%;
width: 100%;
background: #fff;
}
.pop1 {
max-width: 200px;
display: inline-block;
background: rgba(0,0,0,.8);
padding: 8px;
color: rgba(255,255,255,.8);
border-radius: 4px;
// word-break: break-all;
}
</style>
