|
|
|
@ -34,6 +34,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
|
import coordtransform from 'coordtransform'
|
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
@ -41,6 +42,7 @@ import {listBaseCar} from "@/api/realTimeMonitoring/electronicFence";
|
|
|
|
|
import {getInfoById} from "@/api/realTimeMonitoring/alarmSendingSettings";
|
|
|
|
|
import {parseTime} from "@/utils/ruoyi";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const {t} = useI18n();
|
|
|
|
|
|
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
@ -73,9 +75,10 @@ let map = null
|
|
|
|
|
let polyEditor = null
|
|
|
|
|
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
|
|
|
|
|
let path1 = [[116.391969, 39.912592], [116.392496, 39.910008], [116.390264, 39.910765], [116.38902, 39.912016]]
|
|
|
|
|
const areaPath = ref([path])
|
|
|
|
|
const areaPath1 = ref([path1])
|
|
|
|
|
const marketPath = ref([[116.390669, 39.911147], [116.400669, 39.921147]])
|
|
|
|
|
let areaPath = [path]
|
|
|
|
|
let areaPath1 = [path1]
|
|
|
|
|
let marketPath = [[116.390669, 39.911147], [116.400669, 39.921147]]
|
|
|
|
|
let polygonArr = []
|
|
|
|
|
AMapLoader.load({
|
|
|
|
|
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
|
|
// version: "1.4.15", //
|
|
|
|
@ -105,23 +108,36 @@ AMapLoader.load({
|
|
|
|
|
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
|
|
|
|
|
map.addControl(new AMap.MapType());
|
|
|
|
|
|
|
|
|
|
// setPolygon(areaPath.value)
|
|
|
|
|
// setMarker(marketPath.value)
|
|
|
|
|
// setPolygon(areaPath)
|
|
|
|
|
// setMarker(marketPath)
|
|
|
|
|
setPolygon([])
|
|
|
|
|
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const FormattedCoordinates = (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
polygonArr = []
|
|
|
|
|
e.forEach(val => {
|
|
|
|
|
AMap.convertFrom(val, 'gps', function (status, result) {
|
|
|
|
|
if (result.info === 'ok') {
|
|
|
|
|
let data1 = result.locations.map(e => [e.lng, e.lat])
|
|
|
|
|
setPolygon(data1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
let one = true
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
clearPolygon()
|
|
|
|
|
if (one) {
|
|
|
|
|
setPolygon(areaPath.value)
|
|
|
|
|
FormattedCoordinates([...areaPath, ...areaPath1])
|
|
|
|
|
// setPolygon(areaPath)
|
|
|
|
|
} else {
|
|
|
|
|
setPolygon(areaPath1.value)
|
|
|
|
|
FormattedCoordinates(areaPath1)
|
|
|
|
|
// setPolygon(areaPath1)
|
|
|
|
|
}
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
setMarker(marketPath)
|
|
|
|
|
one = !one
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -154,6 +170,7 @@ const setMarker = (e) => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const createPolygon = () => {
|
|
|
|
|
if (carIds.value.length === 0) return
|
|
|
|
|
polyEditor.close();
|
|
|
|
|
polyEditor.setTarget();
|
|
|
|
|
polyEditor.open()
|
|
|
|
@ -165,15 +182,15 @@ const clearPolygon = () => {
|
|
|
|
|
map.remove(polygons)
|
|
|
|
|
}
|
|
|
|
|
const setPolygon = (res) => {
|
|
|
|
|
let polygonArr = []
|
|
|
|
|
res.forEach(val => {
|
|
|
|
|
let thisPolygon = new AMap.Polygon({path: val});
|
|
|
|
|
polygonArr.push(thisPolygon)
|
|
|
|
|
thisPolygon.on('dblclick', () => {
|
|
|
|
|
polyEditor.setTarget(thisPolygon);
|
|
|
|
|
polyEditor.open();
|
|
|
|
|
})
|
|
|
|
|
// polygonArr=[]
|
|
|
|
|
// res.forEach(val => {
|
|
|
|
|
let thisPolygon = new AMap.Polygon({path: res});
|
|
|
|
|
polygonArr.push(thisPolygon)
|
|
|
|
|
thisPolygon.on('dblclick', () => {
|
|
|
|
|
polyEditor.setTarget(thisPolygon);
|
|
|
|
|
polyEditor.open();
|
|
|
|
|
})
|
|
|
|
|
// })
|
|
|
|
|
map.add(polygonArr)
|
|
|
|
|
polyEditor = new AMap.PolygonEditor(map);
|
|
|
|
|
polyEditor.addAdsorbPolygons(polygonArr);
|
|
|
|
@ -186,12 +203,10 @@ const setPolygon = (res) => {
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('addnode', function (data) {
|
|
|
|
|
console.log('addnode', data)
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
setMarker(marketPath)
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('adjust', function (data) {
|
|
|
|
|
console.log('adjust', data)
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
setMarker(marketPath)
|
|
|
|
|
})
|
|
|
|
|
map.setFitView();
|
|
|
|
|
}
|
|
|
|
@ -208,6 +223,15 @@ const getLine = () => {
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
console.log(params)
|
|
|
|
|
params = params.map(val => {
|
|
|
|
|
let path = coordtransform.gcj02towgs84(val.longitude, val.latitude)
|
|
|
|
|
return {
|
|
|
|
|
longitude: path[0],
|
|
|
|
|
latitude: path[1],
|
|
|
|
|
index: val.index
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
console.log({
|
|
|
|
|
carIds: carIds.value,
|
|
|
|
|
polygons: params
|
|
|
|
|