531 lines
15 KiB
Vue
531 lines
15 KiB
Vue
<template>
|
||
<n-grid style="width: 96vw;" class="mx-auto" :cols="2">
|
||
<n-gi style="padding-top: 1.5vh; padding-bottom: 0;" class="w-h-full p">
|
||
<n-scrollbar style="max-height: 48vh; border: 1px solid #eee">
|
||
<n-dynamic-input
|
||
v-model:value="geodata"
|
||
:on-create="onCreate"
|
||
:on-remove="onRemove"
|
||
>
|
||
<template #default="{ value, index }">
|
||
<div style="display: flex; align-items: flex-start; width: 100%">
|
||
<div style="width: 50%">
|
||
<n-input maxlength="13" clearable v-model:value="value.lat" type="text" placeholder="经度" @input="handleInput" :status="value.latStatus" />
|
||
<n-gradient-text :size="12" type="error" v-show="value.latCheck">
|
||
<div v-html="value.latErrMsg"></div>
|
||
</n-gradient-text>
|
||
</div>
|
||
<div style="width: 50%">
|
||
<n-input maxlength="12" clearable v-model:value="value.lng" type="text" placeholder="纬度" @input="handleInput" :status="value.lngStatus" />
|
||
<n-gradient-text :size="12" type="error" v-show="value.lngCheck">
|
||
<div v-html="value.lngErrMsg"></div>
|
||
</n-gradient-text>
|
||
</div>
|
||
</div>
|
||
<n-button style="padding: 0 5px;font-size: 24px;" @click="move('up', index)">
|
||
<n-icon>
|
||
<UpIcon />
|
||
</n-icon>
|
||
</n-button>
|
||
<n-button style="padding: 0 5px;font-size: 24px;" @click="move('down', index)">
|
||
<n-icon>
|
||
<DownIcon />
|
||
</n-icon>
|
||
</n-button>
|
||
</template>
|
||
</n-dynamic-input>
|
||
</n-scrollbar>
|
||
<v-chart style="max-height: 38vh; border: 1px solid #eee" class="chart" id="chart" :option="option" />
|
||
<div style="margin-top: 1vh;" class="w-full flex flex-1">
|
||
<n-button class="mx-auto" :disabled="geodata.length == 0 ? true : false" size="large" type="primary" @click="calculation">计 算</n-button>
|
||
<n-button class="mx-auto" :disabled="geodata.length == 0 ? true : false" size="large" type="error" @click="delgeo">清空输入</n-button>
|
||
</div>
|
||
</n-gi>
|
||
<n-gi style="padding-top: 1.5vh; padding-bottom: 0;" class="w-h-full p">
|
||
<n-data-table :columns="columns" :data="data" :single-line="false" :pagination="pagination" :style="{ height: '86vh' }" flex-height />
|
||
<div style="margin-top: 1vh;" class="w-full flex flex-1">
|
||
<div style="width: 128px" class="mx-auto">
|
||
<n-select v-model:value="unit" :options="options" />
|
||
</div>
|
||
<n-button class="mx-auto" :disabled="data.length == 0 ? true : false" size="large" type="error" @click="delall">清除数据</n-button>
|
||
</div>
|
||
</n-gi>
|
||
</n-grid>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, h, watch, reactive } from "vue"
|
||
import * as echarts from "echarts"
|
||
import { use, registerMap } from "echarts/core"
|
||
import { CanvasRenderer } from 'echarts/renderers'
|
||
import { MapChart, ScatterChart } from 'echarts/charts'
|
||
import VChart from "vue-echarts"
|
||
import { NGi, NGrid, NButton, NDynamicInput, NDataTable, NScrollbar, NInput, NGradientText, NIcon, NSelect, useMessage, useDialog } from "naive-ui"
|
||
import { KeyboardArrowUpRound as UpIcon, KeyboardArrowDownRound as DownIcon } from '@vicons/material'
|
||
|
||
const message = useMessage()
|
||
|
||
const dialog = useDialog()
|
||
|
||
const geodata = ref([
|
||
{
|
||
lat: "",
|
||
latStatus: "",
|
||
latCheck: "",
|
||
latErrMsg:"",
|
||
lng: "",
|
||
lngStatus: "",
|
||
lngCheck: "",
|
||
lngErrMsg:""
|
||
}
|
||
])
|
||
|
||
const onCreate = () => {
|
||
return {
|
||
lat: "",
|
||
latStatus: "",
|
||
latCheck: "",
|
||
latErrMsg:"",
|
||
lng: "",
|
||
lngStatus: "",
|
||
lngCheck: "",
|
||
lngErrMsg:""
|
||
}
|
||
}
|
||
|
||
const unit = ref('平方米/m²')
|
||
|
||
const options = [
|
||
{
|
||
label:"平方米/m²",
|
||
value:'平方米/m²'
|
||
},
|
||
{
|
||
label:"平方千米/km²",
|
||
value:'平方千米/km²'
|
||
}]
|
||
|
||
const move = (updown, index) => {
|
||
let moveit
|
||
if(updown == 'up'){
|
||
if(index !== 0){
|
||
moveit = geodata.value[index]
|
||
geodata.value[index] = geodata.value[index - 1]
|
||
geodata.value[index - 1] = moveit
|
||
moveit = null
|
||
}
|
||
}
|
||
if(updown == 'down'){
|
||
if(index !== geodata.value.length-1){
|
||
moveit = geodata.value[index]
|
||
geodata.value[index] = geodata.value[index + 1]
|
||
geodata.value[index + 1] = moveit
|
||
moveit = null
|
||
}
|
||
}
|
||
}
|
||
|
||
const columns = ref([
|
||
{
|
||
title: '经纬度数据',
|
||
key: 'latandlng',
|
||
render (row) {
|
||
const tags = row.latandlng.map((DataTag) => {
|
||
return h(
|
||
NScrollbar,
|
||
{
|
||
style: {
|
||
whiteSpace: 'pre-wrap'
|
||
}
|
||
},
|
||
{
|
||
default: () => `经度：${DataTag[0]}\n纬度：${DataTag[1]}\n\n`
|
||
}
|
||
)
|
||
})
|
||
return tags
|
||
}
|
||
},
|
||
{
|
||
title: `面积(单位:${ unit.value })`,
|
||
key: 'area'
|
||
},
|
||
{
|
||
title: '轮廓',
|
||
key: 'operate',
|
||
fixed: 'right',
|
||
align: 'center',
|
||
render (row) {
|
||
return h(
|
||
NButton,
|
||
{
|
||
strong: true,
|
||
tertiary: true,
|
||
size: 'large',
|
||
type: 'info',
|
||
onClick: () => drawContour(row)
|
||
},
|
||
{ default: () => '生成轮廓' }
|
||
)
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'operate',
|
||
fixed: 'right',
|
||
align: 'center',
|
||
render (row) {
|
||
return h(
|
||
NButton,
|
||
{
|
||
strong: true,
|
||
tertiary: true,
|
||
size: 'large',
|
||
type: 'error',
|
||
onClick: () => deldata(row)
|
||
},
|
||
{ default: () => '删除' }
|
||
)
|
||
}
|
||
}])
|
||
|
||
const data = ref([])
|
||
|
||
const geoObj = reactive({
|
||
"type":"FeatureCollection",
|
||
"features":[{
|
||
"type":"Feature",
|
||
"properties":{
|
||
"adcode":0,
|
||
"name":"经纬度数据",
|
||
"center":[0,0],
|
||
"centroid":[0,0],
|
||
"cp":[15,12],
|
||
"childrenNum":0,
|
||
"level":"city",
|
||
"acroutes":[0,0],
|
||
"parent":{"adcode":0}
|
||
},
|
||
"geometry":{
|
||
"type":"MultiPolygon",
|
||
"coordinates":[[[[15,30],[0,0],[15,10],[30,0]]]]
|
||
}
|
||
}]
|
||
})
|
||
|
||
use([ CanvasRenderer, MapChart, ScatterChart ])
|
||
registerMap('nowin',geoObj)
|
||
const option = reactive({
|
||
geo: [
|
||
{
|
||
zlevel:3,
|
||
map: 'nowin',
|
||
label: {
|
||
show: true,
|
||
color: 'black',
|
||
fontSize: 18
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#26c4eb',
|
||
shadowColor:"#01273F",
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
borderWidth:0.5,
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [{
|
||
//设置为分散点
|
||
type: 'scatter',
|
||
//series坐标系类型
|
||
coordinateSystem: 'geo',
|
||
//设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
||
symbol: 'pin',
|
||
// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
|
||
symbolSize: [40,40],
|
||
//气泡字体设置
|
||
label: {
|
||
normal: {
|
||
show: false,//是否显示
|
||
textStyle: {
|
||
color: '#000',//字体颜色
|
||
fontSize: 8,//字体大小
|
||
},
|
||
//返回气泡数据
|
||
formatter (value){
|
||
return value.data.value[2]
|
||
}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#1E90FF', //标志颜色
|
||
areaColor: '#26c4eb',
|
||
borderWidth: 0.5,
|
||
borderColor: "#ffffff",
|
||
shadowColor:"#01273F",
|
||
shadowBlur: 6
|
||
}
|
||
},
|
||
// //给区域赋值
|
||
data: [],
|
||
showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
|
||
rippleEffect: {//涟漪特效相关配置。
|
||
brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
|
||
},
|
||
hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。
|
||
zlevel: 3//所属图形的 zlevel 值
|
||
}]
|
||
})
|
||
|
||
window.addEventListener('resize', () => {
|
||
let chart = echarts.init(document.getElementById('chart'))
|
||
chart.resize()
|
||
})
|
||
|
||
const rerender = (mapName,mapArea,mapGeo,initialize) => {
|
||
if(mapGeo){
|
||
if(initialize){
|
||
geoObj.features[0].properties.cp = [15,12]
|
||
}
|
||
else{
|
||
geoObj.features[0].properties.cp = centerPoint(mapGeo)
|
||
}
|
||
geoObj.features[0].geometry.coordinates[0][0] = mapGeo
|
||
}
|
||
geoObj.features[0].properties.name = mapArea
|
||
registerMap(mapName, geoObj)
|
||
option.geo[0].map = mapName
|
||
}
|
||
|
||
const onRemove = () => {
|
||
if(geodata.value.length < 3){
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
}
|
||
}
|
||
|
||
const inputFilter = (inputData) => {
|
||
let infilter = []
|
||
let beffilter = [...inputData]
|
||
beffilter.forEach(item => {
|
||
if(item !== '\u00A0' && item !== '\u0020' && item !== '\u3000'){
|
||
if(!isNaN(Number(item))){
|
||
infilter.push(item)
|
||
}
|
||
else if(item == '.'){
|
||
if(infilter.indexOf('.') == '-1'){
|
||
infilter.push(item)
|
||
}
|
||
}
|
||
else if(item == '-'){
|
||
if(infilter.indexOf('-') == '-1'){
|
||
infilter.push(item)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
return infilter.join('')
|
||
}
|
||
|
||
const stuck = (dataObj,dataItem,Status,Check,ErrMsg,throwMsg) => {
|
||
dataObj[dataItem + 'Status'] = Status
|
||
dataObj[dataItem + 'Check'] = Check
|
||
dataObj[dataItem + 'ErrMsg'] = ErrMsg
|
||
if(throwMsg){
|
||
message.error(ErrMsg)
|
||
throw new Error(ErrMsg)
|
||
}
|
||
}
|
||
|
||
const judgment = (dataObj,dataItem,ErrMsg,throwMsg) => {
|
||
let toJudgment
|
||
if(dataItem == 'lat'){
|
||
toJudgment = Number(dataObj[dataItem]).toFixed(8) > 180 || Number(dataObj[dataItem]).toFixed(8) < -180
|
||
}
|
||
else if(dataItem == "lng"){
|
||
toJudgment = Number(dataObj[dataItem]).toFixed(8) > 90 || Number(dataObj[dataItem]).toFixed(8) < -90
|
||
}
|
||
if(dataObj[dataItem] == ''){
|
||
stuck(dataObj,dataItem,'error',true,ErrMsg+'不能为空',throwMsg)
|
||
}
|
||
else if(dataObj[dataItem].indexOf('-') !== -1 && dataObj[dataItem].indexOf('-') !== 0 || dataObj[dataItem].indexOf('.') == dataObj[dataItem].length-1 || dataObj[dataItem].indexOf('-')+1 == dataObj[dataItem].indexOf('.')){
|
||
stuck(dataObj,dataItem,'error',true,ErrMsg+'数据格式错误',throwMsg)
|
||
}
|
||
else if(toJudgment){
|
||
stuck(dataObj,dataItem,'error',true,'非法的'+ErrMsg+'数据',throwMsg)
|
||
}
|
||
else{
|
||
stuck(dataObj,dataItem,'success',false,'',false)
|
||
if(throwMsg){
|
||
dataObj[dataItem] = Number(dataObj[dataItem]).toString()
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleInput = () => {
|
||
geodata.value.forEach((element,index) => {
|
||
element.lat = inputFilter(element.lat)
|
||
element.lng = inputFilter(element.lng)
|
||
judgment(element,'lat','经度',false)
|
||
judgment(element,'lng','纬度',false)
|
||
})
|
||
}
|
||
|
||
//地球赤道半径 6378.137
|
||
//地球平均半径 6371.004
|
||
//弧度转角度 Math.PI / 180.0
|
||
//角度转弧度 180.0 / Math.PI
|
||
//米转角度 2.0 * Math.PI * 6371.004 / 360.0
|
||
|
||
//需求决定了输入的经纬度距离不会太远，近似为求平面多边形的面积
|
||
const calculationArea = (points) => {
|
||
let area = 0
|
||
//将多边形分解为三角形
|
||
points.forEach((item,index) => {
|
||
let j = (index + 1) % points.length
|
||
let xi = points[index][0] * (2.0 * Math.PI * 6371004.0 / 360.0) * Math.cos(points[index][1] * (Math.PI / 180.0))
|
||
let yi = points[index][1] * (2.0 * Math.PI * 6371004.0 / 360.0)
|
||
let xj = points[j][0] * (2.0 * Math.PI * 6371004.0 / 360.0) * Math.cos(points[j][1] * (Math.PI / 180.0))
|
||
let yj = points[j][1] * (2.0 * Math.PI * 6371004.0 / 360.0)
|
||
area += xi * yj - xj * yi
|
||
})
|
||
//计算结果为平方米
|
||
if(unit.value == '平方米/m²'){
|
||
return Math.abs(area / 2).toFixed(4) + unit.value
|
||
}
|
||
else{
|
||
return (Math.abs(area / 2) / 1000000).toFixed(9) + unit.value
|
||
}
|
||
}
|
||
|
||
const centerPoint = (allPoint) => {
|
||
let averagelat = 0
|
||
let averagelng = 0
|
||
allPoint.forEach(item => {
|
||
averagelat = Number(item[0]) + averagelat
|
||
averagelng = Number(item[1]) + averagelng
|
||
})
|
||
return [averagelat/allPoint.length,averagelng/allPoint.length]
|
||
}
|
||
|
||
const diffData = (areaResult) => {
|
||
let allowCalaulation = true
|
||
data.value.forEach(items => {
|
||
if(items.latandlng.join(';') == areaResult.latandlng.join(';')){
|
||
allowCalaulation = false
|
||
}
|
||
})
|
||
if(allowCalaulation){
|
||
data.value.push(areaResult)
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
rerender('updataGeo',data.value[data.value.length-1].area,data.value[data.value.length-1].latandlng,false)
|
||
}
|
||
}
|
||
|
||
const calculation = () => {
|
||
if(geodata.value.length <= 2){
|
||
message.error('经纬度数据对的数量不能满足运算')
|
||
return
|
||
}
|
||
let pointArr = []
|
||
geodata.value.forEach((element,index) => {
|
||
judgment(element,'lat','经度',true)
|
||
judgment(element,'lng','纬度',true)
|
||
pointArr.push([element.lat.length>8?Number(element.lat).toFixed(8):Number(element.lat), element.lng.length>8?Number(element.lng).toFixed(8):Number(element.lng)])
|
||
})
|
||
let areaData = {
|
||
latandlng: pointArr,
|
||
area: calculationArea(pointArr)
|
||
}
|
||
diffData(areaData)
|
||
}
|
||
|
||
const delgeo = () => {
|
||
dialog.warning({
|
||
title: '警告',
|
||
content: '确定要清除全部输入吗？',
|
||
positiveText: '确定',
|
||
negativeText: '返回',
|
||
onPositiveClick: () => {
|
||
geodata.value = [
|
||
{
|
||
lat: "",
|
||
latStatus: "",
|
||
latCheck: "",
|
||
lng: "",
|
||
lngStatus: "",
|
||
lngCheck: ""
|
||
}
|
||
]
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
},
|
||
onNegativeClick: () => {
|
||
message.error('已返回')
|
||
}
|
||
})
|
||
}
|
||
|
||
const drawContour = (row) => {
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
rerender('updataGeo',row.area,row.latandlng,false)
|
||
}
|
||
|
||
const deldata = (row) => {
|
||
data.value.filter((item,index,array)=>{
|
||
if(item == row){
|
||
array.splice(index,1)
|
||
if(data.value.length == 0){
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const delall = () => {
|
||
dialog.warning({
|
||
title: '警告',
|
||
content: '确定要清除全部数据吗？',
|
||
positiveText: '确定',
|
||
negativeText: '返回',
|
||
onPositiveClick: () => {
|
||
data.value = []
|
||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||
},
|
||
onNegativeClick: () => {
|
||
message.error('已返回')
|
||
}
|
||
})
|
||
}
|
||
|
||
watch(unit,(value) => {
|
||
columns.value[1].title = `面积(单位:${ value })`
|
||
if(data.value.length !== 0){
|
||
data.value.forEach(element => {
|
||
if(value == '平方米/m²'){
|
||
rerender('updataGeo',element.area)
|
||
element.area = (element.area.slice(0,element.area.length-8) * 1000000).toFixed(4) + value
|
||
rerender('change',element.area)
|
||
}else{
|
||
rerender('updataGeo',element.area)
|
||
element.area = (element.area.slice(0,element.area.length-6) / 1000000).toFixed(9) + value
|
||
rerender('change',element.area)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.n-grid {
|
||
place-items: center
|
||
}
|
||
.p {
|
||
padding: 1%;
|
||
padding-top: 2%
|
||
}
|
||
.mt {
|
||
margin-top:2%
|
||
}
|
||
</style> |