Skip to content

Y
yjjbnt-project
提交 eec00994 authored 作者: xushangshu's avatar xushangshu
浏览文件
操作

永农定位工具

上级 63297dac
隐藏空白字符变更
内嵌 并排
正在显示 包含 925 行增加 和 142 行删除
src/main.js
浏览文件 @ eec00994
......@@ -8,6 +8,7 @@ import App from './App.vue'
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
const env = import.meta.env
const app = createApp(App)
......
src/views/home/index.vue
浏览文件 @ eec00994
......@@ -11,77 +11,60 @@
</header>
<main class="main">
<!-- 地图 -->
<div class="map-container" />
<div class="map-container"
ref="testMap" />
<!-- 资源目录最小化 -->
<div
v-show="resourceIsFold"
class="resource-min"
title="展开资源目录"
@click="resourceIsFold = false"
>
<div v-show="resourceIsFold"
class="resource-min"
title="展开资源目录"
@click="resourceIsFold = false">
<i class="iconfont icon-widget-layer1" />
</div>
<!-- 资源目录 -->
<div
v-show="!resourceIsFold"
class="resource-panel"
>
<div v-show="!resourceIsFold"
class="resource-panel">
<div class="panel-title">
<i class="iconfont icon-widget-layer1" />
<span>资源目录</span>
<div
class="fold-btn"
title="收起"
@click="resourceIsFold = true"
>
<div class="fold-btn"
title="收起"
@click="resourceIsFold = true">
<i class="iconfont icon-widget-menufold" />
</div>
</div>
<div class="panel-body">
<lay-input
suffix-icon="layui-icon-search"
size="sm"
/>
<lay-input suffix-icon="layui-icon-search"
size="sm" />
<div class="list-box">
<div
v-for="(item) in resourceData"
:key="item.id"
class="list-item"
>
<lay-checkbox
v-model="item.status"
:name="item.id"
skin="primary"
value=""
:label="item.name"
/>
<div v-for="(item) in resourceData"
:key="item.id"
class="list-item">
<lay-checkbox v-model="item.status"
:name="item.id"
skin="primary"
value=""
:label="item.name" />
</div>
</div>
</div>
</div>
<!-- 图例最小化 -->
<div
v-show="lengendIsFold"
class="lengend-min"
title="展开图例"
@click="lengendIsFold = false"
>
<div v-show="lengendIsFold"
class="lengend-min"
title="展开图例"
@click="lengendIsFold = false">
<i class="iconfont icon-widget-mulu" />
</div>
<div
v-show="!lengendIsFold"
class="lengend-panel"
>
<div v-show="!lengendIsFold"
class="lengend-panel">
<div class="panel-title">
<i class="iconfont icon-widget-mulu" />
<span>图例</span>
<div
class="fold-btn"
title="收起"
@click="lengendIsFold = true"
>
<div class="fold-btn"
title="收起"
@click="lengendIsFold = true">
<i class="iconfont icon-widget-menufold" />
</div>
</div>
......@@ -117,69 +100,56 @@
</div>
<!-- 工具栏 -->
<div class="map-tools">
<div
class="tools-arrow-part"
:title="!toolIsFold ? '收起' : '展开'"
@click="toolIsFold = !toolIsFold"
>
<i
class="iconfont"
:class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'"
/>
<div class="tools-arrow-part"
:title="!toolIsFold ? '收起' : '展开'"
@click="toolIsFold = !toolIsFold">
<i class="iconfont"
:class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'" />
</div>
<div
v-show="!toolIsFold"
class="tool-part-box"
>
<div class="tool-part">
<div v-show="!toolIsFold"
class="tool-part-box">
<div class="tool-part"
@click="showQueryPanel=true">
<i class="iconfont icon-widget-info-query" />
<span>查询</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<div class="tool-part">
<lay-line direction="vertical"
theme="black" />
<div class="tool-part"
@click="showPointPanel=true">
<i class="iconfont icon-widget-location1" />
<span>点定位</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<div class="tool-part">
<lay-line direction="vertical"
theme="black" />
<div class="tool-part"
@click="showPolygonPanel=true">
<i class="iconfont icon-widget-guanxianchaxun-duobianxing" />
<span>面定位</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<div class="tool-part">
<lay-line direction="vertical"
theme="black" />
<div class="tool-part"
@click="DrawUtils.startDraw(map, 'Polygon')">
<i class="iconfont icon-widget-huizhi" />
<span>绘制范围</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<lay-line direction="vertical"
theme="black" />
<div class="tool-part">
<i class="iconfont icon-widget-hand-point" />
<span>点选</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<lay-line direction="vertical"
theme="black" />
<div class="tool-part">
<i class="iconfont icon-widget-map-full" />
<span>全幅</span>
</div>
<lay-line
direction="vertical"
theme="black"
/>
<div class="tool-part">
<lay-line direction="vertical"
theme="black" />
<div class="tool-part"
@click="MeasureUtils.startMeasure(map, 'length')">
<i class="iconfont icon-widget-celiang" />
<span>测距</span>
</div>
......@@ -188,53 +158,41 @@
<!-- 行政区村庄等输入框下拉框 -->
<div class="input-box">
<lay-cascader
v-model="regionData"
:options="cascaderOptions"
:only-last-level="true"
allow-clear
placeholder="请选择行政区"
:replace-fields="replaceFields"
content-class="cascaderClass"
size="sm"
content-style="--global-checked-color: #2c5f9e"
/>
<lay-input
suffix-icon="layui-icon-search"
size="sm"
placeholder="请输入村庄名称、图斑编号"
:allow-clear="true"
@input="villageSearch"
/>
<lay-cascader v-model="regionData"
:options="cascaderOptions"
:only-last-level="true"
allow-clear
placeholder="请选择行政区"
:replace-fields="replaceFields"
content-class="cascaderClass"
size="sm"
content-style="--global-checked-color: #2c5f9e" />
<lay-input suffix-icon="layui-icon-search"
size="sm"
placeholder="请输入村庄名称、图斑编号"
:allow-clear="true"
@input="villageSearch" />
</div>
<!-- 地图类型 -->
<div
class="map-type"
@mouseenter="mapTypeIsExpand = true"
@mouseleave="mapTypeIsExpand = false"
>
<div class="map-type"
@mouseenter="mapTypeIsExpand = true"
@mouseleave="mapTypeIsExpand = false">
<ul class="list-box">
<li
v-for="(item, index) in mapTypeData"
:key="index"
class="list-item"
:class="selectIndex == index ? 'active' : ''"
:style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`"
@click="toSelectDt(index)"
>
<img
:src="item.imgUrl"
alt=""
>
<li v-for="(item, index) in mapTypeData"
:key="index"
class="list-item"
:class="selectIndex == index ? 'active' : ''"
:style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`"
@click="toSelectDt(index)">
<img :src="item.imgUrl"
alt="">
<div class="top-check">
<lay-checkbox
v-model="item.isCheck"
name="sc"
skin="primary"
value=""
:label="item.label"
/>
<lay-checkbox v-model="item.isCheck"
name="sc"
skin="primary"
value=""
:label="item.label" />
</div>
<p class="detail-info">
{{ item.title }}
......@@ -242,10 +200,117 @@
</li>
</ul>
</div>
<!-- 点定位 -->
<div class="draggable-panel point"
v-show="showPointPanel">
<div class="panel-title"><span>定位点查询</span>
<div class="fold-btn"
title="关闭"
@click="showPointPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="tabs">
<div class="tab"
@click="changeTab(0)">度分秒</div>
<div class="tab"
@click="changeTab(1)">十进制</div>
</div>
<div class="tab-content">
<div class="content"
style="display: block;">
<div class="row"> <span>经度：</span><input type="text"
placeholder="度"><span>°</span><input type="text"
placeholder="分"><span>′</span><input type="text"
placeholder="秒"><span>″</span></div>
<div class="row"> <span>纬度：</span>
<input type="text"
placeholder="度"><span>°</span><input type="text"
placeholder="分"><span>′</span><input type="text"
placeholder="秒"><span>″</span>
</div>
</div>
<div class="content">
<div class="row"> <span>x坐标：</span><input type="text"
placeholder="x"><span>米</span></div>
<div class="row"> <span>y坐标：</span><input type="text"
placeholder="y"><span>米</span></div>
</div>
</div>
<div class="buffer"><span>缓冲区范围</span>
<div class="slider">
<LaySlider></LaySlider>
</div>
<span>米</span>
</div>
<div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal"
class="btn-right">确定</lay-button>
<lay-button class="btn-right">取消</lay-button>
</div>
</div>
</div>
<!-- 面定位 -->
<div class="draggable-panel polygon"
v-show="showPolygonPanel">
<div class="panel-title"><span>定位面查询</span>
<div class="fold-btn"
title="关闭"
@click="showPolygonPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="xyTable"
id="xyTable">
<div class="row"
v-if="false"> <span class="label">坐标点1</span><span>X:</span><input type="text"
name="x1">
<span>Y:</span><input type="text"
name="y1">
</div>
</div>
<button class="circle-button"
@click="addRow()">+</button>
<div class="text"
style="margin-left:10px;color:#e62121">注意：云查询面积不得大于4500亩，仅支持经纬度查询！</div>
<div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal"
class="btn-right"
@click="addGeoJson">确定</lay-button>
<lay-button class="btn-right">取消</lay-button>
</div>
</div>
</div>
<!-- 查询 -->
<div class="draggable-panel query"
v-show="showQueryPanel">
<div class="panel-title"><span>永久基本农田信息</span>
<div class="fold-btn"
title="关闭"
@click="showQueryPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="name"><span>座落单位名称：</span><span>辽宁省铁岭市西丰县林昌村</span></div>
<div class="count"><span>图斑个数：</span><span>5</span></div>
</div>
</div>
</main>
</template>
<script setup>
import { reactive, ref, toRefs } from 'vue'
import {
MapUtils, Config, ViewUtils, LayerUtils, GeojsonUtils, DrawUtils, MeasureUtils, GeometryUtils
} from 'gt-maputils'
import { divIcon, marker } from 'leaflet'
import { reactive, ref, toRefs, onMounted } from 'vue'
import { getList } from '../../api/module/main'
const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href
const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href
......@@ -257,6 +322,12 @@ const resourceIsFold = ref(false)
const lengendIsFold = ref(false)
// 影像图
const openCollect = ref(false)
// 点定位显示
const showPointPanel = ref(false)
// 面定位显示
const showPolygonPanel = ref(false)
// 查询显示
const showQueryPanel = ref(false)
const openLw = ref(false)
// 选择行政区
......@@ -296,12 +367,31 @@ const replaceFields = {
* @property {cascaders[]} areaList - 子级
*/
/**
* @type {Ref<HTMLDivElement>}
*/
const testMap = ref()
/**
* @type {Map}
*/
let map
/**
* @type {LayerWithId}
*/
let layer
/**
* @type {{
* resourceData: resourceItemType[],
* cascaderOptions: cascadersItemType[]
* }}
*/
const supermapServiceUrl = 'http://192.168.2.205:8090/iserver/services/map-DLTB2019-2/rest/maps/dltb2019%40dltb'
const state = reactive({
resourceData: [],
cascaderOptions: []
......@@ -347,6 +437,593 @@ const toSelectDt = function (index) {
selectIndex.value = index
}
onMounted(() => {
map = MapUtils.createBaseMap(testMap.value, {
crs: {
wkid: 4490
}
})
ViewUtils.setHome(map, {
bounds: [
[118.46, 31.92],
[118.47, 32.03]
],
minZoom: 8
})
addLayer()
draggable('.point')
draggable('.polygon')
changeTab(0)
addRow()
addRow()
addRow()
})
function addLayer () {
layer = LayerUtils.addLayer(map, {
type: 'supermap_rest',
url: supermapServiceUrl
})
}
function draggable (key) {
const draggablePanel = document.querySelector(key);
let active = false;
let currentX;
let currentY;
let initialX;
let initialY;
let initialWindowX;
let initialWindowY;
draggablePanel.addEventListener('mousedown', (e) => {
initialX = e.clientX - draggablePanel.offsetLeft;
initialY = e.clientY - draggablePanel.offsetTop;
initialWindowX = window.scrollX;
initialWindowY = window.scrollY;
active = true;
});
document.addEventListener('mousemove', (e) => {
if (e.target.className != 'panel-title') { return; }
if (!active) return;
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
draggablePanel.style.left = `${currentX + initialWindowX}px`;
draggablePanel.style.top = `${currentY + initialWindowY}px`;
});
document.addEventListener('mouseup', () => {
active = false;
});
}
function changeTab (index) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementsByClassName("content")[index].style.display = "block";
tablinks[index].className += " active";
}
let pointCount = 0;
function addRow () {
console.log(pointCount)
pointCount += 1;
let table = document.getElementById("xyTable");
const newRow = document.createElement('div');
newRow.className = "row";
newRow.style = "margin:5px;";
newRow.innerHTML = `<span class="label" style="margin-right: 20px;">坐标点` + pointCount + `</span><span>X:</span>
<input type="text" style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="x`+ pointCount +
`"><span>Y:</span><input type="text" style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="y`+ pointCount + `">`;
table.appendChild(newRow);
}
function addGeoJson () {
let data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "定位面",
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
118.897299,
32.02599
],
[
118.893303,
32.026212
],
[
118.895235,
32.028178
],
[
118.894384,
32.032069
],
[
118.892003,
32.034575
],
[
118.885522,
32.034631
],
[
118.883062,
32.035544
],
[
118.885012,
32.036735
],
[
118.885706,
32.039075
],
[
118.882035,
32.041
],
[
118.882474,
32.042578
],
[
118.878943,
32.041401
],
[
118.877634,
32.045555
],
[
118.879646,
32.046496
],
[
118.877766,
32.048919
],
[
118.87954,
32.049736
],
[
118.881587,
32.047881
],
[
118.887313,
32.05076
],
[
118.888262,
32.054747
],
[
118.888244,
32.058637
],
[
118.885969,
32.06099
],
[
118.88806,
32.060962
],
[
118.884915,
32.067108
],
[
118.882658,
32.067648
],
[
118.881499,
32.06935
],
[
118.875904,
32.072395
],
[
118.877002,
32.075343
],
[
118.880225,
32.072617
],
[
118.883879,
32.070762
],
[
118.881604,
32.074167
],
[
118.8851,
32.075523
],
[
118.884959,
32.078319
],
[
118.888051,
32.076644
],
[
118.888657,
32.074707
],
[
118.892961,
32.07461
],
[
118.894173,
32.077862
],
[
118.893066,
32.078554
],
[
118.897177,
32.081045
],
[
118.89766,
32.082457
],
[
118.900918,
32.082429
],
[
118.90834,
32.086512
],
[
118.907883,
32.088103
],
[
118.904054,
32.090663
],
[
118.900637,
32.095326
],
[
118.897124,
32.094565
],
[
118.891538,
32.098066
],
[
118.889834,
32.098315
],
[
118.887006,
32.101802
],
[
118.883589,
32.103642
],
[
118.878197,
32.103255
],
[
118.877547,
32.100847
],
[
118.874323,
32.09974
],
[
118.871741,
32.101013
],
[
118.868685,
32.099671
],
[
118.867437,
32.100709
],
[
118.863854,
32.100169
],
[
118.859963,
32.098343
],
[
118.858619,
32.096627
],
[
118.854316,
32.09772
],
[
118.849037,
32.096973
],
[
118.847851,
32.097554
],
[
118.84281,
32.09707
],
[
118.841765,
32.099035
],
[
118.844698,
32.098869
],
[
118.843029,
32.101885
],
[
118.834466,
32.093998
],
[
118.833491,
32.095063
],
[
118.840307,
32.101041
],
[
118.839569,
32.103296
],
[
118.842318,
32.105275
],
[
118.841677,
32.106036
],
[
118.834431,
32.104279
],
[
118.831392,
32.105275
],
[
118.826438,
32.104901
],
[
118.82628,
32.103601
],
[
118.819149,
32.10367
],
[
118.818033,
32.095672
],
[
118.811674,
32.095575
],
[
118.809127,
32.09617
],
[
118.806606,
32.098066
],
[
118.802461,
32.097042
],
[
118.799773,
32.095133
],
[
118.799115,
32.093237
],
[
118.796831,
32.091839
],
[
118.797788,
32.089113
],
[
118.793476,
32.088408
],
[
118.784096,
32.092268
],
[
118.784104,
32.041761
],
[
118.827167,
32.038729
],
[
118.826676,
32.034174
],
[
118.828292,
32.0338
],
[
118.830066,
32.039034
],
[
118.831655,
32.039809
],
[
118.838067,
32.040058
],
[
118.836934,
32.035752
],
[
118.839745,
32.034921
],
[
118.838076,
32.029757
],
[
118.843126,
32.028801
],
[
118.844171,
32.027804
],
[
118.844285,
32.022445
],
[
118.845981,
32.022043
],
[
118.846472,
32.020008
],
[
118.850275,
32.018845
],
[
118.853367,
32.020132
],
[
118.85327,
32.023636
],
[
118.857416,
32.021573
],
[
118.862536,
32.023567
],
[
118.864838,
32.021143
],
[
118.875105,
32.024204
],
[
118.876572,
32.021116
],
[
118.876273,
32.017446
],
[
118.880638,
32.014842
],
[
118.884959,
32.018914
],
[
118.895051,
32.022847
],
[
118.897299,
32.02599
]
]
]
]
}
},
]
}
GeojsonUtils.addGeojsonLayer(map, data, {
style: {
polygon: {
color: 'yellow',
weight: 5,
fillOpacity: 0.5,
fillColor: '#ff0000'
}
}
})
let newData = {
type: 'FeatureCollection',
features: data.features.map((item) => {
return { ...GeometryUtils.getCenter(item), properties: item.properties }
})
}
}
</script>
<style scoped lang="scss">
.header {
......@@ -379,7 +1056,6 @@ const toSelectDt = function (index) {
font-size: 18px;
}
}
}
.main {
......@@ -410,7 +1086,7 @@ const toSelectDt = function (index) {
// color: rgba(242, 119, 11);
color: #fff;
font-size: 20px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
margin: 0 5px;
}
}
......@@ -480,7 +1156,6 @@ const toSelectDt = function (index) {
color: #2c5f9e;
}
}
}
}
}
......@@ -558,7 +1233,7 @@ const toSelectDt = function (index) {
line-height: 30px;
color: #333;
&>div:first-child {
& > div:first-child {
width: 34px;
height: 20px;
box-sizing: border-box;
......@@ -666,7 +1341,6 @@ const toSelectDt = function (index) {
}
}
}
}
.input-box {
......@@ -710,13 +1384,11 @@ const toSelectDt = function (index) {
color: #fff;
font-size: 12px;
padding: 2px 5px;
}
&:hover {
.detail-info {
background: #2c5f9e;
}
.top-check {
......@@ -747,7 +1419,6 @@ const toSelectDt = function (index) {
}
:deep(.layui-form-checkbox)[lay-skin="primary"] {
i {
height: 16px;
line-height: 16px;
......@@ -758,7 +1429,6 @@ const toSelectDt = function (index) {
border-color: #2c5f9e;
color: #fff;
}
}
:deep(.layui-form-checked)[lay-skin="primary"] {
......@@ -773,7 +1443,6 @@ const toSelectDt = function (index) {
}
}
}
}
.cascaderClass {
......@@ -788,6 +1457,119 @@ const toSelectDt = function (index) {
.layui-cascader-selected {
background: #2c5f9e;
}
}
.draggable-panel {
width: 29vw;
// height: 10vh;
background: white;
position: absolute;
top: 10%;
left: 40%;
user-select: none;
padding: 10px;
.panel-title {
height: 30px;
line-height: 30px;
background: #dbdbdb;
padding-left: 10px;
color: #fff;
text-align: center;
cursor: move;
.fold-btn {
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
&:hover i {
cursor: pointer;
font-weight: bold;
}
}
}
.panel-content {
margin-top: 10px;
padding: 5px;
input[type="text"] {
border: none;
outline: none;
padding: 8px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;
display: inline;
width: 80px;
margin: 0px 10px;
}
.row {
margin: 5px;
}
.buffer {
margin: 5px;
.slider {
display: inline;
margin: 0px 10px;
}
.layui-slider {
width: calc(80% - 20px);
.layui-slider-bar {
background: var(--global-normal-color) !important;
}
}
}
.bottomBtn {
margin: 10px;
.btn-right {
float: right;
}
}
.xyTable {
width: 90%;
.label {
margin-right: 20px;
}
}
.circle-button {
background-color: #007bff;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
overflow: hidden;
float: right;
margin-top: -30px;
margin-right: 100px;
}
.circle-button::after {
content: "+";
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
}
.tabs .tab {
padding: 10px;
display: inline;
width: 50px;
border: 1px solid #ccc;
cursor: pointer;
}
.tabs .tab.active {
background-color: #ccc;
}
.tab-content .content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top-width: 0;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论