新增街道
This commit is contained in:
TigerNiu
@@ -1,13 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>tianjin-map</title>
|
||||
<title>天津林业展示平台</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
287
package-lock.json
generated
287
package-lock.json
generated
@@ -8,6 +8,8 @@
|
||||
"name": "tianjin-map",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@turf/bbox": "^7.2.0",
|
||||
"element-plus": "^2.11.7",
|
||||
"maplibre-gl": "^5.11.0",
|
||||
"vue": "^3.5.22"
|
||||
},
|
||||
@@ -62,6 +64,24 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ctrl/tinycolor": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
|
||||
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@element-plus/icons-vue": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
|
||||
"integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
||||
@@ -504,6 +524,31 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
|
||||
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
|
||||
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||
@@ -604,6 +649,17 @@
|
||||
"supercluster": "^8.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"name": "@sxzz/popperjs-es",
|
||||
"version": "2.11.7",
|
||||
"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
|
||||
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.0-beta.29",
|
||||
"resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
|
||||
@@ -919,6 +975,47 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@turf/bbox": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@turf/bbox/-/bbox-7.2.0.tgz",
|
||||
"integrity": "sha512-wzHEjCXlYZiDludDbXkpBSmv8Zu6tPGLmJ1sXQ6qDwpLE1Ew3mcWqt8AaxfTP5QwDNQa3sf2vvgTEzNbPQkCiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@turf/helpers": "^7.2.0",
|
||||
"@turf/meta": "^7.2.0",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"tslib": "^2.8.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/turf"
|
||||
}
|
||||
},
|
||||
"node_modules/@turf/helpers": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@turf/helpers/-/helpers-7.2.0.tgz",
|
||||
"integrity": "sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"tslib": "^2.8.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/turf"
|
||||
}
|
||||
},
|
||||
"node_modules/@turf/meta": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@turf/meta/-/meta-7.2.0.tgz",
|
||||
"integrity": "sha512-igzTdHsQc8TV1RhPuOLVo74Px/hyPrVgVOTgjWQZzt3J9BVseCdpfY/0cJBdlSRI4S/yTmmHl7gAqjhpYH5Yaw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@turf/helpers": "^7.2.0",
|
||||
"@types/geojson": "^7946.0.10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/turf"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -941,6 +1038,22 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/lodash-es": {
|
||||
"version": "4.17.12",
|
||||
"resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
|
||||
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/supercluster": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/supercluster/-/supercluster-7.1.3.tgz",
|
||||
@@ -950,6 +1063,12 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.16",
|
||||
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
|
||||
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
|
||||
@@ -1067,18 +1186,143 @@
|
||||
"integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "9.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
||||
"integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.16",
|
||||
"@vueuse/metadata": "9.13.0",
|
||||
"@vueuse/shared": "9.13.0",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/metadata": {
|
||||
"version": "9.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
|
||||
"integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared": {
|
||||
"version": "9.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
|
||||
"integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/async-validator": {
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
|
||||
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.19",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
|
||||
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/earcut": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.2.tgz",
|
||||
"integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.11.7",
|
||||
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.11.7.tgz",
|
||||
"integrity": "sha512-Bh47wuzsqaNBNDkbtlOlZER1cGcOB8GsXp/+C9b95MOrk0wvoHUV4NKKK7xMkfYNFYdYysQ752oMhnExgAL6+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@floating-ui/dom": "^1.0.1",
|
||||
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
|
||||
"@types/lodash": "^4.17.20",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@vueuse/core": "^9.1.0",
|
||||
"async-validator": "^4.2.5",
|
||||
"dayjs": "^1.11.18",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lodash-unified": "^1.0.3",
|
||||
"memoize-one": "^6.0.0",
|
||||
"normalize-wheel-es": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
|
||||
@@ -1208,6 +1452,31 @@
|
||||
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash-unified": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
|
||||
"integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/lodash-es": "*",
|
||||
"lodash": "*",
|
||||
"lodash-es": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@@ -1254,6 +1523,12 @@
|
||||
"url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
|
||||
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
|
||||
@@ -1287,6 +1562,12 @@
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-wheel-es": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
|
||||
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/pbf": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pbf/-/pbf-4.0.1.tgz",
|
||||
@@ -1463,6 +1744,12 @@
|
||||
"integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.1.12",
|
||||
"resolved": "https://registry.npmmirror.com/vite/-/vite-7.1.12.tgz",
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@turf/bbox": "^7.2.0",
|
||||
"element-plus": "^2.11.7",
|
||||
"maplibre-gl": "^5.11.0",
|
||||
"vue": "^3.5.22"
|
||||
},
|
||||
|
||||
1
public/data/tianjin.geojson
Normal file
1
public/data/tianjin.geojson
Normal file
File diff suppressed because one or more lines are too long
248182
public/data/tianjin_street.geojson
Normal file
248182
public/data/tianjin_street.geojson
Normal file
File diff suppressed because it is too large
Load Diff
@@ -66,17 +66,152 @@ export const samplePlots = {
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "样地A", type: "样地" },
|
||||
geometry: { type: "Point", coordinates: [117.182, 39.132] },
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.2005, 39.1305],
|
||||
[117.2035, 39.1305],
|
||||
[117.2035, 39.1335],
|
||||
[117.2005, 39.1335],
|
||||
[117.2005, 39.1305],
|
||||
],
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
name: "样地A",
|
||||
area: 0.3,
|
||||
collector: "张三",
|
||||
images: JSON.stringify(["https://picsum.photos/id/1025/400/250"]),
|
||||
videos: JSON.stringify(["https://www.w3schools.com/html/mov_bbb.mp4"]),
|
||||
trees: JSON.stringify([
|
||||
{
|
||||
id: "T001",
|
||||
species: "白蜡",
|
||||
dbh: 18.5,
|
||||
height: 6.2,
|
||||
images: ["https://picsum.photos/id/1062/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "样地B", type: "样地" },
|
||||
geometry: { type: "Point", coordinates: [117.184, 39.133] },
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
{
|
||||
id: "T002",
|
||||
species: "国槐",
|
||||
dbh: 22.1,
|
||||
height: 7.4,
|
||||
images: ["https://picsum.photos/id/1032/400/250"],
|
||||
videos: [],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
export const sideTrees = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
|
||||
@@ -20,16 +20,36 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<PlotPopup
|
||||
:visible="popupVisible"
|
||||
:data="popupData"
|
||||
:position="popupPos"
|
||||
@enter-sample="showSamples"
|
||||
@enter-side="showSideTrees"
|
||||
/>
|
||||
<SamplePopup
|
||||
:visible="samplePopupVisible"
|
||||
:data="samplePopupData"
|
||||
:position="samplePopupPos"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import { TDT_KEY } from "../assets/tdt_key.js";
|
||||
import IndicatorSelector from "./IndicatorSelector.vue";
|
||||
import Legend from "./Legend.vue";
|
||||
import { plotGeoJSON, samplePlots, sideTrees } from "../assets/mockPlotData.js";
|
||||
import PlotPopup from "./PlotPopup.vue";
|
||||
import SamplePopup from "./SamplePopup.vue";
|
||||
import bbox from "@turf/bbox";
|
||||
|
||||
const popupVisible = ref(false);
|
||||
const popupData = ref({});
|
||||
const popupPos = ref({ x: 0, y: 0 });
|
||||
|
||||
// 天津市行政区划数据（区级）
|
||||
const districtUrl =
|
||||
@@ -93,6 +113,34 @@ const currentDistrict = ref(""); // 当前区名
|
||||
const mapContainer = ref(null);
|
||||
let map = null;
|
||||
const legendItems = ref([]);
|
||||
let allStreetsData = null;
|
||||
|
||||
// 加载街道
|
||||
async function loadAllStreets() {
|
||||
if (!allStreetsData) {
|
||||
const res = await fetch("/data/tianjin_street.geojson");
|
||||
allStreetsData = await res.json();
|
||||
}
|
||||
}
|
||||
|
||||
// 定义点击区级多边形的处理函数
|
||||
async function handleDistrictClick(e) {
|
||||
const districtName = e.features[0].properties.name;
|
||||
showStreetLevel(districtName);
|
||||
}
|
||||
|
||||
// 定义点击空白返回的处理函数
|
||||
function handleMapClick(e) {
|
||||
const queryLayers = ["tianjin-fill"];
|
||||
if (map.getLayer("street-fill")) queryLayers.push("street-fill");
|
||||
|
||||
const features = map.queryRenderedFeatures(e.point, {
|
||||
layers: queryLayers,
|
||||
});
|
||||
if (!features.length && currentLevel.value === "street") {
|
||||
backToDistrict();
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
onMounted(async () => {
|
||||
@@ -152,26 +200,11 @@ onMounted(async () => {
|
||||
updateMapColors();
|
||||
|
||||
// 点击区多边形，下钻街道级
|
||||
map.on("click", "tianjin-fill", async (e) => {
|
||||
const feature = e.features[0];
|
||||
const districtName = feature.properties.name;
|
||||
const adcode = feature.properties.adcode;
|
||||
await showStreetLevel(districtName, adcode);
|
||||
});
|
||||
|
||||
map.off("click", "tianjin-fill", handleDistrictClick);
|
||||
map.on("click", "tianjin-fill", handleDistrictClick);
|
||||
// 点击空白返回
|
||||
map.on("click", (e) => {
|
||||
// 只查询当前存在的图层
|
||||
const queryLayers = ["tianjin-fill"];
|
||||
if (map.getLayer("street-fill")) queryLayers.push("street-fill");
|
||||
|
||||
const features = map.queryRenderedFeatures(e.point, {
|
||||
layers: queryLayers,
|
||||
});
|
||||
if (!features.length && currentLevel.value === "street") {
|
||||
backToDistrict();
|
||||
}
|
||||
});
|
||||
map.off("click", handleMapClick);
|
||||
map.on("click", handleMapClick);
|
||||
});
|
||||
|
||||
// 缩放监听：14级以上显示图斑
|
||||
@@ -228,52 +261,80 @@ function updateMapColors(level = currentLevel.value) {
|
||||
}
|
||||
|
||||
// 下钻显示街道级
|
||||
async function showStreetLevel(districtName, adcode) {
|
||||
try {
|
||||
const url = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`;
|
||||
const res = await fetch(url);
|
||||
const streetGeo = await res.json();
|
||||
async function showStreetLevel(districtName) {
|
||||
await loadAllStreets();
|
||||
|
||||
// ✅ 筛选出该区所有街道
|
||||
const filteredFeatures = allStreetsData.features.filter(
|
||||
(f) => f.properties.县 === districtName
|
||||
);
|
||||
|
||||
if (filteredFeatures.length === 0) {
|
||||
alert(`区【${districtName}】没有找到街道数据`);
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ 构建新的 GeoJSON（只包含这个区的街道）
|
||||
const streetGeo = {
|
||||
type: "FeatureCollection",
|
||||
features: filteredFeatures,
|
||||
};
|
||||
|
||||
// ✅ 清除旧图层
|
||||
if (map.getSource("street")) {
|
||||
map.removeLayer("street-fill");
|
||||
map.removeLayer("street-outline");
|
||||
map.removeSource("street");
|
||||
}
|
||||
|
||||
map.addSource("street", { type: "geojson", data: streetGeo });
|
||||
// ✅ 添加新的街道层
|
||||
map.addSource("street", {
|
||||
type: "geojson",
|
||||
data: streetGeo,
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "street-fill",
|
||||
type: "fill",
|
||||
source: "street",
|
||||
paint: { "fill-color": ["get", "color"], "fill-opacity": 0.65 },
|
||||
paint: {
|
||||
"fill-color": ["get", "color"], // 根据指标设色
|
||||
"fill-opacity": 0.65,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "street-outline",
|
||||
type: "line",
|
||||
source: "street",
|
||||
paint: { "line-color": "#333", "line-width": 1 },
|
||||
paint: { "line-width": 1, "line-color": "#333" },
|
||||
});
|
||||
|
||||
// 隐藏区级
|
||||
map.setLayoutProperty("tianjin-fill", "visibility", "none");
|
||||
map.setLayoutProperty("tianjin-outline", "visibility", "none");
|
||||
|
||||
currentLevel.value = "street";
|
||||
currentDistrict.value = districtName;
|
||||
|
||||
updateMapColors("street");
|
||||
|
||||
// 定位到该区
|
||||
const bounds = new maplibregl.LngLatBounds();
|
||||
streetGeo.features.forEach((f) => {
|
||||
const coords = f.geometry.coordinates.flat(3);
|
||||
coords.forEach(([lng, lat]) => bounds.extend([lng, lat]));
|
||||
});
|
||||
map.fitBounds(bounds, { padding: 40, duration: 800 });
|
||||
} catch (err) {
|
||||
console.error("加载街道数据失败", err);
|
||||
alert(`该区(${districtName})暂无街道数据`);
|
||||
// ✅ 隐藏区级图层
|
||||
if (map.getLayer("tianjin-fill"))
|
||||
map.setLayoutProperty("tianjin-fill", "visibility", "none");
|
||||
|
||||
if (map.getLayer("tianjin-outline"))
|
||||
map.setLayoutProperty("tianjin-outline", "visibility", "none");
|
||||
|
||||
// ✅ 自动缩放到该区所有街道范围
|
||||
const extent = bbox(streetGeo); // [minX, minY, maxX, maxY]
|
||||
|
||||
map.fitBounds(
|
||||
[
|
||||
[extent[0], extent[1]],
|
||||
[extent[2], extent[3]],
|
||||
],
|
||||
{
|
||||
padding: 40,
|
||||
duration: 800,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 返回区级图层
|
||||
@@ -290,6 +351,50 @@ function backToDistrict() {
|
||||
updateMapColors("district");
|
||||
}
|
||||
|
||||
// 点击图斑显示弹窗
|
||||
function handlePlotClick(e) {
|
||||
const feature = e.features[0];
|
||||
let prop = feature.properties;
|
||||
|
||||
// --- 解析属性 ---
|
||||
let images = prop.images;
|
||||
let videos = prop.videos;
|
||||
|
||||
if (typeof images === "string") {
|
||||
try {
|
||||
images = JSON.parse(images);
|
||||
} catch {
|
||||
images = [];
|
||||
}
|
||||
}
|
||||
if (typeof videos === "string") {
|
||||
try {
|
||||
videos = JSON.parse(videos);
|
||||
} catch {
|
||||
videos = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 计算屏幕像素位置
|
||||
const canvas = map.getCanvas().getBoundingClientRect();
|
||||
const pos = map.project(e.lngLat);
|
||||
popupPos.value = {
|
||||
x: pos.x + canvas.left,
|
||||
y: pos.y + canvas.top,
|
||||
};
|
||||
|
||||
popupData.value = { ...prop, images, videos };
|
||||
popupVisible.value = true;
|
||||
}
|
||||
|
||||
// 点击空白关闭弹窗
|
||||
function handleMapClickClosePopup(e) {
|
||||
const features = map.queryRenderedFeatures(e.point, {
|
||||
layers: ["plot-fill"],
|
||||
});
|
||||
if (!features.length) popupVisible.value = false;
|
||||
}
|
||||
|
||||
// === 图斑层控制 ===
|
||||
function showPlotLayer() {
|
||||
// 已存在则直接显示
|
||||
@@ -351,96 +456,54 @@ function showPlotLayer() {
|
||||
];
|
||||
|
||||
// === 小班点击事件 ===
|
||||
map.on("click", "plot-fill", (e) => {
|
||||
const feature = e.features[0];
|
||||
const prop = feature.properties;
|
||||
// --- 关键修复 ---
|
||||
let images = prop.images;
|
||||
let videos = prop.videos;
|
||||
map.off("click", "plot-fill", handlePlotClick);
|
||||
map.off("click", handleMapClickClosePopup);
|
||||
|
||||
// 1. 检查 'images' 是否为字符串，如果是，则解析它
|
||||
if (typeof images === "string") {
|
||||
try {
|
||||
images = JSON.parse(images);
|
||||
} catch (err) {
|
||||
console.error("解析 'images' 属性失败:", err, images);
|
||||
images = []; // 解析失败时，提供一个空数组以避免后续错误
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 检查 'videos' 是否为字符串，如果是，则解析它
|
||||
if (typeof videos === "string") {
|
||||
try {
|
||||
videos = JSON.parse(videos);
|
||||
} catch (err) {
|
||||
console.error("解析 'videos' 属性失败:", err, videos);
|
||||
videos = []; // 解析失败时，提供一个空数组
|
||||
}
|
||||
}
|
||||
|
||||
// 3. (保险措施) 确保 'images' 和 'videos' 最终一定是数组
|
||||
// (处理它们可能是 null, undefined, 或解析后不是数组的情况)
|
||||
if (!Array.isArray(images)) {
|
||||
images = [];
|
||||
}
|
||||
if (!Array.isArray(videos)) {
|
||||
videos = [];
|
||||
}
|
||||
// --- 修复结束 ---
|
||||
// 动态生成图片与视频轮播HTML
|
||||
const imgHTML = images
|
||||
.map(
|
||||
(src) =>
|
||||
`<img src="${src}" style="width:100%;border-radius:8px;margin-bottom:6px;">`
|
||||
)
|
||||
.join("");
|
||||
const vidHTML = videos
|
||||
.map(
|
||||
(src) =>
|
||||
`<video controls style="width:100%;border-radius:8px;margin-bottom:6px;"><source src="${src}" type="video/mp4"></video>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
const popupHTML = `
|
||||
<div style="width:280px;font-size:13px;">
|
||||
<h4 style="margin:0 0 8px 0;">${prop.name}</h4>
|
||||
<p>类型：${prop.type}</p>
|
||||
<p>面积：${prop.area} ha</p>
|
||||
<p>采集人员：${prop.collector}</p>
|
||||
<p>优势树种：${prop.species}</p>
|
||||
<div style="overflow-y:auto;max-height:200px;">${imgHTML}${vidHTML}</div>
|
||||
<div style="display:flex;justify-content:space-between;margin-top:8px;">
|
||||
<button id="enter-sample" style="background:#1976d2;color:white;border:none;padding:4px 8px;border-radius:4px;">进入样地</button>
|
||||
<button id="enter-side" style="background:#388e3c;color:white;border:none;padding:4px 8px;border-radius:4px;">进入四旁树</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const popup = new maplibregl.Popup({ closeButton: true })
|
||||
.setLngLat(e.lngLat)
|
||||
.setHTML(popupHTML)
|
||||
.addTo(map);
|
||||
|
||||
// 等待DOM加载完后绑定事件
|
||||
popup.on("open", () => {
|
||||
document.getElementById("enter-sample").onclick = () => showSamples();
|
||||
document.getElementById("enter-side").onclick = () => showSideTrees();
|
||||
});
|
||||
});
|
||||
map.on("click", "plot-fill", handlePlotClick);
|
||||
map.on("click", handleMapClickClosePopup);
|
||||
}
|
||||
|
||||
// === 显示样地 ===
|
||||
// === 显示样地（Polygon） ===
|
||||
function showSamples() {
|
||||
// 如果之前存在，则移除旧图层和数据源
|
||||
if (map.getLayer("samples-fill")) map.removeLayer("samples-fill");
|
||||
if (map.getLayer("samples-outline")) map.removeLayer("samples-outline");
|
||||
if (map.getSource("samples")) map.removeSource("samples");
|
||||
if (map.getLayer("samples")) map.removeLayer("samples");
|
||||
|
||||
map.addSource("samples", { type: "geojson", data: samplePlots });
|
||||
map.addLayer({
|
||||
id: "samples",
|
||||
type: "circle",
|
||||
source: "samples",
|
||||
paint: { "circle-radius": 6, "circle-color": "#1976d2" },
|
||||
// 添加样地数据源
|
||||
map.addSource("samples", {
|
||||
type: "geojson",
|
||||
data: samplePlots, // ✅ 样地 Polygon 数据
|
||||
});
|
||||
|
||||
// 添加填充图层（样地面）
|
||||
map.addLayer({
|
||||
id: "samples-fill",
|
||||
type: "fill",
|
||||
source: "samples",
|
||||
paint: {
|
||||
"fill-color": "#1976d2",
|
||||
"fill-opacity": 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
// 添加轮廓线图层（边界线）
|
||||
map.addLayer({
|
||||
id: "samples-outline",
|
||||
type: "line",
|
||||
source: "samples",
|
||||
paint: {
|
||||
"line-color": "#0d47a1",
|
||||
"line-width": 2,
|
||||
},
|
||||
});
|
||||
|
||||
map.off("click", "samples-fill", handleSampleClick);
|
||||
map.on("click", "samples-fill", handleSampleClick);
|
||||
|
||||
map.off("click", handleCloseSamplePopup);
|
||||
map.on("click", handleCloseSamplePopup);
|
||||
}
|
||||
|
||||
// === 显示四旁树 ===
|
||||
@@ -462,6 +525,9 @@ function hidePlotLayer() {
|
||||
if (map.getLayer("plot-fill")) {
|
||||
map.setLayoutProperty("plot-fill", "visibility", "none");
|
||||
map.setLayoutProperty("plot-outline", "visibility", "none");
|
||||
map.setLayoutProperty("samples-fill", "visibility", "none");
|
||||
map.setLayoutProperty("samples-outline", "visibility", "none");
|
||||
map.setLayoutProperty("sideTrees", "visibility", "none");
|
||||
}
|
||||
|
||||
// 恢复行政区划或街道层显示
|
||||
@@ -477,22 +543,73 @@ function hidePlotLayer() {
|
||||
updateMapColors(currentLevel.value);
|
||||
}
|
||||
|
||||
// === 样地弹窗状态 ===
|
||||
const samplePopupVisible = ref(false);
|
||||
const samplePopupData = ref({});
|
||||
const samplePopupPos = ref({ x: 0, y: 0 });
|
||||
|
||||
// === 样地点击事件 ===
|
||||
function handleSampleClick(e) {
|
||||
const feature = e.features[0];
|
||||
let prop = feature.properties;
|
||||
|
||||
// 模拟解析样地属性
|
||||
let images = JSON.parse(prop.images || "[]");
|
||||
let videos = JSON.parse(prop.videos || "[]");
|
||||
let trees = JSON.parse(prop.trees || "[]");
|
||||
|
||||
const canvas = map.getCanvas().getBoundingClientRect();
|
||||
const pos = map.project(e.lngLat);
|
||||
samplePopupPos.value = { x: pos.x + canvas.left, y: pos.y + canvas.top };
|
||||
|
||||
samplePopupData.value = { ...prop, images, videos, trees };
|
||||
samplePopupVisible.value = true;
|
||||
}
|
||||
|
||||
// 点击空白关闭样地弹窗
|
||||
function handleCloseSamplePopup(e) {
|
||||
const features = map.queryRenderedFeatures(e.point, {
|
||||
layers: ["samples-fill"],
|
||||
});
|
||||
if (!features.length) samplePopupVisible.value = false;
|
||||
}
|
||||
|
||||
// 监听指标变化
|
||||
watch(selectedIndicator, () => updateMapColors());
|
||||
|
||||
// 页面卸载时销毁地图，释放 WebGL 上下文
|
||||
onBeforeUnmount(() => {
|
||||
if (map) {
|
||||
map.off("click", "tianjin-fill", handleDistrictClick);
|
||||
map.off("click", handleMapClick);
|
||||
map.off("click", "plot-fill", handlePlotClick);
|
||||
map.off("click", handleMapClickClosePopup);
|
||||
map.remove();
|
||||
map = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
.html,
|
||||
body,
|
||||
#app,
|
||||
.map-wrapper,
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.legend-panel {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
99
src/components/PlotPopup.vue
Normal file
99
src/components/PlotPopup.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
class="plot-popup"
|
||||
:style="{ left: position.x + 'px', top: position.y + 'px' }"
|
||||
>
|
||||
<el-card shadow="always" class="popup-card">
|
||||
<h4>{{ data.name }}</h4>
|
||||
<p>类型：{{ data.type }}</p>
|
||||
<p>面积：{{ data.area }} ha</p>
|
||||
<p>采集人员：{{ data.collector }}</p>
|
||||
<p>优势树种：{{ data.species }}</p>
|
||||
|
||||
<!-- 图片与视频轮播 -->
|
||||
<el-carousel
|
||||
height="220px"
|
||||
indicator-position="outside"
|
||||
:interval="4000"
|
||||
arrow="always"
|
||||
v-if="mediaItems.length"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in mediaItems"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<template v-if="item.type === 'image'">
|
||||
<img :src="item.src" class="media" />
|
||||
</template>
|
||||
<template v-else-if="item.type === 'video'">
|
||||
<video controls class="media">
|
||||
<source :src="item.src" type="video/mp4" />
|
||||
</video>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="popup-actions">
|
||||
<el-button type="primary" size="small" @click="$emit('enter-sample')">
|
||||
进入样地
|
||||
</el-button>
|
||||
<el-button type="success" size="small" @click="$emit('enter-side')">
|
||||
进入四旁树
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { ElCard, ElButton, ElCarousel, ElCarouselItem } from "element-plus";
|
||||
import "element-plus/es/components/card/style/css";
|
||||
import "element-plus/es/components/button/style/css";
|
||||
import "element-plus/es/components/carousel/style/css";
|
||||
import "element-plus/es/components/carousel-item/style/css";
|
||||
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
data: { type: Object, default: () => ({}) },
|
||||
position: { type: Object, default: () => ({ x: 0, y: 0 }) },
|
||||
});
|
||||
|
||||
const mediaItems = computed(() => {
|
||||
const imgs = Array.isArray(props.data.images) ? props.data.images : [];
|
||||
const vids = Array.isArray(props.data.videos) ? props.data.videos : [];
|
||||
return [
|
||||
...imgs.map((src) => ({ type: "image", src })),
|
||||
...vids.map((src) => ({ type: "video", src })),
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plot-popup {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.popup-card {
|
||||
width: 280px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
257
src/components/SamplePopup.vue
Normal file
257
src/components/SamplePopup.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
class="sample-popup"
|
||||
:style="{ left: position.x + 'px', top: position.y + 'px' }"
|
||||
>
|
||||
<el-card shadow="always" class="popup-card">
|
||||
<!-- 🟢 样地信息 -->
|
||||
<template v-if="!selectedTree">
|
||||
<h3 class="plot-title">{{ data.name }}</h3>
|
||||
<p>面积：{{ data.area }} ha</p>
|
||||
<p>采集人员：{{ data.collector }}</p>
|
||||
<p>样木数量：{{ trees.length }}</p>
|
||||
|
||||
<!-- 图片与视频 -->
|
||||
<el-carousel
|
||||
height="220px"
|
||||
indicator-position="outside"
|
||||
:interval="4000"
|
||||
arrow="always"
|
||||
v-if="mediaItems.length"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in mediaItems"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<template v-if="item.type === 'image'">
|
||||
<img :src="item.src" class="media" />
|
||||
</template>
|
||||
<template v-else-if="item.type === 'video'">
|
||||
<video controls class="media">
|
||||
<source :src="item.src" type="video/mp4" />
|
||||
</video>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
<!-- 🌳 样木列表 -->
|
||||
<h4 class="section-title">样木列表</h4>
|
||||
<ul class="tree-list">
|
||||
<li
|
||||
v-for="(tree, i) in trees"
|
||||
:key="i"
|
||||
class="tree-item"
|
||||
@click="selectTree(tree)"
|
||||
>
|
||||
<div class="tree-info">
|
||||
<span class="tree-id">#{{ tree.id }}</span>
|
||||
<span class="tree-species">{{ tree.species }}</span>
|
||||
</div>
|
||||
<el-icon class="tree-arrow">
|
||||
<i class="el-icon-arrow-right" />
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- 🟣 样木详情 -->
|
||||
<template v-else>
|
||||
<div class="tree-header">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
size="small"
|
||||
icon="el-icon-arrow-left"
|
||||
@click="selectedTree = null"
|
||||
>
|
||||
返回样地
|
||||
</el-button>
|
||||
<h3>样木 {{ selectedTree.id }}</h3>
|
||||
</div>
|
||||
|
||||
<p>树种：{{ selectedTree.species }}</p>
|
||||
<p>胸径：{{ selectedTree.dbh }} cm</p>
|
||||
<p>树高：{{ selectedTree.height }} m</p>
|
||||
|
||||
<el-carousel
|
||||
height="220px"
|
||||
indicator-position="outside"
|
||||
:interval="4000"
|
||||
arrow="always"
|
||||
v-if="treeMedia.length"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in treeMedia"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<template v-if="item.type === 'image'">
|
||||
<img :src="item.src" class="media" />
|
||||
</template>
|
||||
<template v-else-if="item.type === 'video'">
|
||||
<video controls class="media">
|
||||
<source :src="item.src" type="video/mp4" />
|
||||
</video>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import {
|
||||
ElCard,
|
||||
ElButton,
|
||||
ElCarousel,
|
||||
ElCarouselItem,
|
||||
ElIcon,
|
||||
} from "element-plus";
|
||||
import "element-plus/es/components/card/style/css";
|
||||
import "element-plus/es/components/button/style/css";
|
||||
import "element-plus/es/components/carousel/style/css";
|
||||
import "element-plus/es/components/carousel-item/style/css";
|
||||
import "element-plus/es/components/icon/style/css";
|
||||
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
data: { type: Object, default: () => ({}) },
|
||||
position: { type: Object, default: () => ({ x: 0, y: 0 }) },
|
||||
});
|
||||
|
||||
const selectedTree = ref(null);
|
||||
|
||||
// 样地内样木列表
|
||||
const trees = computed(() => props.data.trees || []);
|
||||
|
||||
// 样地媒体
|
||||
const mediaItems = computed(() => {
|
||||
const imgs = Array.isArray(props.data.images) ? props.data.images : [];
|
||||
const vids = Array.isArray(props.data.videos) ? props.data.videos : [];
|
||||
return [
|
||||
...imgs.map((src) => ({ type: "image", src })),
|
||||
...vids.map((src) => ({ type: "video", src })),
|
||||
];
|
||||
});
|
||||
|
||||
// 当前选中样木媒体
|
||||
const treeMedia = computed(() => {
|
||||
if (!selectedTree.value) return [];
|
||||
const imgs = selectedTree.value.images || [];
|
||||
const vids = selectedTree.value.videos || [];
|
||||
return [
|
||||
...imgs.map((src) => ({ type: "image", src })),
|
||||
...vids.map((src) => ({ type: "video", src })),
|
||||
];
|
||||
});
|
||||
|
||||
function selectTree(tree) {
|
||||
selectedTree.value = tree;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sample-popup {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.popup-card {
|
||||
width: 300px;
|
||||
font-size: 13px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plot-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
/* === 样木列表 === */
|
||||
.tree-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
max-height: 130px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #e3f2fd;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background: #bbdefb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tree-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tree-id {
|
||||
font-weight: bold;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.tree-species {
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.tree-arrow {
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
/* 滚动条优化 */
|
||||
.tree-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.tree-list::-webkit-scrollbar-thumb {
|
||||
background-color: #90caf9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.tree-list::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #64b5f6;
|
||||
}
|
||||
|
||||
/* 图片与视频 */
|
||||
.media {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 样木详情页头部 */
|
||||
.tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,4 +2,9 @@ import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
@@ -18,6 +18,7 @@ a {
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
@@ -46,9 +47,11 @@ button {
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
@@ -58,21 +61,26 @@ button:focus-visible {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
27
tianjin_street.qmd
Normal file
27
tianjin_street.qmd
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE qgis PUBLIC 'http://mrcc.com/qgis.dtd' 'SYSTEM'>
|
||||
<qgis version="3.34.11-Prizren">
|
||||
<identifier>2021年我国乡镇（街道）边界数据</identifier>
|
||||
<parentidentifier></parentidentifier>
|
||||
<language>ZHO</language>
|
||||
<type>dataset</type>
|
||||
<title>2021年我国乡镇（街道）边界数据</title>
|
||||
<abstract></abstract>
|
||||
<links/>
|
||||
<dates/>
|
||||
<fees></fees>
|
||||
<encoding></encoding>
|
||||
<crs>
|
||||
<spatialrefsys nativeFormat="Wkt">
|
||||
<wkt>GEOGCRS["WGS 84",ENSEMBLE["World Geodetic System 1984 ensemble",MEMBER["World Geodetic System 1984 (Transit)"],MEMBER["World Geodetic System 1984 (G730)"],MEMBER["World Geodetic System 1984 (G873)"],MEMBER["World Geodetic System 1984 (G1150)"],MEMBER["World Geodetic System 1984 (G1674)"],MEMBER["World Geodetic System 1984 (G1762)"],MEMBER["World Geodetic System 1984 (G2139)"],ELLIPSOID["WGS 84",6378137,298.257223563,LENGTHUNIT["metre",1]],ENSEMBLEACCURACY[2.0]],PRIMEM["Greenwich",0,ANGLEUNIT["degree",0.0174532925199433]],CS[ellipsoidal,2],AXIS["geodetic latitude (Lat)",north,ORDER[1],ANGLEUNIT["degree",0.0174532925199433]],AXIS["geodetic longitude (Lon)",east,ORDER[2],ANGLEUNIT["degree",0.0174532925199433]],USAGE[SCOPE["Horizontal component of 3D system."],AREA["World."],BBOX[-90,-180,90,180]],ID["EPSG",4326]]</wkt>
|
||||
<proj4>+proj=longlat +datum=WGS84 +no_defs</proj4>
|
||||
<srsid>3452</srsid>
|
||||
<srid>4326</srid>
|
||||
<authid>EPSG:4326</authid>
|
||||
<description>WGS 84</description>
|
||||
<projectionacronym>longlat</projectionacronym>
|
||||
<ellipsoidacronym>EPSG:7030</ellipsoidacronym>
|
||||
<geographicflag>true</geographicflag>
|
||||
</spatialrefsys>
|
||||
</crs>
|
||||
<extent/>
|
||||
</qgis>
|
||||
Reference in New Issue
Block a user