Compare commits
4 Commits
fb218fd354
...
e65c5b693b
| Author | SHA1 | Date |
|---|---|---|
 zzq
|
e65c5b693b | |
|
zzq
|
4c6ba8d9a8 | |
|
zzq
|
70cfeea7a0 | |
|
zzq
|
d000464ce8 |
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<a-modal class="insert-shp-modal" width="1290px" :destroyOnClose="true" v-model:open="props.openModal" @cancel="closeModal">
|
||||
<a-modal
|
||||
class="insert-shp-modal"
|
||||
width="1290px"
|
||||
:destroyOnClose="true"
|
||||
v-model:open="props.openModal"
|
||||
@cancel="closeModal"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<CloseCircleOutlined />
|
||||
</template>
|
||||
|
|
@ -9,16 +15,12 @@
|
|||
class="steps"
|
||||
:current="current"
|
||||
label-placement="vertical"
|
||||
:items="[
|
||||
{title: '选择文件',},
|
||||
{title: '编辑信息',},
|
||||
{title: '完成',},
|
||||
]"
|
||||
:items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]"
|
||||
></a-steps>
|
||||
<div class="select-file-div" v-show="current === 0">
|
||||
<div class="upload-div">
|
||||
<a-upload-dragger
|
||||
style="height: 174px; width: 174px;"
|
||||
style="height: 174px; width: 174px"
|
||||
class="upload-dragger"
|
||||
v-model:fileList="fileList"
|
||||
name="file"
|
||||
|
|
@ -29,16 +31,16 @@
|
|||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<div style="opacity: 0.7;">
|
||||
<div style="opacity: 0.7">
|
||||
<a-button :icon="h(PlusOutlined)">文件上传</a-button>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<div class="upload-span">
|
||||
<div class="upload-span-content">
|
||||
<div style="opacity: 0.7;">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1E5EFF;">支持扩展名：zip</div>
|
||||
<div style="opacity: 0.7;">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1e5eff">支持扩展名：zip</div>
|
||||
<div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-form">
|
||||
|
|
@ -47,9 +49,10 @@
|
|||
:model="uploadFrom"
|
||||
:label-col="{ style: { width: '75px' } }"
|
||||
labelAlign="right"
|
||||
:rules="uploadFormRules">
|
||||
:rules="uploadFormRules"
|
||||
>
|
||||
<a-form-item label="服务名称" name="serverName">
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称"/>
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="空间参考" name="spaceType">
|
||||
<!-- <a-input v-model:value="uploadFrom.spaceType" /> -->
|
||||
|
|
@ -60,7 +63,7 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="表名" name="tableName">
|
||||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名"/>
|
||||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="upload-span-button">
|
||||
|
|
@ -69,10 +72,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="edit-info-div" v-show="current === 1">
|
||||
<a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true" :scroll="{y: 260}">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataList"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
:scroll="{ y: 260 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-select v-model:value="record.type" style="width: 120px;">
|
||||
<a-select v-model:value="record.type" style="width: 120px">
|
||||
<a-select-option value="geometry">geometry</a-select-option>
|
||||
<a-select-option value="varchar">varchar</a-select-option>
|
||||
<a-select-option value="text">text</a-select-option>
|
||||
|
|
@ -97,13 +106,15 @@
|
|||
<div class="insert-list-button" @click="insertListItem">新增一条</div>
|
||||
<div class="footer-button">
|
||||
<a-button @click="current--">取消</a-button>
|
||||
<a-button style="margin-left: 25px;" type="primary" @click="submitDataList">下一步</a-button>
|
||||
<a-button style="margin-left: 25px" type="primary" @click="submitDataList"
|
||||
>下一步</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit-success" v-show="current === 2">
|
||||
<div class="success-content">
|
||||
<CheckCircleOutlined style="font-size: 100px;color: #1FD286;margin-bottom:30px"/>
|
||||
<div style="margin-bottom:19px;font-size:26px">导入成功</div>
|
||||
<CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" />
|
||||
<div style="margin-bottom: 19px; font-size: 26px">导入成功</div>
|
||||
<div><a-button type="primary">查看数据</a-button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,209 +123,227 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from "vue"
|
||||
import { CloseCircleOutlined, PlusOutlined, DeleteOutlined,CheckCircleOutlined } from "@ant-design/icons-vue"
|
||||
import './index.scss'
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
// import { uploadShp } from '@/api/sys/analysis.ts'
|
||||
import axios from 'axios'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue';
|
||||
import {
|
||||
CloseCircleOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import './index.scss';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
// import { uploadShp } from '@/api/sys/analysis.ts'
|
||||
import axios from 'axios';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
const current = ref(0)
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
const props = defineProps(['openModal'])
|
||||
const emits = defineEmits(['update:openModal'])
|
||||
const uploadFrom = reactive({
|
||||
serverName:'',
|
||||
spaceType:null,
|
||||
tableName:'',
|
||||
})
|
||||
const formRef = ref()
|
||||
const dataList = ref([])
|
||||
const isShp = ref(false)
|
||||
// todo
|
||||
const columns = [
|
||||
{title: 'Shp原始字段',dataIndex: 'name',key: 'name'},
|
||||
{title: '数据类型',dataIndex: 'type',key: 'type'},
|
||||
{title: '数据长度',dataIndex: 'length',key: 'length'},
|
||||
{title: '英文名称',dataIndex: 'refName',key: 'refName'},
|
||||
{title: '中文名称',dataIndex: 'initName',key: 'initName'},
|
||||
{title: '操作',dataIndex: 'operation',key: 'operation'},
|
||||
]
|
||||
const uploadFormRules = {
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' },],
|
||||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' },],
|
||||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' },],
|
||||
}
|
||||
const current = ref(0);
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
const props = defineProps(['openModal']);
|
||||
const emits = defineEmits(['update:openModal']);
|
||||
const uploadFrom = reactive({
|
||||
serverName: '',
|
||||
spaceType: null,
|
||||
tableName: '',
|
||||
});
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const isShp = ref(false);
|
||||
// todo
|
||||
const columns = [
|
||||
{ title: 'Shp原始字段', dataIndex: 'name', key: 'name' },
|
||||
{ title: '数据类型', dataIndex: 'type', key: 'type' },
|
||||
{ title: '数据长度', dataIndex: 'length', key: 'length' },
|
||||
{ title: '英文名称', dataIndex: 'refName', key: 'refName' },
|
||||
{ title: '中文名称', dataIndex: 'initName', key: 'initName' },
|
||||
{ title: '操作', dataIndex: 'operation', key: 'operation' },
|
||||
];
|
||||
const uploadFormRules = {
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
|
||||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
console.log('beforeUpload',file)
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
};
|
||||
const submitShp = () => {
|
||||
formRef.value.validate().then(() => {
|
||||
if(fileList.value?.length < 1){
|
||||
message.warning('请选择shp文件')
|
||||
return
|
||||
}
|
||||
let formData = new FormData();
|
||||
const [proxyFile] = fileList.value
|
||||
let file = proxyFile.originFileObj
|
||||
formData.append('file', file)
|
||||
formData.append('serverName',uploadFrom.serverName)
|
||||
formData.append('spaceType',uploadFrom.spaceType)
|
||||
formData.append('tableName',uploadFrom.tableName)
|
||||
axios.post('http://221.2.83.254:9006/geoserver/uploadFile',formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
|
||||
console.log(res)
|
||||
let data = {
|
||||
"dataType": "线",
|
||||
"heads": [
|
||||
{
|
||||
"name": "geom",
|
||||
"length": "",
|
||||
"type": "geometry"
|
||||
},
|
||||
{
|
||||
"name": "MINGCHENG",
|
||||
"length": 319,
|
||||
"type": "varchar"
|
||||
},
|
||||
{
|
||||
"name": "CHANGDU",
|
||||
"length": 319,
|
||||
"type": "varchar"
|
||||
}
|
||||
],
|
||||
"styleName": null,
|
||||
"tableName": "aa"
|
||||
}
|
||||
let showData = data.heads.map(item => {
|
||||
return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
console.log('beforeUpload', file);
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
};
|
||||
const submitShp = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
if (fileList.value?.length < 1) {
|
||||
message.warning('请选择shp文件');
|
||||
return;
|
||||
}
|
||||
let formData = new FormData();
|
||||
const [proxyFile] = fileList.value;
|
||||
let file = proxyFile.originFileObj;
|
||||
formData.append('file', file);
|
||||
formData.append('serverName', uploadFrom.serverName);
|
||||
formData.append('spaceType', uploadFrom.spaceType);
|
||||
formData.append('tableName', uploadFrom.tableName);
|
||||
axios
|
||||
.post('http://221.2.83.254:9006/geoserver/uploadFile', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
let data = {
|
||||
dataType: '线',
|
||||
heads: [
|
||||
{
|
||||
name: 'geom',
|
||||
length: '',
|
||||
type: 'geometry',
|
||||
},
|
||||
{
|
||||
name: 'MINGCHENG',
|
||||
length: 319,
|
||||
type: 'varchar',
|
||||
},
|
||||
{
|
||||
name: 'CHANGDU',
|
||||
length: 319,
|
||||
type: 'varchar',
|
||||
},
|
||||
],
|
||||
styleName: null,
|
||||
tableName: 'aa',
|
||||
};
|
||||
let showData = data.heads.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
refName: item.name.toLowerCase(),
|
||||
initName: item.name,
|
||||
key: uuidv4(),
|
||||
};
|
||||
});
|
||||
dataList.value = showData;
|
||||
current.value++;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
})
|
||||
dataList.value = showData
|
||||
current.value++
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
const closeModal = () => {
|
||||
emits('update:openModal', false)
|
||||
formRef.value.resetFields()
|
||||
fileList.value = []
|
||||
current.value = 0
|
||||
}
|
||||
const deleteListItem = (record) => {
|
||||
dataList.value = dataList.value.filter(item => item.key !== record.key)
|
||||
}
|
||||
const insertListItem = () => {
|
||||
dataList.value.push({
|
||||
key:uuidv4(),
|
||||
name:'',
|
||||
type:'',
|
||||
length:'',
|
||||
refName:'',
|
||||
initName:'',
|
||||
})
|
||||
}
|
||||
const submitDataList = () => {
|
||||
console.log(dataList.value)
|
||||
current.value++
|
||||
}
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
const closeModal = () => {
|
||||
emits('update:openModal', false);
|
||||
formRef.value.resetFields();
|
||||
fileList.value = [];
|
||||
current.value = 0;
|
||||
};
|
||||
const deleteListItem = (record) => {
|
||||
dataList.value = dataList.value.filter((item) => item.key !== record.key);
|
||||
};
|
||||
const insertListItem = () => {
|
||||
dataList.value.push({
|
||||
key: uuidv4(),
|
||||
name: '',
|
||||
type: '',
|
||||
length: '',
|
||||
refName: '',
|
||||
initName: '',
|
||||
});
|
||||
};
|
||||
const submitDataList = () => {
|
||||
console.log(dataList.value);
|
||||
current.value++;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.insert-shp-modal{
|
||||
.title{
|
||||
height: 77px;
|
||||
border-bottom: 1px solid #D7DBEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 63px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.content{
|
||||
padding: 106px;
|
||||
}
|
||||
.steps{
|
||||
// margin-bottom: 80px;
|
||||
}
|
||||
.select-file-div{
|
||||
padding-left: 52px;
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
.upload-div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 52px 103px 0px rgba(192,199,218,0.35);
|
||||
border-radius: 4px;
|
||||
.insert-shp-modal {
|
||||
.title {
|
||||
height: 77px;
|
||||
border-bottom: 1px solid #d7dbec;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.upload-dragger{
|
||||
height: 174px;
|
||||
}
|
||||
padding-left: 63px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.upload-span{
|
||||
margin-left: 40px;
|
||||
.content {
|
||||
padding: 106px;
|
||||
}
|
||||
.steps {
|
||||
// margin-bottom: 80px;
|
||||
}
|
||||
.select-file-div {
|
||||
padding-left: 52px;
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.upload-span-content{
|
||||
font-size:16px;
|
||||
margin-top: 8px;
|
||||
.upload-div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.upload-dragger {
|
||||
height: 174px;
|
||||
}
|
||||
}
|
||||
.upload-span {
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.upload-span-content {
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.upload-form {
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
.upload-span-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-form{
|
||||
flex: 1;
|
||||
margin-left:40px;
|
||||
.upload-span-button{
|
||||
.edit-info-div {
|
||||
padding-top: 26px;
|
||||
.footer-button {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.insert-list-button {
|
||||
background-color: #91b0ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
font-weight: 400;
|
||||
transition: 1s;
|
||||
}
|
||||
.insert-list-button:hover {
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.submit-success {
|
||||
.success-content {
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-info-div{
|
||||
padding-top:26px;
|
||||
.footer-button{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.insert-list-button{
|
||||
background-color: #91b0ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
font-weight: 400;
|
||||
transition: 1s;
|
||||
}
|
||||
.insert-list-button:hover{
|
||||
font-weight: 900;
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
.submit-success{
|
||||
.success-content{
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
<div class="LayerComponent">
|
||||
<div class="title">图层</div>
|
||||
<div class="insert-layer">
|
||||
<a-button class="add-layer-button" type="primary" :icon="h(PlusOutlined)" @click="openInsertShpModal">添加图层</a-button>
|
||||
<a-button
|
||||
class="add-layer-button"
|
||||
type="primary"
|
||||
:icon="h(PlusOutlined)"
|
||||
@click="openInsertShpModal"
|
||||
>添加图层</a-button
|
||||
>
|
||||
<span class="clear-layer-button">清空</span>
|
||||
</div>
|
||||
<div class="show-current-layer">
|
||||
|
|
@ -12,21 +18,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="show-layers">
|
||||
<div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`"
|
||||
v-for="item in dataList" :key='item.id' @click="selectLayer(item.id)">
|
||||
<a-checkbox v-model:checked="item.checked"/>
|
||||
<div
|
||||
:class="`show-layer-item ${isSelected === item.id ? 'select-list-item' : ''}`"
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
@click="selectLayer(item.id)"
|
||||
>
|
||||
<a-checkbox v-model:checked="item.checked" />
|
||||
<a-image
|
||||
:width="119"
|
||||
:height="87"
|
||||
style="margin-left: 10px;border-radius: 5px;"
|
||||
style="margin-left: 10px; border-radius: 5px"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
|
||||
:preview="false"
|
||||
:fallback="errorImage"/>
|
||||
:fallback="errorImage"
|
||||
/>
|
||||
<div class="layer-item-text">
|
||||
<div class="item-title">名称： {{ item.name }}</div>
|
||||
<div class="item-control">
|
||||
<a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;">查看数据</a-button>
|
||||
<a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background-color: #09b66d; margin-right: 7px"
|
||||
>查看数据</a-button
|
||||
>
|
||||
<a-button type="primary" size="small" style="background-color: #0081ff">操作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,158 +51,158 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { h, defineEmits, ref } from "vue"
|
||||
import { errorImage } from "../util.ts"
|
||||
const dataList = ref([
|
||||
{
|
||||
id:1,
|
||||
name:"111",
|
||||
checked:true,
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:"222",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:"333",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:"444",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
name:"555",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:6,
|
||||
name:"666",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
name:"777",
|
||||
checked:false,
|
||||
},
|
||||
{
|
||||
id:8,
|
||||
name:"888",
|
||||
checked:false,
|
||||
},
|
||||
])
|
||||
const isSelected = ref()
|
||||
const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal"])
|
||||
const changeClick = () => {
|
||||
emits("changeOpenModal",true)
|
||||
}
|
||||
const openInsertShpModal = () => {
|
||||
emits("changeOpenInsertShpModal",true)
|
||||
}
|
||||
const selectLayer = (id:number) => {
|
||||
isSelected.value = id
|
||||
}
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { h, defineEmits, ref } from 'vue';
|
||||
import { errorImage } from '../util.ts';
|
||||
const dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '111',
|
||||
checked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '222',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '333',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '444',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '555',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '666',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '777',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '888',
|
||||
checked: false,
|
||||
},
|
||||
]);
|
||||
const isSelected = ref();
|
||||
const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal']);
|
||||
const changeClick = () => {
|
||||
emits('changeOpenModal', true);
|
||||
};
|
||||
const openInsertShpModal = () => {
|
||||
emits('changeOpenInsertShpModal', true);
|
||||
};
|
||||
const selectLayer = (id: number) => {
|
||||
isSelected.value = id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LayerComponent{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #E0E5ED;
|
||||
.title{
|
||||
height:61px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.insert-layer{
|
||||
height:61px;
|
||||
background-color: #fff;
|
||||
padding-left: 16px;
|
||||
padding-right: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.add-layer-button{
|
||||
background-color: #0081FF;
|
||||
}
|
||||
.clear-layer-button{
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.show-current-layer{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.current-layer-div{
|
||||
height: 37px;
|
||||
.LayerComponent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #e0e5ed;
|
||||
.title {
|
||||
height: 61px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
user-select: none;;
|
||||
.current-layer-title{
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.insert-layer {
|
||||
height: 61px;
|
||||
background-color: #fff;
|
||||
padding-left: 16px;
|
||||
padding-right: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.add-layer-button {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
.current-layer-title::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: #09B66D;
|
||||
border-radius: 50%;
|
||||
margin: 6px;
|
||||
}
|
||||
.create-new-layer-button{
|
||||
width: 106px;
|
||||
background-color: #0081FF;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
.clear-layer-button {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-layers{
|
||||
height: calc(100% - 179px);
|
||||
padding-top: 14px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.show-layer-item{
|
||||
background-color: #fff;
|
||||
height: 133px;
|
||||
border-radius: 5px;
|
||||
padding: 23px 10px;
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
.layer-item-text{
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
.show-current-layer {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.current-layer-div {
|
||||
height: 37px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
.current-layer-title {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
.current-layer-title::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: #09b66d;
|
||||
border-radius: 50%;
|
||||
margin: 6px;
|
||||
}
|
||||
.create-new-layer-button {
|
||||
width: 106px;
|
||||
background-color: #0081ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-layers {
|
||||
height: calc(100% - 179px);
|
||||
padding-top: 14px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.show-layer-item {
|
||||
background-color: #fff;
|
||||
height: 133px;
|
||||
border-radius: 5px;
|
||||
padding: 23px 10px;
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
.layer-item-text {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-list-item {
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
.select-list-item{
|
||||
border:1px solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="LayerControl">
|
||||
<a-button type="primary" class="blue line-up" :icon="h(EditOutlined)">绘制</a-button>
|
||||
<a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)"
|
||||
>绘制</a-button
|
||||
>
|
||||
<a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
|
||||
<a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
|
||||
<a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
|
||||
|
|
@ -12,35 +14,47 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined, FormOutlined, BlockOutlined,
|
||||
SplitCellsOutlined, DragOutlined, DeleteOutlined, RollbackOutlined, CloseCircleOutlined, } from "@ant-design/icons-vue"
|
||||
import { h } from "vue"
|
||||
import {
|
||||
EditOutlined,
|
||||
FormOutlined,
|
||||
BlockOutlined,
|
||||
SplitCellsOutlined,
|
||||
DragOutlined,
|
||||
DeleteOutlined,
|
||||
RollbackOutlined,
|
||||
CloseCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { h } from 'vue';
|
||||
const emit = defineEmits(['draw']);
|
||||
function drawClick() {
|
||||
emit('draw');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LayerControl{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 386px;
|
||||
background-color: #fff;
|
||||
padding: 13px 13px 8px 13px;
|
||||
button{
|
||||
margin-bottom: 5px;
|
||||
.LayerControl {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 386px;
|
||||
background-color: #fff;
|
||||
padding: 13px 13px 8px 13px;
|
||||
button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.blue {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
.orange {
|
||||
background-color: #ff8a48;
|
||||
}
|
||||
.green {
|
||||
background-color: #09b66d;
|
||||
}
|
||||
.line-up {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.last-line-up {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.blue{
|
||||
background-color: #0081FF;
|
||||
}
|
||||
.orange{
|
||||
background-color: #FF8A48;
|
||||
}
|
||||
.green{
|
||||
background-color: #09B66D;
|
||||
}
|
||||
.line-up{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.last-line-up{
|
||||
margin-right: 15px
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,285 +11,283 @@
|
|||
/>
|
||||
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
|
||||
</div> -->
|
||||
<LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
|
||||
<LayerControl />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
|
||||
<LayerComponent
|
||||
@changeOpenModal="changeOpenModal"
|
||||
@changeOpenInsertShpModal="changeOpenInsertShpModal"
|
||||
/>
|
||||
<LayerControl @draw="handlerDrawPolygon" />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
|
||||
<InsertShp v-model:openModal="insertShpModal" />
|
||||
<DataListComponent />
|
||||
<RightShowInfo />
|
||||
<RightShowInfo v-model:openModal="openRightInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import mapboxgl, { Map,Popup } from 'mapbox-gl';
|
||||
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from "@mapbox/mapbox-gl-draw";
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import './src/index.less';
|
||||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||||
import { MP } from './src/MP';
|
||||
import { DrawingType } from '@/enums/mapEnum';
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
||||
import {
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from "mapbox-gl-draw-snap-mode";
|
||||
import LayerComponent from './LayerComponent/index.vue'
|
||||
import LayerControl from './LayerControl/index.vue'
|
||||
import UseModal from './Modal/index.vue'
|
||||
import InsertShp from './InsertShp/index.vue'
|
||||
import DataListComponent from './DataListComponent/index.vue'
|
||||
import RightShowInfo from './RightShowInfo/index.vue'
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import './src/index.less';
|
||||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||||
import { MP } from './src/MP';
|
||||
import { DrawingType } from '@/enums/mapEnum';
|
||||
|
||||
const openModal = ref(false);
|
||||
const insertShpModal = ref(false)
|
||||
const changeOpenModal = (value) => {
|
||||
openModal.value = value
|
||||
}
|
||||
const changeOpenInsertShpModal = (value) => {
|
||||
insertShpModal.value = value
|
||||
}
|
||||
|
||||
// map参数类型
|
||||
interface MapboxOptionsInterface {
|
||||
mapOptions: mapboxgl.MapboxOptions;
|
||||
control: DrawingType[];
|
||||
}
|
||||
const props = defineProps<MapboxOptionsInterface>();
|
||||
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
nextMapControl = props.control
|
||||
? props.control.map((item) => {
|
||||
console.log('item::: ', item);
|
||||
return MapControlConfig[item];
|
||||
})
|
||||
: [];
|
||||
import {
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from 'mapbox-gl-draw-snap-mode';
|
||||
import LayerComponent from './LayerComponent/index.vue';
|
||||
import LayerControl from './LayerControl/index.vue';
|
||||
import UseModal from './Modal/index.vue';
|
||||
import InsertShp from './InsertShp/index.vue';
|
||||
import DataListComponent from './DataListComponent/index.vue';
|
||||
import RightShowInfo from './RightShowInfo/index.vue';
|
||||
|
||||
console.log('nextMapControl::: ', nextMapControl);
|
||||
|
||||
// 定义地图容器
|
||||
let map: Map;
|
||||
let popup:Popup;
|
||||
let clickPoisition:Array<number> = [];
|
||||
let selectFeature:Object = {};
|
||||
let mp: any = null;
|
||||
const openModal = ref(false);
|
||||
const insertShpModal = ref(false);
|
||||
const openRightInfo = ref(false);
|
||||
const changeOpenModal = (value) => {
|
||||
openModal.value = value;
|
||||
};
|
||||
const changeOpenInsertShpModal = (value) => {
|
||||
insertShpModal.value = value;
|
||||
};
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
// map参数类型
|
||||
interface MapboxOptionsInterface {
|
||||
mapOptions: mapboxgl.MapboxOptions;
|
||||
control: DrawingType[];
|
||||
}
|
||||
const props = defineProps<MapboxOptionsInterface>();
|
||||
|
||||
// 定义地图回调emit
|
||||
// 地图加载完成回调
|
||||
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
nextMapControl = props.control
|
||||
? props.control.map((item) => {
|
||||
console.log('item::: ', item);
|
||||
return MapControlConfig[item];
|
||||
})
|
||||
: [];
|
||||
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
//挂载mapbox-gl-utils
|
||||
// U.init(map);
|
||||
// mp = new MP(map);
|
||||
// emit('mapOnLoad', map);
|
||||
console.log('nextMapControl::: ', nextMapControl);
|
||||
|
||||
// 初始化绘图空间
|
||||
handlerInitDrawTool();
|
||||
// 定义地图容器
|
||||
let map: Map;
|
||||
let popup: Popup;
|
||||
let clickPoisition: Array<number> = [];
|
||||
let selectFeature: Object = {};
|
||||
let mp: any = null;
|
||||
|
||||
map.on("click",(e)=>{
|
||||
clickPoisition = e.lngLat
|
||||
})
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
map.on("draw.selectionchange",(e)=>{
|
||||
handlerCopyToTargetLayer(e);
|
||||
})
|
||||
// 定义地图回调emit
|
||||
// 地图加载完成回调
|
||||
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
|
||||
|
||||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
//挂载mapbox-gl-utils
|
||||
// U.init(map);
|
||||
mp = new MP(map);
|
||||
emit('mapOnLoad', map);
|
||||
|
||||
// 初始化绘图空间
|
||||
handlerInitDrawTool();
|
||||
|
||||
map.on('click', (e) => {
|
||||
clickPoisition = e.lngLat;
|
||||
});
|
||||
|
||||
map.on('draw.selectionchange', (e) => {
|
||||
handlerCopyToTargetLayer(e);
|
||||
});
|
||||
|
||||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
});
|
||||
// 销毁地图
|
||||
// 移除地图实例
|
||||
onUnmounted(() => {
|
||||
map ? map.remove() : null;
|
||||
});
|
||||
// 销毁地图
|
||||
// 移除地图实例
|
||||
onUnmounted(() => {
|
||||
map ? map.remove() : null;
|
||||
});
|
||||
// 初始化地图
|
||||
// 返回地图实例
|
||||
const initMap = () => {
|
||||
return new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
style: MapboxDefaultStyle,
|
||||
maxZoom: 22,
|
||||
minZoom: 6,
|
||||
...props.mapOptions,
|
||||
});
|
||||
// 初始化地图
|
||||
// 返回地图实例
|
||||
const initMap = () => {
|
||||
return new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
style: MapboxDefaultStyle,
|
||||
maxZoom: 22,
|
||||
minZoom: 6,
|
||||
...props.mapOptions,
|
||||
});
|
||||
};
|
||||
|
||||
const handlerMapControlClick = (handler: string) => {
|
||||
handler === 'handlerDrawPoint' && handlerDrawPoint();
|
||||
handler === 'handlerDrawLineString' && handlerDrawLineString();
|
||||
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
|
||||
};
|
||||
//绘制点
|
||||
const handlerDrawPoint = () => {
|
||||
mp.draw('Point');
|
||||
mp.on('Point', function (e) {
|
||||
emit('mapDraw', 'Point', e);
|
||||
});
|
||||
};
|
||||
//绘制线
|
||||
const handlerDrawLineString = () => {
|
||||
mp.draw('LineString');
|
||||
mp.on('LineString', function (e) {
|
||||
emit('mapDraw', 'LineString', e);
|
||||
});
|
||||
};
|
||||
//绘制面
|
||||
const handlerDrawPolygon = () => {
|
||||
mp.draw('Polygon');
|
||||
mp.on('Polygon', function (e) {
|
||||
emit('mapDraw', 'Polygon', e);
|
||||
});
|
||||
};
|
||||
//删除标记
|
||||
const handlerUnDraw = () => {
|
||||
mp.deleteDraw();
|
||||
emit('mapDraw', 'cancel');
|
||||
};
|
||||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = () => {
|
||||
};
|
||||
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: SnapModeDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: true,
|
||||
});
|
||||
const handlerMapControlClick = (handler: string) => {
|
||||
handler === 'handlerDrawPoint' && handlerDrawPoint();
|
||||
handler === 'handlerDrawLineString' && handlerDrawLineString();
|
||||
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
|
||||
};
|
||||
//绘制点
|
||||
const handlerDrawPoint = () => {
|
||||
mp.draw('Point');
|
||||
mp.on('Point', function (e) {
|
||||
emit('mapDraw', 'Point', e);
|
||||
});
|
||||
};
|
||||
//绘制线
|
||||
const handlerDrawLineString = () => {
|
||||
mp.draw('LineString');
|
||||
mp.on('LineString', function (e) {
|
||||
emit('mapDraw', 'LineString', e);
|
||||
});
|
||||
};
|
||||
//绘制面
|
||||
const handlerDrawPolygon = () => {
|
||||
mp.draw('Polygon');
|
||||
mp.on('Polygon', function (e) {
|
||||
emit('mapDraw', 'Polygon', e);
|
||||
});
|
||||
};
|
||||
//删除标记
|
||||
const handlerUnDraw = () => {
|
||||
mp.deleteDraw();
|
||||
emit('mapDraw', 'cancel');
|
||||
};
|
||||
|
||||
map.addControl(drawTool, "top-right");
|
||||
}
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = () => {
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: SnapModeDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: true,
|
||||
});
|
||||
|
||||
// 将图斑复制到指定图层
|
||||
const handlerCopyToTargetLayer = (e) => {
|
||||
|
||||
if(e.features.length>0){
|
||||
if(popup){
|
||||
popup.remove();
|
||||
popup = null;
|
||||
}
|
||||
map.addControl(drawTool, 'top-right');
|
||||
};
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`
|
||||
).addTo(map);
|
||||
|
||||
}else{
|
||||
|
||||
popup.remove();
|
||||
}
|
||||
}
|
||||
|
||||
const handlerCopyFeature = () => {
|
||||
console.log(selectFeature)
|
||||
// 将图斑复制到指定图层
|
||||
const handlerCopyToTargetLayer = (e) => {
|
||||
if (e.features.length > 0) {
|
||||
if (popup) {
|
||||
popup.remove();
|
||||
createMessage.success("复制成功！")
|
||||
popup = null;
|
||||
}
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(
|
||||
`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
|
||||
)
|
||||
.addTo(map);
|
||||
} else {
|
||||
popup.remove();
|
||||
}
|
||||
</script>
|
||||
};
|
||||
|
||||
const handlerCopyFeature = () => {
|
||||
console.log(selectFeature);
|
||||
popup.remove();
|
||||
createMessage.success('复制成功！');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mapboxgl-ctrl-group:not(:empty){
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: none;
|
||||
}
|
||||
.mapboxgl-ctrl-group{
|
||||
background:none!important;
|
||||
}
|
||||
.mapbox-gl-draw_ctrl-draw-btn{
|
||||
width:40px!important;
|
||||
height:40px!important;
|
||||
float:left;
|
||||
}
|
||||
.mapboxgl-ctrl-group {
|
||||
background: none !important;
|
||||
}
|
||||
.mapbox-gl-draw_ctrl-draw-btn {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mapboxgl-ctrl-top-right{
|
||||
}
|
||||
}
|
||||
.mapboxgl-ctrl-top-right {
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button+button{
|
||||
border:0px;
|
||||
margin:0px 3px;
|
||||
}
|
||||
.mapboxgl-ctrl-group button + button {
|
||||
border: 0px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_ctrl-draw-btn:hover{
|
||||
.mapbox-gl-draw_ctrl-draw-btn:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.mapbox-gl-draw_polygon{
|
||||
background-image:url(/polygon.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_point{
|
||||
background-image:url(/point.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_line{
|
||||
background-image:url(/line.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
}
|
||||
.mapbox-gl-draw_polygon {
|
||||
background-image: url(/polygon.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.mapbox-gl-draw_point {
|
||||
background-image: url(/point.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.mapbox-gl-draw_line {
|
||||
background-image: url(/line.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_trash{
|
||||
background-image:url(/del.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_trash {
|
||||
background-image: url(/del.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_combine{
|
||||
background-image:url(/combine.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_uncombine{
|
||||
background-image:url(/uncombine.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_combine {
|
||||
background-image: url(/combine.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_uncombine {
|
||||
background-image: url(/uncombine.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-drawer class="right-show-info" placement="right" :open="open" @close="()=>open=false">
|
||||
<a-drawer class="right-show-info" placement="right" :open="open" @close="() => (open = false)">
|
||||
<div class="title">
|
||||
<div class="tag"></div>
|
||||
<div class="title-text">操作</div>
|
||||
|
|
@ -16,39 +16,46 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import './index.scss'
|
||||
const open = ref(true)
|
||||
import { ref, defineProps, watch } from 'vue';
|
||||
import './index.scss';
|
||||
const open = ref(true);
|
||||
const props = defineProps(['openModal']);
|
||||
watch(
|
||||
() => props.openModal,
|
||||
(newValue) => {
|
||||
open.value = newValue;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-show-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
.title{
|
||||
height: 61px;
|
||||
padding-left: 26px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #D9E2F2;
|
||||
.tag{
|
||||
width: 3px;
|
||||
height: 23px;
|
||||
background-color:#0081FF;
|
||||
margin-right: 19px;
|
||||
.right-show-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
height: 61px;
|
||||
padding-left: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d9e2f2;
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 23px;
|
||||
background-color: #0081ff;
|
||||
margin-right: 19px;
|
||||
}
|
||||
.title-text {
|
||||
color: #141d27;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.title-text{
|
||||
color: #141D27 ;
|
||||
font-size: 24px;
|
||||
.content {
|
||||
height: calc(100% - 61px);
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: calc(100% - 61px);
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue