|
|
|
@ -24,12 +24,13 @@
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
|
<el-button icon="Refresh" @click="getLine">获取点位</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-button class="add" @click="createPolygon">新建围栏</el-button>
|
|
|
|
|
<el-button class="clear" @click="clearPolygon">清空</el-button>
|
|
|
|
|
<el-button class="clear" type="primary" @click="getLine">保存</el-button>
|
|
|
|
|
<div id="container4"></div>
|
|
|
|
|
<el-button class="add" @click="createPolygon">新建</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
@ -45,8 +46,11 @@ const {proxy} = getCurrentInstance();
|
|
|
|
|
const queryParams = ref({})
|
|
|
|
|
|
|
|
|
|
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]])
|
|
|
|
|
AMapLoader.load({
|
|
|
|
|
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
|
@ -78,16 +82,32 @@ AMapLoader.load({
|
|
|
|
|
map.addControl(new AMap.MapType());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setPolygon(areaPath.value)
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
// setPolygon(areaPath.value)
|
|
|
|
|
// setMarker(marketPath.value)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
let one = true
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
clearPolygon()
|
|
|
|
|
if (one) {
|
|
|
|
|
setPolygon(areaPath.value)
|
|
|
|
|
} else {
|
|
|
|
|
setPolygon(areaPath1.value)
|
|
|
|
|
}
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
one = !one
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setMarker = (e) => {
|
|
|
|
|
let markers = map.getAllOverlays('marker');
|
|
|
|
|
map.remove(markers)
|
|
|
|
|
let polygons = map.getAllOverlays('polygon');
|
|
|
|
|
let list = polygons.map(e => e._opts.path)
|
|
|
|
|
e.forEach(val => {
|
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
|
position: val,
|
|
|
|
@ -95,9 +115,8 @@ const setMarker = (e)=>{
|
|
|
|
|
offset: new AMap.Pixel(0, 0)
|
|
|
|
|
});
|
|
|
|
|
marker.setTitle('我是marker的title');
|
|
|
|
|
console.log((areaPath.value))
|
|
|
|
|
let isPointInRing = false
|
|
|
|
|
areaPath.value.forEach(res=>{
|
|
|
|
|
list.forEach(res => {
|
|
|
|
|
if (AMap.GeometryUtil.isPointInRing(val, res)) {
|
|
|
|
|
isPointInRing = true
|
|
|
|
|
}
|
|
|
|
@ -111,66 +130,51 @@ const setMarker = (e)=>{
|
|
|
|
|
marker.setMap(map);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const setPolygon = (res) => {
|
|
|
|
|
res.forEach((e, index) => {
|
|
|
|
|
let polygon = new AMap.Polygon({path: e});
|
|
|
|
|
map.add([polygon]);
|
|
|
|
|
let polyEditor = new AMap.PolygonEditor(map);
|
|
|
|
|
polyEditor.addAdsorbPolygons([polygon]);
|
|
|
|
|
polygon.on('dblclick', () => {
|
|
|
|
|
polyEditor.setTarget(polygon);
|
|
|
|
|
polyEditor.open();
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('addnode', function (data) {
|
|
|
|
|
// 获取区域坐标
|
|
|
|
|
areaPath.value[index] = polyEditor.getTarget()._opts.path
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('adjust', function (data) {
|
|
|
|
|
// 获取区域坐标
|
|
|
|
|
areaPath.value[index] = polyEditor.getTarget()._opts.path
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
const createPolygon = () => {
|
|
|
|
|
polyEditor.close();
|
|
|
|
|
polyEditor.setTarget();
|
|
|
|
|
polyEditor.open()
|
|
|
|
|
}
|
|
|
|
|
const removePolygon = () =>{
|
|
|
|
|
|
|
|
|
|
const clearPolygon = () => {
|
|
|
|
|
if (!polyEditor) return
|
|
|
|
|
polyEditor.close();
|
|
|
|
|
let polygons = map.getAllOverlays('polygon');
|
|
|
|
|
console.log('s',polygons)
|
|
|
|
|
polygons.forEach(e=>{
|
|
|
|
|
// e.close()
|
|
|
|
|
})
|
|
|
|
|
map.remove(polygons)
|
|
|
|
|
}
|
|
|
|
|
let createPolygon = () => {
|
|
|
|
|
let arr = []
|
|
|
|
|
map.add([new AMap.Polygon({path: arr})]);
|
|
|
|
|
let polyEditor = new AMap.PolygonEditor(map)
|
|
|
|
|
let index = areaPath.value.length
|
|
|
|
|
polyEditor.close();
|
|
|
|
|
polyEditor.setTarget();
|
|
|
|
|
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();
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
map.add(polygonArr)
|
|
|
|
|
polyEditor = new AMap.PolygonEditor(map);
|
|
|
|
|
polyEditor.addAdsorbPolygons(polygonArr);
|
|
|
|
|
polyEditor.on('add', function (data) {
|
|
|
|
|
areaPath.value.push(data.target._opts.path)
|
|
|
|
|
// polyEditor.close();
|
|
|
|
|
// map.clearMap()
|
|
|
|
|
// removePolygon()
|
|
|
|
|
// setPolygon([data.target._opts.path])
|
|
|
|
|
let polygon = data.target;
|
|
|
|
|
polyEditor.addAdsorbPolygons(polygon);
|
|
|
|
|
polygon.on('dblclick', () => {
|
|
|
|
|
polyEditor.setTarget(polygon);
|
|
|
|
|
polyEditor.open();
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('addnode', function (data) {
|
|
|
|
|
// 获取区域坐标
|
|
|
|
|
areaPath.value[index] = polyEditor.getTarget()._opts.path
|
|
|
|
|
console.log('addnode', data)
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
})
|
|
|
|
|
polyEditor.on('adjust', function (data) {
|
|
|
|
|
// 获取区域坐标
|
|
|
|
|
areaPath.value[index] = polyEditor.getTarget()._opts.path
|
|
|
|
|
console.log('adjust', data)
|
|
|
|
|
setMarker(marketPath.value)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
map.setFitView();
|
|
|
|
|
}
|
|
|
|
|
const getLine = () => {
|
|
|
|
|
let list = areaPath.value
|
|
|
|
|
let polygons = map.getAllOverlays('polygon');
|
|
|
|
|
let list = polygons.map(e => e._opts.path)
|
|
|
|
|
let params = []
|
|
|
|
|
list.forEach((e, index) => {
|
|
|
|
|
e.forEach(val => {
|
|
|
|
@ -189,12 +193,13 @@ const getLine = () => {
|
|
|
|
|
padding: 0px;
|
|
|
|
|
margin: 20px 0 0 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 190px);
|
|
|
|
|
height: calc(100vh - 220px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.add {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 15px;
|
|
|
|
|
right: 150px;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clear {
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|