Skip to content

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

卷帘、点定位、面定位、查询

上级 5fd1c78a 7e706903
隐藏空白字符变更
内嵌 并排
正在显示 包含 530 行增加 和 631 行删除
.eslintrc-auto-import.json
浏览文件 @ e6187b30
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
"getNode": true, "getNode": true,
"getParents": true, "getParents": true,
"mitt": true, "mitt": true,
"renameKeys": true "renameKeys": true,
"layer": true
} }
} }
auto-imports.d.ts
浏览文件 @ e6187b30
...@@ -27,6 +27,7 @@ declare global { ...@@ -27,6 +27,7 @@ declare global {
const isReactive: typeof import('vue')['isReactive'] const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly'] const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef'] const isRef: typeof import('vue')['isRef']
const layer: typeof import('@layui/layer-vue')['layer']
const mapActions: typeof import('pinia')['mapActions'] const mapActions: typeof import('pinia')['mapActions']
const mapGetters: typeof import('pinia')['mapGetters'] const mapGetters: typeof import('pinia')['mapGetters']
const mapState: typeof import('pinia')['mapState'] const mapState: typeof import('pinia')['mapState']
...@@ -113,6 +114,7 @@ declare module 'vue' { ...@@ -113,6 +114,7 @@ declare module 'vue' {
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']> readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
readonly isRef: UnwrapRef<typeof import('vue')['isRef']> readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
readonly layer: UnwrapRef<typeof import('@layui/layer-vue')['layer']>
readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']> readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']> readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
readonly mapState: UnwrapRef<typeof import('pinia')['mapState']> readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
...@@ -192,6 +194,7 @@ declare module '@vue/runtime-core' { ...@@ -192,6 +194,7 @@ declare module '@vue/runtime-core' {
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']> readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
readonly isRef: UnwrapRef<typeof import('vue')['isRef']> readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
readonly layer: UnwrapRef<typeof import('@layui/layer-vue')['layer']>
readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']> readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']> readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
readonly mapState: UnwrapRef<typeof import('pinia')['mapState']> readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
......
package.json
浏览文件 @ e6187b30
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"gm-crypt": "^0.0.2", "gm-crypt": "^0.0.2",
"gt-maputils": "^0.1.9", "gt-maputils": "^0.1.13",
"less": "^4.2.0", "less": "^4.2.0",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.0", "pinia-plugin-persistedstate": "^3.2.0",
......
public/data/baseLayer.json 0 → 100644
浏览文件 @ e6187b30
{
"code": 200,
"data": [
{
"imgUrl": "/img/dt.png",
"label": "显示收藏点",
"isCheck": false,
"title": "地图"
},
{
"imgUrl": "/img/yx.png",
"label": "开启路网",
"isCheck": false,
"title": "影像"
}
]
}
public/data/resourceData.json 0 → 100644
浏览文件 @ e6187b30
{
"code": 200,
"data": [
{
"name": "江苏地图（超图动态）",
"type": "supermap_rest",
"url": "http://192.168.2.205:8090/iserver/services/map-JiangSuShengGeShi4490/rest/maps/%E6%B1%9F%E8%8B%8F%E7%9C%81%E5%90%84%E5%B8%824490",
"query": [
{
"layerId": "江苏省各市4490@江苏省各市4490"
}
]
},
{
"name": "江苏地图（Arcgis切片）",
"status": true,
"type": "arcgis_tile",
"url": "http://192.168.2.94:6080/arcgis/rest/services/XZQ/JSZQ_2018_2K/MapServer"
},
{
"name": "矢量底图（天地图）",
"type": "tdt",
"layerType": "vec",
"key": "7685d116336b3e919072164090de473e"
},
{
"name": "矢量底图注记（天地图）",
"type": "tdt",
"layerType": "vec",
"isLabel": true,
"key": "7685d116336b3e919072164090de473e"
},
{
"name": "2022年永久基本农田"
},
{
"name": "2021年永久基本农田"
},
{
"name": "2020年永久基本农田"
},
{
"name": "图斑地图（超图动态）",
"type": "supermap_rest",
"url": "http://192.168.5.47:8090/iserver/services/map-YJJBNT/rest/maps/CJDCQ@YJJBNT",
"query": [
{
"layerId": "CJDCQ@YJJBNT"
}
]
}
]
}
src/api/http.js
浏览文件 @ e6187b30
...@@ -36,7 +36,6 @@ class Http { ...@@ -36,7 +36,6 @@ class Http {
/* 响应拦截 */ /* 响应拦截 */
this.service.interceptors.response.use( this.service.interceptors.response.use(
(response) => { (response) => {
console.log(response)
switch (response.data.code) { switch (response.data.code) {
case 200: case 200:
return response.data return response.data
......
src/api/module/main.js
浏览文件 @ e6187b30
...@@ -6,9 +6,9 @@ import Http from '../http' ...@@ -6,9 +6,9 @@ import Http from '../http'
*/ */
export const getJsonCode = function (code) { export const getJsonCode = function (code) {
// 使用 Http.get 方法请求指定路径的 JSON 数据 // 使用 Http.get 方法请求指定路径的 JSON 数据
return Http.get(`/src/data/${code}.json`) return Http.get(`/data/${code}.json`)
} }
export const getList = function (url) { export const getList = function (url) {
return Http.get(`/src/data/${url}.json`) return Http.get(`/data/${url}.json`)
} }
src/assets/img/location.svg 0 → 100644
浏览文件 @ e6187b30
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="24px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -898 -382 )">
<path d="M 20.52103137109375 24 L 18.01577085546875 16.421060671875 L 15.995399500390624 16.421060671875 L 18.01577085546875 22 L 3.0044115910156255 22 L 4.86315324140625 16.421060671875 L 3.0044115910156255 16.421060671875 L 0.4789473623046875 24 L 20.52103137109375 24 Z M 10.520193068202575 0 C 10.513458489386316 0 10.50672391316096 0 10.499989355078124 2.54765625E-05 C 6.0032335732220306 2.548950667287023E-05 2.3578927618597434 3.6759994169308277 2.357892749023437 8.210543062500001 C 2.357892749023437 12.743645203125002 10.499989378320313 20.8421086171875 10.499989355078124 20.8421086171875 C 10.499989331835936 20.8421086171875 18.66228969746094 12.73345846875 18.66228969746094 8.210543062500001 C 18.66228969749945 3.675974144738699 15.016948868211946 0 10.520193068202575 0 Z M 14.257880105273436 7.5789648046875 C 14.257880092437132 9.671831100942725 12.575415098864559 11.3684344453125 10.499989355078124 11.3684344453125 C 8.424563602215056 11.3684344453125 6.742098604882813 9.671831086658141 6.742098604882813 7.578964781250001 C 6.742098604882813 5.486098475841861 8.424563602215056 3.7894951171875 10.499989355078124 3.7894951171875 C 12.575415107941199 3.7894951171875 14.257880105273436 5.486098475841861 14.257880105273436 7.578964781250001 Z " fill-rule="nonzero" fill="#d9001b" stroke="none" transform="matrix(1 0 0 1 898 382 )" />
</g>
</svg>
\ No newline at end of file
src/data/resourceData.json deleted 100644 → 0
浏览文件 @ 5fd1c78a
{
"code": 200,
"data": [
{
"name": "2024年永久基本农田",
"status": true,
"id": "000"
},
{
"name": "2023年永久基本农田",
"status": false,
"id": "001"
},
{
"name": "基础地理（天地图）",
"status": true,
"id": "002"
},
{
"name": "2023年遥感影像（天地图）",
"status": true,
"id": "003"
},
{
"name": "2022年永久基本农田",
"status": true,
"id": "004"
},
{
"name": "2021年永久基本农田",
"status": true,
"id": "005"
},
{
"name": "2020年永久基本农田",
"status": false,
"id": "006"
}
]
}
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ e6187b30
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
</header> </header>
<main class="main"> <main class="main">
<!-- 地图 --> <!-- 地图 -->
<div class="map-container" <div ref="mapContainer"
ref="testMap" /> class="map-container" />
<!-- 资源目录最小化 --> <!-- 资源目录最小化 -->
<div v-show="resourceIsFold" <div v-show="resourceIsFold"
...@@ -37,14 +37,13 @@ ...@@ -37,14 +37,13 @@
<lay-input suffix-icon="layui-icon-search" <lay-input suffix-icon="layui-icon-search"
size="sm" /> size="sm" />
<div class="list-box"> <div class="list-box">
<div v-for="(item) in resourceData" <div v-for="(item) in state.resourceData"
:key="item.id" :key="item.id"
class="list-item"> class="list-item">
<lay-checkbox v-model="item.status" <lay-checkbox v-model="item.status"
:name="item.id"
skin="primary" skin="primary"
value="" :label="item.name"
:label="item.name" /> @change="triggerLayer(item)" />
</div> </div>
</div> </div>
</div> </div>
...@@ -130,36 +129,45 @@ ...@@ -130,36 +129,45 @@
<lay-line direction="vertical" <lay-line direction="vertical"
theme="black" /> theme="black" />
<div class="tool-part" <div class="tool-part"
@click="DrawUtils.startDraw(map, 'Polygon')"> @click="startDraw">
<i class="iconfont icon-widget-huizhi" /> <i class="iconfont icon-widget-huizhi" />
<span>绘制范围</span> <span>绘制范围</span>
</div> </div>
<lay-line direction="vertical" <lay-line direction="vertical"
theme="black" /> theme="black" />
<div class="tool-part"> <div class="tool-part"
@click="identify">
<i class="iconfont icon-widget-hand-point" /> <i class="iconfont icon-widget-hand-point" />
<span>点选</span> <span>点选</span>
</div> </div>
<lay-line direction="vertical" <lay-line direction="vertical"
theme="black" /> theme="black" />
<div class="tool-part"> <div class="tool-part"
@click="returnHome">
<i class="iconfont icon-widget-map-full" /> <i class="iconfont icon-widget-map-full" />
<span>全幅</span> <span>全幅</span>
</div> </div>
<lay-line direction="vertical" <lay-line direction="vertical"
theme="black" /> theme="black" />
<div class="tool-part" <div class="tool-part"
@click="MeasureUtils.startMeasure(map, 'length')"> @click="startMeasure">
<i class="iconfont icon-widget-celiang" /> <i class="iconfont icon-widget-celiang" />
<span>测距</span> <span>测距</span>
</div> </div>
<lay-line direction="vertical"
theme="black" />
<div class="tool-part"
@click="switchSwipe">
<i class="iconfont icon-widget-juanlian-" />
<span>卷帘</span>
</div>
</div> </div>
</div> </div>
<!-- 行政区村庄等输入框下拉框 --> <!-- 行政区村庄等输入框下拉框 -->
<div class="input-box"> <div class="input-box">
<lay-cascader v-model="regionData" <lay-cascader v-model="regionData"
:options="cascaderOptions" :options="state.cascaderOptions"
:only-last-level="true" :only-last-level="true"
allow-clear allow-clear
placeholder="请选择行政区" placeholder="请选择行政区"
...@@ -179,11 +187,11 @@ ...@@ -179,11 +187,11 @@
@mouseenter="mapTypeIsExpand = true" @mouseenter="mapTypeIsExpand = true"
@mouseleave="mapTypeIsExpand = false"> @mouseleave="mapTypeIsExpand = false">
<ul class="list-box"> <ul class="list-box">
<li v-for="(item, index) in mapTypeData" <li v-for="(item, index) in state.mapTypeData"
:key="index" :key="index"
class="list-item" class="list-item"
:class="selectIndex == index ? 'active' : ''" :class="selectIndex === index ? 'active' : ''"
:style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`" :style="mapTypeIsExpand ? `right:${(state.mapTypeData.length - index - 1) * 96}px` : `right:${(state.mapTypeData.length - index - 1) * 10}px`"
@click="toSelectDt(index)"> @click="toSelectDt(index)">
<img :src="item.imgUrl" <img :src="item.imgUrl"
alt=""> alt="">
...@@ -203,6 +211,7 @@ ...@@ -203,6 +211,7 @@
<!-- 点定位 --> <!-- 点定位 -->
<div class="draggable-panel point" <div class="draggable-panel point"
style="width:28vw"
v-show="showPointPanel"> v-show="showPointPanel">
<div class="panel-title"><span>定位点查询</span> <div class="panel-title"><span>定位点查询</span>
<div class="fold-btn" <div class="fold-btn"
...@@ -222,40 +231,55 @@ ...@@ -222,40 +231,55 @@
<div class="content" <div class="content"
style="display: block;"> style="display: block;">
<div class="row"> <span>经度：</span><input type="text" <div class="row"> <span>经度：</span><input type="text"
id="xdu"
placeholder="度"><span>°</span><input type="text" placeholder="度"><span>°</span><input type="text"
id="xfen"
placeholder="分"><span>′</span><input type="text" placeholder="分"><span>′</span><input type="text"
id="xmiao"
placeholder="秒"><span>″</span></div> placeholder="秒"><span>″</span></div>
<div class="row"> <span>纬度：</span> <div class="row"> <span>纬度：</span>
<input type="text" <input type="text"
id="ydu"
placeholder="度"><span>°</span><input type="text" placeholder="度"><span>°</span><input type="text"
id="yfen"
placeholder="分"><span>′</span><input type="text" placeholder="分"><span>′</span><input type="text"
id="ymiao"
placeholder="秒"><span>″</span> placeholder="秒"><span>″</span>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="row"> <span>x坐标：</span><input type="text" <div class="row"> <span>x坐标：</span><input type="text"
placeholder="x"><span>米</span></div> id="x"
placeholder="x"><span></span></div>
<div class="row"> <span>y坐标：</span><input type="text" <div class="row"> <span>y坐标：</span><input type="text"
placeholder="y"><span>米</span></div> id="y"
placeholder="y"><span></span></div>
<div class="text"
style="margin-left:10px;color:#e62121">注意：仅支持经纬度查询！</div>
</div> </div>
</div> </div>
<div class="buffer"><span>缓冲区范围</span> <div class="buffer"><span>缓冲区范围</span>
<div class="slider"> <div class="slider">
<LaySlider></LaySlider> <lay-slider v-model="sliderValue">
</lay-slider>
</div> </div>
<span>米</span> <span>{{sliderValue}} 米</span>
</div> </div>
<div class="bottomBtn"> <div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button> <lay-button @click="locateToPoint"><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal" <lay-button type="normal"
class="btn-right">确定</lay-button> class="btn-right"
<lay-button class="btn-right">取消</lay-button> @click="commit('point')">确定</lay-button>
<lay-button class="btn-right"
@click="cancel('point')">取消</lay-button>
</div> </div>
</div> </div>
</div> </div>
<!-- 面定位 --> <!-- 面定位 -->
<div class="draggable-panel polygon" <div class="draggable-panel polygon"
style="width:28vw"
v-show="showPolygonPanel"> v-show="showPolygonPanel">
<div class="panel-title"><span>定位面查询</span> <div class="panel-title"><span>定位面查询</span>
<div class="fold-btn" <div class="fold-btn"
...@@ -279,16 +303,18 @@ ...@@ -279,16 +303,18 @@
<div class="text" <div class="text"
style="margin-left:10px;color:#e62121">注意：云查询面积不得大于4500亩，仅支持经纬度查询！</div> style="margin-left:10px;color:#e62121">注意：云查询面积不得大于4500亩，仅支持经纬度查询！</div>
<div class="bottomBtn"> <div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button> <lay-button @click="locateTo"><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal" <lay-button type="normal"
class="btn-right" class="btn-right"
@click="addGeoJson">确定</lay-button> @click="commit('polygon')">确定</lay-button>
<lay-button class="btn-right">取消</lay-button> <lay-button class="btn-right"
@click="cancel('polygon')">取消</lay-button>
</div> </div>
</div> </div>
</div> </div>
<!-- 查询 --> <!-- 查询 -->
<div class="draggable-panel query" <div class="draggable-panel query"
style="left:80%"
v-show="showQueryPanel"> v-show="showQueryPanel">
<div class="panel-title"><span>永久基本农田信息</span> <div class="panel-title"><span>永久基本农田信息</span>
<div class="fold-btn" <div class="fold-btn"
...@@ -298,22 +324,25 @@ ...@@ -298,22 +324,25 @@
</div> </div>
</div> </div>
<div class="panel-content"> <div class="panel-content">
<div class="name"><span>座落单位名称：</span><span>辽宁省铁岭市西丰县林昌村</span></div> <div class="name"><span>座落单位名称：</span><span>{{zldwmc}}</span></div>
<div class="count"><span>图斑个数：</span><span>5</span></div> <div class="count"><span>图斑个数：</span><span>{{tbCount}}</span></div>
</div> </div>
</div> </div>
</main> </main>
</template> </template>
<script setup> <script setup>
import { import { LayerUtils, MapUtils, ViewUtils, MeasureUtils, DrawUtils, GeojsonUtils, SwipeUtils, GeometryUtils } from 'gt-maputils'
MapUtils, Config, ViewUtils, LayerUtils, GeojsonUtils, DrawUtils, MeasureUtils, GeometryUtils import { getList } from '@/api/module/main'
} from 'gt-maputils' import * as turf from '@turf/turf';
import { divIcon, marker } from 'leaflet' import { icon, divIcon, marker } from "leaflet";
/**
import { reactive, ref, toRefs, onMounted } from 'vue' * @type {Ref<HTMLDivElement>}
import { getList } from '../../api/module/main' */
const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href const mapContainer = ref()
const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href /**
* @type {import('leaflet').Map}
*/
let $map
// 工具栏是否展开 // 工具栏是否展开
const toolIsFold = ref(false) const toolIsFold = ref(false)
// 资源目录是否展开 // 资源目录是否展开
...@@ -328,6 +357,13 @@ const showPointPanel = ref(false) ...@@ -328,6 +357,13 @@ const showPointPanel = ref(false)
const showPolygonPanel = ref(false) const showPolygonPanel = ref(false)
// 查询显示 // 查询显示
const showQueryPanel = ref(false) const showQueryPanel = ref(false)
// 行政区字段
const xzqField = ref("zldwmc");
const zldwmc = ref("")
//图斑数量
const tbCount = ref(0)
const sliderValue = ref(0)
const openLw = ref(false) const openLw = ref(false)
// 选择行政区 // 选择行政区
...@@ -367,19 +403,6 @@ const replaceFields = { ...@@ -367,19 +403,6 @@ const replaceFields = {
* @property {cascaders[]} areaList - 子级 * @property {cascaders[]} areaList - 子级
*/ */
/**
* @type {Ref<HTMLDivElement>}
*/
const testMap = ref()
/**
* @type {Map}
*/
let map
/**
* @type {LayerWithId}
*/
let layer
/** /**
...@@ -392,23 +415,12 @@ let layer ...@@ -392,23 +415,12 @@ let layer
const supermapServiceUrl = 'http://192.168.2.205:8090/iserver/services/map-DLTB2019-2/rest/maps/dltb2019%40dltb' const supermapServiceUrl = 'http://192.168.2.205:8090/iserver/services/map-DLTB2019-2/rest/maps/dltb2019%40dltb'
const state = reactive({ const state = reactive({
resourceData: [], resourceData: [],
cascaderOptions: [] cascaderOptions: [],
}) mapTypeData: []
const {
resourceData,
cascaderOptions
} = toRefs(state)
// 获取资源目录列表
getList('resourceData').then((res) => {
console.log(res)
state.resourceData = res.data
})
// 获取省市区
getList('china').then((res) => {
console.log(res)
state.cascaderOptions = res.data
}) })
// 村庄搜索 // 村庄搜索
...@@ -417,52 +429,54 @@ const villageSearch = function (val) { ...@@ -417,52 +429,54 @@ const villageSearch = function (val) {
} }
// 地图类型 // 地图类型
const mapTypeIsExpand = ref(false) const mapTypeIsExpand = ref(false)
const mapTypeData = reactive([
{
imgUrl: imgUrl1,
label: '显示收藏点',
isCheck: false,
title: '地图'
},
{
imgUrl: imgUrl2,
label: '开启路网',
isCheck: false,
title: '影像'
}
])
// 地图默认选中第二个 // 地图默认选中第二个
const selectIndex = ref(1) const selectIndex = ref(1)
const toSelectDt = function (index) { const toSelectDt = function (index) {
selectIndex.value = index selectIndex.value = index
} }
onMounted(() => { onMounted(() => {
map = MapUtils.createBaseMap(testMap.value, { initMap()
crs: { getData()
wkid: 4490
}
})
ViewUtils.setHome(map, {
bounds: [
[118.46, 31.92],
[118.47, 32.03]
],
minZoom: 8
})
addLayer()
draggable('.point') draggable('.point')
draggable('.polygon') draggable('.polygon')
draggable('.query')
changeTab(0) changeTab(0)
addRow() addRow()
addRow() addRow()
addRow() addRow()
}) })
function addLayer () {
layer = LayerUtils.addLayer(map, { function getData () {
type: 'supermap_rest', // 获取资源目录列表
url: supermapServiceUrl getList('resourceData').then((res) => {
state.resourceData = res.data
initLayer()
})
// 获取省市区
getList('china').then((res) => {
state.cascaderOptions = res.data
console.log(state.cascaderOptions)
})
getList('baseLayer').then(res => {
state.mapTypeData = res.data
})
}
function initMap () {
$map = MapUtils.createBaseMap(mapContainer.value, {
crs: {
wkid: 4490
}
})
ViewUtils.setHome($map, {
bounds: [
[115.56057557471091, 29.882667954127648],
[122.7346505072892, 35.900324837872425]
],
zoom: 8,
minZoom: 0
}) })
} }
function draggable (key) { function draggable (key) {
...@@ -498,6 +512,7 @@ function draggable (key) { ...@@ -498,6 +512,7 @@ function draggable (key) {
active = false; active = false;
}); });
} }
let activeTab = 0;
function changeTab (index) { function changeTab (index) {
let i, tabcontent, tablinks; let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("content"); tabcontent = document.getElementsByClassName("content");
...@@ -510,6 +525,7 @@ function changeTab (index) { ...@@ -510,6 +525,7 @@ function changeTab (index) {
} }
document.getElementsByClassName("content")[index].style.display = "block"; document.getElementsByClassName("content")[index].style.display = "block";
tablinks[index].className += " active"; tablinks[index].className += " active";
activeTab = index;
} }
let pointCount = 0; let pointCount = 0;
function addRow () { function addRow () {
...@@ -521,509 +537,354 @@ function addRow () { ...@@ -521,509 +537,354 @@ function addRow () {
newRow.style = "margin:5px;"; newRow.style = "margin:5px;";
newRow.innerHTML = `<span class="label" style="margin-right: 20px;">坐标点` + pointCount + `</span><span>X:</span> 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); <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 + border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" id="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); `"><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 + `">`; border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" id="y`+ pointCount + `">`;
table.appendChild(newRow); table.appendChild(newRow);
} }
function addGeoJson () { function getPoints (type) {
let data = { if (type == "geometry") {
"type": "FeatureCollection", let firstPoint = null;;
"features": [ let geometry = {
{ "parts": [],
"type": "Feature", "style": null,
"properties": { "prjCoordSys": null,
"name": "定位面", "id": 0,
"type": "REGION",
"partTopo": null,
"points": []
}
for (let i = 1; i < pointCount + 1; i++) {
let x = document.getElementById("x" + i).value;
let y = document.getElementById("y" + i).value;
if (x != "" && y != "") {
if (firstPoint == null) { firstPoint = { x: Number(x), y: Number(y) }; }
geometry.points.push({ x: Number(x), y: Number(y) })
}
}
if (firstPoint.x && firstPoint.y) {
geometry.points.push(firstPoint);
geometry.parts.push(pointCount + 1);
}
return geometry;
} else {
let firstPoint = [];
let points = []
for (let i = 1; i < pointCount + 1; i++) {
let x = document.getElementById("x" + i).value;
let y = document.getElementById("y" + i).value;
if (x != "" && y != "") {
if (firstPoint.length < 2) { firstPoint = [x, y] }
points.push([x, y])
}
}
let polygon = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "定位面",
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [[]]
}
}, },
"geometry": { ]
"type": "MultiPolygon", }
"coordinates": [ if (firstPoint.length > 0) {
[ points.push(firstPoint);
[ polygon["features"][0]["geometry"]["coordinates"][0].push(points);
[ }
118.897299, return polygon;
32.02599 }
], return null;
[ }
118.893303, function getPoint () {
32.026212 let x = document.getElementById("x").value;
], let y = document.getElementById("y").value;
[ if (activeTab == 0) {
118.895235, let xdu = Number(document.getElementById("xdu").value);
32.028178 let xfen = Number(document.getElementById("xfen").value);
], let xmiao = Number(document.getElementById("xmiao").value);
[ let ydu = Number(document.getElementById("ydu").value);
118.894384, let yfen = Number(document.getElementById("yfen").value);
32.032069 let ymiao = Number(document.getElementById("ymiao").value);
], x = xdu + xfen / 60 + xmiao / 3600;
[ y = ydu + yfen / 60 + ymiao / 3600;
118.892003, }
32.034575 if (x == 0 && y == 0) { return null; }
], let point = turf.point([Number(x), Number(y)]);
[ // let point = {
118.885522, // "type": "FeatureCollection",
32.034631 // "features": [
], // {
[ // "type": "Feature",
118.883062, // "properties": {
32.035544 // "name": "定位点",
], // },
[ // "geometry": {
118.885012, // "type": "Point",
32.036735 // "coordinates": []
], // }
[ // },
118.885706, // ]
32.039075 // }
], // if (x != "" && y != "") {
[ // point["features"][0]["geometry"]["coordinates"] = [x, y];
118.882035, // }
32.041 console.log(point);
], return point;
[ }
118.882474, let polygon = null;
32.042578 function locateTo () {
], polygon = getPoints();
[ if (polygonLayer) { GeojsonUtils.removeGeojsonLayer($map, polygonLayer); }
118.878943, polygonLayer = addGeoJson(polygon);
32.041401 ViewUtils.setViewByGeoJSON($map, polygon);
], }
[ let point = null;
118.877634, function locateToPoint () {
32.045555 point = getPoint();
], if (point == null) { layer.msg("请输入点坐标"); return; }
[ if (pointLayer) { GeojsonUtils.removeGeojsonLayer($map, pointLayer); }
118.879646, pointLayer = addGeoJson(point, "point");
32.046496 ViewUtils.setViewByGeoJSON($map, point);
], }
[ let polygonLayer = null;
118.877766, let pointLayer = null;
32.048919 let bufferLayer = null;
], let buffered = null;
[ let tbUrl = "http://192.168.5.47:8090/iserver/services/map-YJJBNT/rest/maps/CJDCQ@YJJBNT";
118.87954, async function commit (type) {
32.049736 if (type == "point") {
], point = getPoint();
[ if (point == null) { layer.msg("请输入点坐标"); return; }
118.881587, if (sliderValue.value < 1) { layer.msg("请设置缓冲区值"); return; }
32.047881 if (pointLayer) { GeojsonUtils.removeGeojsonLayer($map, pointLayer); }
], pointLayer = addGeoJson(point, "point");
[ buffered = turf.buffer(point, sliderValue.value, { units: 'meters' });
118.887313, if (bufferLayer) { GeojsonUtils.removeGeojsonLayer($map, bufferLayer); }
32.05076 bufferLayer = addGeoJson(buffered);
], ViewUtils.setViewByGeoJSON($map, buffered);
[
118.888262, // showPointPanel.value = false;
32.054747 }
], else if (type == "polygon") {
[ polygon = getPoints();
118.888244, if (polygonLayer) { GeojsonUtils.removeGeojsonLayer($map, polygonLayer); }
32.058637 polygonLayer = addGeoJson(polygon);
], ViewUtils.setViewByGeoJSON($map, polygon);
[ let geometry = getPoints("geometry");
118.885969, spatialQuery(tbUrl, geometry).then(data => { console.log(tbCount, data) });
32.06099 showQueryPanel.value = true;
], // showPolygonPanel.value = false;
[ }
118.88806, }
32.060962 function cancel (type) {
], if (type == "point") {
[ if (pointLayer) {
118.884915, GeojsonUtils.removeGeojsonLayer($map, pointLayer);
32.067108 pointMarkerList.forEach(item => {
], item.remove();
[ })
118.882658, pointMarkerList = []
32.067648 }
], if (bufferLayer) {
[ GeojsonUtils.removeGeojsonLayer($map, bufferLayer);
118.881499, }
32.06935 showPointPanel.value = false;
], }
[ if (type == "polygon") {
118.875904, if (polygonLayer) {
32.072395 GeojsonUtils.removeGeojsonLayer($map, polygonLayer);
], }
[ showPolygonPanel.value = false;
118.877002, }
32.075343 }
], let pointMarkerList = [];
[ function addGeoJson (data, type) {
118.880225, console.log(data);
32.072617 let geolayer = null;
], if (type == "point") {
[ geolayer = GeojsonUtils.addGeojsonLayer($map, data, {
118.883879, pointToLayer: (feature, latlng) => {
32.070762 let pointMarker = marker(latlng, {
], icon: icon({
[ iconUrl: new URL("/src/assets/img/location.svg", import.meta.url).href,
118.881604, iconSize: [24, 32],
32.074167 }),
], });
[ pointMarkerList.push(pointMarker)
118.8851, return pointMarker;
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, { geolayer = GeojsonUtils.addGeojsonLayer($map, data, {
style: { style: {
polygon: { polygon: {
color: 'yellow', color: 'yellow',
weight: 5, weight: 5,
fillOpacity: 0.5, fillOpacity: 0.2,
fillColor: '#ff0000' fillColor: '#ff0000'
} }
} }
}) })
let newData = { return geolayer;
type: 'FeatureCollection', }
features: data.features.map((item) => {
return { ...GeometryUtils.getCenter(item), properties: item.properties } function returnHome () {
ViewUtils.returnHome($map)
}
function initLayer () {
for (let i = state.resourceData.length - 1; i >= 0; i--) {
if (state.resourceData[i].status) {
triggerLayer(state.resourceData[i], false)
}
}
}
let leftLayers = [];
let rightLayers = [];
function triggerLayer (val, fly = true) {
if (val.status) {
const { status, _layer, name, ...options } = val
val._layer = markRaw(LayerUtils.addLayer($map, options))
leftLayers.push(val._layer);
if (fly) {
ViewUtils.setViewByLayer($map, val._layer)
}
} else {
if (val._layer) {
LayerUtils.removeLayer($map, val._layer)
delete val._layer
}
}
}
function startDraw () {
DrawUtils.clearDraw($map)
DrawUtils.startDraw($map, 'Polygon', {
callback: function (result) {
console.log(result.geoJSON);
}
})
}
let identifyResults = []
function identify () {
if (identifyResults.length) {
for (const layer of identifyResults) {
$map.removeLayer(layer)
}
identifyResults = []
}
DrawUtils.startDraw($map, 'CircleMarker', {
callback: function (result) {
DrawUtils.stopDraw($map)
$map.removeLayer(result.layer)
const queryLayers = _getIdentifyLayers()
if (!queryLayers.length) {
layer.msg('无可查询图层')
return
}
const promises = []
for (const layer of queryLayers) {
const { query, ...other } = layer
for (const queryInfo of query) {
const identifyInfo = {
...other,
...queryInfo
}
identifyInfo.geometry = result.geoJSON
console.log(identifyInfo.geometry)
promises.push(LayerUtils.getIdentifyFeatures(layer.url, identifyInfo))
}
}
Promise.all(promises).then((allResult) => {
layer.msg('识别完成')
for (const result of allResult) {
identifyResults.push(GeojsonUtils.addGeojsonLayer($map, result))
}
console.log('属性识别结果', allResult)
if (!allResult || allResult.length < 1) {
layer.msg('识别结果为空')
return;
}
allResult.forEach(features => {
features.features.forEach(feature => {
zldwmc.value = feature.properties[xzqField.value];
tbCount.value = 1;
});
})
showQueryPanel.value = true;
})
}
})
}
function _getIdentifyLayers () {
const layers = LayerUtils.getLayerList($map)
const queryLayers = []
for (const layer of layers) {
const tmp = state.resourceData.find(resource => {
return resource._layer === layer
}) })
if (tmp && tmp.query) {
queryLayers.push(tmp)
}
}
return queryLayers
}
function startMeasure () {
MeasureUtils.startMeasure($map, 'length')
}
let openSwipe = false;
let swipe = null
function switchSwipe () {
openSwipe = !openSwipe;
if (openSwipe) {
swipe = SwipeUtils.startSwipe($map, leftLayers, rightLayers)
} else {
SwipeUtils.stopSwipe(swipe)
} }
} }
let zldwmcs = []
async function spatialQuery (url, geometry) {
let json = {
"queryMode": "SpatialQuery",
"geometry": geometry,
"bounds": {
"leftBottom": { "x": 0, "y": 0 }, "rightTop": { "x": 100, "y": 100 }
}, "distance": 1, "queryParameters": {
"queryParams": [{ "attributeFilter": "SMID %26gt; 0", "name": "JBNTBHTB@YJJBNT" }],
"startRecord": 0, "expectCount": 1000, "networkType": "LINE", "queryOption": "ATTRIBUTEANDGEOMETRY"
},
"keywords": "", "spatialQueryMode": "INTERSECT"
}
fetch(url + "/queryResults.json?returnPostAction=true&getMethodForm=true&returnContent=true", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(json)
})
.then(response => response.json())
.then(data => {
tbCount.value = data.totalCount;
data.recordsets[0].features.forEach(feature => {
feature.fieldNames.forEach((field, index) => {
if (field == "ZLDWMC" && zldwmcs.indexOf(feature.fieldValues[index]) == -1) { zldwmcs.push(feature.fieldValues[index]); }
})
})
zldwmc.value = zldwmcs.join(",");
return data;
})
.catch(error => console.error('Error:', error));
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.header { .header {
...@@ -1065,8 +926,8 @@ function addGeoJson () { ...@@ -1065,8 +926,8 @@ function addGeoJson () {
.map-container { .map-container {
height: 100%; height: 100%;
background: url("@/assets/img/mapbg.png") no-repeat; width: 100%;
background-size: 100% 100%; z-index: 0;
} }
} }
...@@ -1459,7 +1320,6 @@ function addGeoJson () { ...@@ -1459,7 +1320,6 @@ function addGeoJson () {
} }
} }
.draggable-panel { .draggable-panel {
width: 29vw;
// height: 10vh; // height: 10vh;
background: white; background: white;
position: absolute; position: absolute;
...@@ -1510,7 +1370,7 @@ function addGeoJson () { ...@@ -1510,7 +1370,7 @@ function addGeoJson () {
margin: 0px 10px; margin: 0px 10px;
} }
.layui-slider { .layui-slider {
width: calc(80% - 20px); width: calc(80% - 40px);
.layui-slider-bar { .layui-slider-bar {
background: var(--global-normal-color) !important; background: var(--global-normal-color) !important;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论