HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: HC_YFZX:e65c5b693beafcf9476fb438f21c258cae170cdd
Branches Tags
HC_YFZX:dianlixunjian
HC_YFZX:hefeichangfeng
HC_YFZX:main
HC_YFZX:hc_zhufu
HC_YFZX:zzq
..
compare: HC_YFZX:fb218fd3540f5efe0be1da8f27bf72a85e35678a
Branches Tags
HC_YFZX:dianlixunjian
HC_YFZX:hefeichangfeng
HC_YFZX:main
HC_YFZX:hc_zhufu
HC_YFZX:zzq

No commits in common. "e65c5b693beafcf9476fb438f21c258cae170cdd" and "fb218fd3540f5efe0be1da8f27bf72a85e35678a" have entirely different histories.
e65c5b693b ... fb218fd354

5 changed files with 674 additions and 738 deletions
Show Stats Expand all files Collapse all files

443
src/components/MapboxMaps/InsertShp/index.vue
View File

@ -1,11 +1,5 @@
<template> <template>
<a-modal <a-modal class="insert-shp-modal" width="1290px" :destroyOnClose="true" v-model:open="props.openModal" @cancel="closeModal">
class="insert-shp-modal"
width="1290px"
:destroyOnClose="true"
v-model:open="props.openModal"
@cancel="closeModal"
>
<template #closeIcon> <template #closeIcon>
<CloseCircleOutlined /> <CloseCircleOutlined />
</template> </template>
@ -15,12 +9,16 @@
class="steps" class="steps"
:current="current" :current="current"
label-placement="vertical" label-placement="vertical"
:items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]" :items="[
{title: '选择文件',},
{title: '编辑信息',},
{title: '完成',},
]"
></a-steps> ></a-steps>
<div class="select-file-div" v-show="current === 0"> <div class="select-file-div" v-show="current === 0">
<div class="upload-div"> <div class="upload-div">
<a-upload-dragger <a-upload-dragger
style="height: 174px; width: 174px" style="height: 174px; width: 174px;"
class="upload-dragger" class="upload-dragger"
v-model:fileList="fileList" v-model:fileList="fileList"
name="file" name="file"
@ -31,16 +29,16 @@
<p class="ant-upload-drag-icon"> <p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined> <inbox-outlined></inbox-outlined>
</p> </p>
<div style="opacity: 0.7"> <div style="opacity: 0.7;">
<a-button :icon="h(PlusOutlined)">文件上传</a-button> <a-button :icon="h(PlusOutlined)">文件上传</a-button>
</div> </div>
</a-upload-dragger> </a-upload-dragger>
</div> </div>
<div class="upload-span"> <div class="upload-span">
<div class="upload-span-content"> <div class="upload-span-content">
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div> <div style="opacity: 0.7;">将文件拖拽到这里或点击上传按钮</div>
<div style="color: #1e5eff">支持扩展名：zip</div> <div style="color: #1E5EFF;">支持扩展名：zip</div>
<div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div> <div style="opacity: 0.7;">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
</div> </div>
</div> </div>
<div class="upload-form"> <div class="upload-form">
@ -49,10 +47,9 @@
:model="uploadFrom" :model="uploadFrom"
:label-col="{ style: { width: '75px' } }" :label-col="{ style: { width: '75px' } }"
labelAlign="right" labelAlign="right"
:rules="uploadFormRules" :rules="uploadFormRules">
>
<a-form-item label="服务名称" name="serverName"> <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>
<a-form-item label="空间参考" name="spaceType"> <a-form-item label="空间参考" name="spaceType">
<!-- <a-input v-model:value="uploadFrom.spaceType" /> --> <!-- <a-input v-model:value="uploadFrom.spaceType" /> -->
@ -63,7 +60,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="表名" name="tableName"> <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-item>
</a-form> </a-form>
<div class="upload-span-button"> <div class="upload-span-button">
@ -72,16 +69,10 @@
</div> </div>
</div> </div>
<div class="edit-info-div" v-show="current === 1"> <div class="edit-info-div" v-show="current === 1">
<a-table <a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true" :scroll="{y: 260}">
:columns="columns"
:data-source="dataList"
:pagination="false"
:bordered="true"
:scroll="{ y: 260 }"
>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'type'"> <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="geometry">geometry</a-select-option>
<a-select-option value="varchar">varchar</a-select-option> <a-select-option value="varchar">varchar</a-select-option>
<a-select-option value="text">text</a-select-option> <a-select-option value="text">text</a-select-option>
@ -106,15 +97,13 @@
<div class="insert-list-button" @click="insertListItem">新增一条</div> <div class="insert-list-button" @click="insertListItem">新增一条</div>
<div class="footer-button"> <div class="footer-button">
<a-button @click="current--">取消</a-button> <a-button @click="current--">取消</a-button>
<a-button style="margin-left: 25px" type="primary" @click="submitDataList" <a-button style="margin-left: 25px;" type="primary" @click="submitDataList">下一步</a-button>
>下一步</a-button
>
</div> </div>
</div> </div>
<div class="submit-success" v-show="current === 2"> <div class="submit-success" v-show="current === 2">
<div class="success-content"> <div class="success-content">
<CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" /> <CheckCircleOutlined style="font-size: 100px;color: #1FD286;margin-bottom:30px"/>
<div style="margin-bottom: 19px; font-size: 26px">导入成功</div> <div style="margin-bottom:19px;font-size:26px">导入成功</div>
<div><a-button type="primary">查看数据</a-button></div> <div><a-button type="primary">查看数据</a-button></div>
</div> </div>
</div> </div>
@ -123,227 +112,209 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue'; import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from "vue"
import { import { CloseCircleOutlined, PlusOutlined, DeleteOutlined,CheckCircleOutlined } from "@ant-design/icons-vue"
CloseCircleOutlined, import './index.scss'
PlusOutlined, import { InboxOutlined } from '@ant-design/icons-vue';
DeleteOutlined, import { message } from 'ant-design-vue';
CheckCircleOutlined, import type { UploadChangeParam } from 'ant-design-vue';
} from '@ant-design/icons-vue'; import type { UploadProps } from 'ant-design-vue';
import './index.scss'; // import { uploadShp } from '@/api/sys/analysis.ts'
import { InboxOutlined } from '@ant-design/icons-vue'; import axios from 'axios'
import { message } from 'ant-design-vue'; import { v4 as uuidv4 } from 'uuid';
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 current = ref(0)
const fileList = ref<UploadProps['fileList']>([]); const fileList = ref<UploadProps['fileList']>([]);
const props = defineProps(['openModal']); const props = defineProps(['openModal'])
const emits = defineEmits(['update:openModal']); const emits = defineEmits(['update:openModal'])
const uploadFrom = reactive({ const uploadFrom = reactive({
serverName: '', serverName:'',
spaceType: null, spaceType:null,
tableName: '', tableName:'',
}); })
const formRef = ref(); const formRef = ref()
const dataList = ref([]); const dataList = ref([])
const isShp = ref(false); const isShp = ref(false)
// todo // todo
const columns = [ const columns = [
{ title: 'Shp原始字段', dataIndex: 'name', key: 'name' }, {title: 'Shp原始字段',dataIndex: 'name',key: 'name'},
{ title: '数据类型', dataIndex: 'type', key: 'type' }, {title: '数据类型',dataIndex: 'type',key: 'type'},
{ title: '数据长度', dataIndex: 'length', key: 'length' }, {title: '数据长度',dataIndex: 'length',key: 'length'},
{ title: '英文名称', dataIndex: 'refName', key: 'refName' }, {title: '英文名称',dataIndex: 'refName',key: 'refName'},
{ title: '中文名称', dataIndex: 'initName', key: 'initName' }, {title: '中文名称',dataIndex: 'initName',key: 'initName'},
{ title: '操作', dataIndex: 'operation', key: 'operation' }, {title: '操作',dataIndex: 'operation',key: 'operation'},
]; ]
const uploadFormRules = { const uploadFormRules = {
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }], serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' },],
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }], spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' },],
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }], tableName: [{ required: true, message: '请输入表名', trigger: 'blur' },],
}; }
const beforeUpload: UploadProps['beforeUpload'] = (file) => { const beforeUpload: UploadProps['beforeUpload'] = (file) => {
console.log('beforeUpload', file); console.log('beforeUpload',file)
fileList.value = [file]; fileList.value = [file];
return false; return false;
}; };
const submitShp = () => { const submitShp = () => {
formRef.value formRef.value.validate().then(() => {
.validate() if(fileList.value?.length < 1){
.then(() => { message.warning('请选择shp文件')
if (fileList.value?.length < 1) { return
message.warning('请选择shp文件'); }
return; let formData = new FormData();
} const [proxyFile] = fileList.value
let formData = new FormData(); let file = proxyFile.originFileObj
const [proxyFile] = fileList.value; formData.append('file', file)
let file = proxyFile.originFileObj; formData.append('serverName',uploadFrom.serverName)
formData.append('file', file); formData.append('spaceType',uploadFrom.spaceType)
formData.append('serverName', uploadFrom.serverName); formData.append('tableName',uploadFrom.tableName)
formData.append('spaceType', uploadFrom.spaceType); axios.post('http://221.2.83.254:9006/geoserver/uploadFile',formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
formData.append('tableName', uploadFrom.tableName); console.log(res)
axios let data = {
.post('http://221.2.83.254:9006/geoserver/uploadFile', formData, { "dataType": "线",
headers: { 'Content-Type': 'multipart/form-data' }, "heads": [
}) {
.then((res) => { "name": "geom",
console.log(res); "length": "",
let data = { "type": "geometry"
dataType: '线', },
heads: [ {
{ "name": "MINGCHENG",
name: 'geom', "length": 319,
length: '', "type": "varchar"
type: 'geometry', },
}, {
{ "name": "CHANGDU",
name: 'MINGCHENG', "length": 319,
length: 319, "type": "varchar"
type: 'varchar', }
}, ],
{ "styleName": null,
name: 'CHANGDU', "tableName": "aa"
length: 319, }
type: 'varchar', let showData = data.heads.map(item => {
}, return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
],
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);
});
}) })
.catch((err) => { dataList.value = showData
console.log(err); current.value++
}); }).catch(err => {
}; console.log(err)
const closeModal = () => { })
emits('update:openModal', false); }).catch(err => {
formRef.value.resetFields(); console.log(err)
fileList.value = []; })
current.value = 0; }
}; const closeModal = () => {
const deleteListItem = (record) => { emits('update:openModal', false)
dataList.value = dataList.value.filter((item) => item.key !== record.key); formRef.value.resetFields()
}; fileList.value = []
const insertListItem = () => { current.value = 0
dataList.value.push({ }
key: uuidv4(), const deleteListItem = (record) => {
name: '', dataList.value = dataList.value.filter(item => item.key !== record.key)
type: '', }
length: '', const insertListItem = () => {
refName: '', dataList.value.push({
initName: '', key:uuidv4(),
}); name:'',
}; type:'',
const submitDataList = () => { length:'',
console.log(dataList.value); refName:'',
current.value++; initName:'',
}; })
}
const submitDataList = () => {
console.log(dataList.value)
current.value++
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.insert-shp-modal { .insert-shp-modal{
.title { .title{
height: 77px; height: 77px;
border-bottom: 1px solid #d7dbec; 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;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
padding-left: 63px; .upload-dragger{
font-size: 28px; height: 174px;
}
} }
.content { .upload-span{
padding: 106px; margin-left: 40px;
}
.steps {
// margin-bottom: 80px;
}
.select-file-div {
padding-left: 52px;
padding-top: 80px;
display: flex; display: flex;
.upload-div { flex-direction: column;
width: 200px; justify-content: space-between;
height: 200px; .upload-span-content{
background: #ffffff; font-size:16px;
box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35); margin-top: 8px;
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;
}
} }
} }
.edit-info-div { .upload-form{
padding-top: 26px; flex: 1;
.footer-button { margin-left:40px;
margin-top: 20px; .upload-span-button{
display: flex; display: flex;
justify-content: flex-end; 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> </style>

312
src/components/MapboxMaps/LayerComponent/index.vue
View File

@ -2,13 +2,7 @@
<div class="LayerComponent"> <div class="LayerComponent">
<div class="title">图层</div> <div class="title">图层</div>
<div class="insert-layer"> <div class="insert-layer">
<a-button <a-button class="add-layer-button" type="primary" :icon="h(PlusOutlined)" @click="openInsertShpModal">添加图层</a-button>
class="add-layer-button"
type="primary"
:icon="h(PlusOutlined)"
@click="openInsertShpModal"
>添加图层</a-button
>
<span class="clear-layer-button">清空</span> <span class="clear-layer-button">清空</span>
</div> </div>
<div class="show-current-layer"> <div class="show-current-layer">
@ -18,31 +12,21 @@
</div> </div>
</div> </div>
<div class="show-layers"> <div class="show-layers">
<div <div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`"
:class="`show-layer-item ${isSelected === item.id ? 'select-list-item' : ''}`" v-for="item in dataList" :key='item.id' @click="selectLayer(item.id)">
v-for="item in dataList" <a-checkbox v-model:checked="item.checked"/>
:key="item.id"
@click="selectLayer(item.id)"
>
<a-checkbox v-model:checked="item.checked" />
<a-image <a-image
:width="119" :width="119"
:height="87" :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" src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
:preview="false" :preview="false"
:fallback="errorImage" :fallback="errorImage"/>
/>
<div class="layer-item-text"> <div class="layer-item-text">
<div class="item-title">名称： {{ item.name }}</div> <div class="item-title">名称： {{ item.name }}</div>
<div class="item-control"> <div class="item-control">
<a-button <a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;">查看数据</a-button>
type="primary" <a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
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> </div>
</div> </div>
@ -51,158 +35,158 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'; import { PlusOutlined } from '@ant-design/icons-vue'
import { h, defineEmits, ref } from 'vue'; import { h, defineEmits, ref } from "vue"
import { errorImage } from '../util.ts'; import { errorImage } from "../util.ts"
const dataList = ref([ const dataList = ref([
{ {
id: 1, id:1,
name: '111', name:"111",
checked: true, checked:true,
}, },
{ {
id: 2, id:2,
name: '222', name:"222",
checked: false, checked:false,
}, },
{ {
id: 3, id:3,
name: '333', name:"333",
checked: false, checked:false,
}, },
{ {
id: 4, id:4,
name: '444', name:"444",
checked: false, checked:false,
}, },
{ {
id: 5, id:5,
name: '555', name:"555",
checked: false, checked:false,
}, },
{ {
id: 6, id:6,
name: '666', name:"666",
checked: false, checked:false,
}, },
{ {
id: 7, id:7,
name: '777', name:"777",
checked: false, checked:false,
}, },
{ {
id: 8, id:8,
name: '888', name:"888",
checked: false, checked:false,
}, },
]); ])
const isSelected = ref(); const isSelected = ref()
const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal']); const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal"])
const changeClick = () => { const changeClick = () => {
emits('changeOpenModal', true); emits("changeOpenModal",true)
}; }
const openInsertShpModal = () => { const openInsertShpModal = () => {
emits('changeOpenInsertShpModal', true); emits("changeOpenInsertShpModal",true)
}; }
const selectLayer = (id: number) => { const selectLayer = (id:number) => {
isSelected.value = id; isSelected.value = id
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.LayerComponent { .LayerComponent{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 356px; width: 356px;
height: 100%; height: 100%;
background-color: #e0e5ed; background-color: #E0E5ED;
.title { .title{
height: 61px; height:61px;
font-size: 26px; font-size: 26px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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;
} }
.insert-layer { .clear-layer-button{
height: 61px; user-select: none;
background-color: #fff; cursor: pointer;
padding-left: 16px; }
padding-right: 14px; }
.show-current-layer{
padding-left: 15px;
padding-right: 15px;
.current-layer-div{
height: 37px;
display: flex; display: flex;
justify-content: space-between; user-select: none;;
align-items: center; .current-layer-title{
margin-bottom: 20px; background-color: #fff;
.add-layer-button { flex: 1;
background-color: #0081ff; display: flex;
align-items: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
} }
.clear-layer-button { .current-layer-title::before{
user-select: none; 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; cursor: pointer;
} }
} }
.show-current-layer { }
padding-left: 15px; .show-layers{
padding-right: 15px; height: calc(100% - 179px);
.current-layer-div { padding-top: 14px;
height: 37px; padding-left: 15px;
display: flex; padding-right: 15px;
user-select: none; overflow: auto;
.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 { .show-layer-item{
background-color: #fff; background-color: #fff;
height: 133px; height: 133px;
border-radius: 5px; border-radius: 5px;
padding: 23px 10px; padding: 23px 10px;
display: flex;
margin-bottom: 14px;
.layer-item-text{
margin-left: 20px;
flex: 1;
display: flex; display: flex;
margin-bottom: 14px; flex-direction: column;
.layer-item-text { justify-content: space-between;
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> </style>

70
src/components/MapboxMaps/LayerControl/index.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<div class="LayerControl"> <div class="LayerControl">
<a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)" <a-button type="primary" class="blue line-up" :icon="h(EditOutlined)">绘制</a-button>
>绘制</a-button
>
<a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</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="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
<a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button> <a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
@ -14,47 +12,35 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { EditOutlined, FormOutlined, BlockOutlined,
EditOutlined, SplitCellsOutlined, DragOutlined, DeleteOutlined, RollbackOutlined, CloseCircleOutlined, } from "@ant-design/icons-vue"
FormOutlined, import { h } from "vue"
BlockOutlined,
SplitCellsOutlined,
DragOutlined,
DeleteOutlined,
RollbackOutlined,
CloseCircleOutlined,
} from '@ant-design/icons-vue';
import { h } from 'vue';
const emit = defineEmits(['draw']);
function drawClick() {
emit('draw');
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.LayerControl { .LayerControl{
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 386px; left: 386px;
background-color: #fff; background-color: #fff;
padding: 13px 13px 8px 13px; padding: 13px 13px 8px 13px;
button { button{
margin-bottom: 5px; 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> </style>

520
src/components/MapboxMaps/MapboxMap.vue
View File

@ -11,283 +11,285 @@
/> />
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" /> <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
</div> --> </div> -->
<LayerComponent <LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
@changeOpenModal="changeOpenModal" <LayerControl />
@changeOpenInsertShpModal="changeOpenInsertShpModal" <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
/>
<LayerControl @draw="handlerDrawPolygon" />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
<InsertShp v-model:openModal="insertShpModal" /> <InsertShp v-model:openModal="insertShpModal" />
<DataListComponent /> <DataListComponent />
<RightShowInfo v-model:openModal="openRightInfo" /> <RightShowInfo />
</div> </div>
</template> </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';
<script lang="ts" setup> // 图形绘制工具类
import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue'; import MapboxDraw from "@mapbox/mapbox-gl-draw";
import { useMessage } from '@/hooks/web/useMessage';
import mapboxgl, { Map, Popup } from 'mapbox-gl';
// 图形绘制工具类 import U from 'mapbox-gl-utils';
import MapboxDraw from '@mapbox/mapbox-gl-draw'; 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 U from 'mapbox-gl-utils'; import {
import 'mapbox-gl/dist/mapbox-gl.css'; SnapPolygonMode,
import './src/index.less'; SnapPointMode,
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config'; SnapLineMode,
import { MP } from './src/MP'; SnapModeDrawStyles,
import { DrawingType } from '@/enums/mapEnum'; 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 { const openModal = ref(false);
SnapPolygonMode, const insertShpModal = ref(false)
SnapPointMode, const changeOpenModal = (value) => {
SnapLineMode, openModal.value = value
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';
const openModal = ref(false);
const insertShpModal = ref(false);
const openRightInfo = 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];
})
: [];
console.log('nextMapControl::: ', nextMapControl);
// 定义地图容器
let map: Map;
let popup: Popup;
let clickPoisition: Array<number> = [];
let selectFeature: Object = {};
let mp: any = null;
const { createConfirm, createMessage } = useMessage();
// 定义地图回调emit
// 地图加载完成回调
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
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;
});
// 初始化地图
// 返回地图实例
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,
});
map.addControl(drawTool, 'top-right');
};
// 将图斑复制到指定图层
const handlerCopyToTargetLayer = (e) => {
if (e.features.length > 0) {
if (popup) {
popup.remove();
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();
} }
}; 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];
})
: [];
const handlerCopyFeature = () => { console.log('nextMapControl::: ', nextMapControl);
console.log(selectFeature);
popup.remove(); // 定义地图容器
createMessage.success('复制成功！'); let map: Map;
}; let popup:Popup;
</script> let clickPoisition:Array<number> = [];
let selectFeature:Object = {};
let mp: any = null;
const { createConfirm, createMessage } = useMessage();
// 定义地图回调emit
// 地图加载完成回调
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
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;
});
// 初始化地图
// 返回地图实例
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,
});
map.addControl(drawTool, "top-right");
}
// 将图斑复制到指定图层
const handlerCopyToTargetLayer = (e) => {
if(e.features.length>0){
if(popup){
popup.remove();
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();
}
}
const handlerCopyFeature = () => {
console.log(selectFeature)
popup.remove();
createMessage.success("复制成功！")
}
</script>
<style> <style>
.mapboxgl-ctrl-group:not(:empty) { .mapboxgl-ctrl-group:not(:empty){
box-shadow: none; box-shadow: none;
} }
.mapboxgl-ctrl-group { .mapboxgl-ctrl-group{
background: none !important; background:none!important;
} }
.mapbox-gl-draw_ctrl-draw-btn { .mapbox-gl-draw_ctrl-draw-btn{
width: 40px !important; width:40px!important;
height: 40px !important; height:40px!important;
float: left; float:left;
border-radius: 50%; border-radius: 50%;
} }
.mapboxgl-ctrl-top-right { .mapboxgl-ctrl-top-right{
} }
.mapboxgl-ctrl-group button + button { .mapboxgl-ctrl-group button+button{
border: 0px; border:0px;
margin: 0px 3px; margin:0px 3px;
} }
.mapbox-gl-draw_ctrl-draw-btn:hover { .mapbox-gl-draw_ctrl-draw-btn:hover{
transform: scale(1.2); transform: scale(1.2);
} }
.mapbox-gl-draw_polygon { .mapbox-gl-draw_polygon{
background-image: url(/polygon.png); background-image:url(/polygon.png);
background-size: 100% 100%; background-size:100% 100%;
width: 100px; width:100px;
height: 100px; height:100px;
} }
.mapbox-gl-draw_point { .mapbox-gl-draw_point{
background-image: url(/point.png); background-image:url(/point.png);
background-size: 100% 100%; background-size:100% 100%;
width: 100px; width:100px;
height: 100px; height:100px;
} }
.mapbox-gl-draw_line { .mapbox-gl-draw_line{
background-image: url(/line.png); background-image:url(/line.png);
background-size: 100% 100%; background-size:100% 100%;
width: 100px; width:100px;
height: 100px; height:100px;
} }
.mapbox-gl-draw_trash { .mapbox-gl-draw_trash{
background-image: url(/del.png); background-image:url(/del.png);
background-size: 100% 100%; background-size:100% 100%;
width: 100px; width:100px;
height: 100px; height:100px;
} }
.mapbox-gl-draw_combine { .mapbox-gl-draw_combine{
background-image: url(/combine.png); background-image:url(/combine.png);
background-size: 100% 100%; background-size:100% 100%;
width: 100px; width:100px;
height: 100px; height:100px;
} }
.mapbox-gl-draw_uncombine{
background-image:url(/uncombine.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> </style>

67
src/components/MapboxMaps/RightShowInfo/index.vue
View File

@ -1,5 +1,5 @@
<template> <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="title">
<div class="tag"></div> <div class="tag"></div>
<div class="title-text">操作</div> <div class="title-text">操作</div>
@ -16,46 +16,39 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, defineProps, watch } from 'vue'; import { ref } from "vue"
import './index.scss'; import './index.scss'
const open = ref(true); const open = ref(true)
const props = defineProps(['openModal']);
watch(
() => props.openModal,
(newValue) => {
open.value = newValue;
},
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right-show-info { .right-show-info {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 356px; width: 356px;
height: 100%; height: 100%;
background-color: #fff; background-color: #FFF;
.title { .title{
height: 61px; height: 61px;
padding-left: 26px; padding-left: 26px;
display: flex; display:flex;
align-items: center; align-items: center;
border-bottom: 1px solid #d9e2f2; border-bottom: 1px solid #D9E2F2;
.tag { .tag{
width: 3px; width: 3px;
height: 23px; height: 23px;
background-color: #0081ff; background-color:#0081FF;
margin-right: 19px; margin-right: 19px;
}
.title-text {
color: #141d27;
font-size: 24px;
}
} }
.content { .title-text{
height: calc(100% - 61px); color: #141D27 ;
padding: 25px; font-size: 24px;
} }
} }
.content{
height: calc(100% - 61px);
padding: 25px;
}
}
</style> </style>