11.6
This commit is contained in:
TigerNiu
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1565
package-lock.json
generated
Normal file
1565
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "tianjin-map",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"maplibre-gl": "^5.11.0",
|
||||
"vue": "^3.5.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"vite": "^7.1.7"
|
||||
}
|
||||
}
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
20
src/App.vue
Normal file
20
src/App.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<MapView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MapView from "./components/MapView.vue";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.app-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
94
src/assets/mockPlotData.js
Normal file
94
src/assets/mockPlotData.js
Normal file
@@ -0,0 +1,94 @@
|
||||
// 模拟图斑（小班）数据
|
||||
export const plotGeoJSON = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {
|
||||
name: "小班1",
|
||||
type: "乔木林",
|
||||
area: 12.5,
|
||||
collector: "张林",
|
||||
species: "栎树",
|
||||
images: [
|
||||
"https://picsum.photos/id/1018/400/250",
|
||||
"https://picsum.photos/id/1021/400/250",
|
||||
"https://picsum.photos/id/1024/400/250",
|
||||
],
|
||||
videos: [
|
||||
"https://www.w3schools.com/html/mov_bbb.mp4",
|
||||
"https://www.w3schools.com/html/movie.mp4",
|
||||
],
|
||||
},
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.180, 39.130],
|
||||
[117.185, 39.130],
|
||||
[117.185, 39.135],
|
||||
[117.180, 39.135],
|
||||
[117.180, 39.130],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {
|
||||
name: "小班2",
|
||||
type: "灌木林",
|
||||
area: 8.3,
|
||||
collector: "李青",
|
||||
species: "柽柳",
|
||||
images: ["https://picsum.photos/id/1033/400/250"],
|
||||
videos: ["https://www.w3schools.com/html/mov_bbb.mp4"],
|
||||
},
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.190, 39.130],
|
||||
[117.195, 39.130],
|
||||
[117.195, 39.135],
|
||||
[117.190, 39.135],
|
||||
[117.190, 39.130],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 模拟样地与四旁树数据
|
||||
export const samplePlots = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "样地A", type: "样地" },
|
||||
geometry: { type: "Point", coordinates: [117.182, 39.132] },
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "样地B", type: "样地" },
|
||||
geometry: { type: "Point", coordinates: [117.184, 39.133] },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const sideTrees = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "四旁树1", type: "四旁树" },
|
||||
geometry: { type: "Point", coordinates: [117.183, 39.131] },
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: { name: "四旁树2", type: "四旁树" },
|
||||
geometry: { type: "Point", coordinates: [117.185, 39.134] },
|
||||
},
|
||||
],
|
||||
};
|
||||
1
src/assets/tdt_key.js
Normal file
1
src/assets/tdt_key.js
Normal file
@@ -0,0 +1 @@
|
||||
export const TDT_KEY = "741d2d8cd812a01168db354d0d8613b7"
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
35
src/components/IndicatorSelector.vue
Normal file
35
src/components/IndicatorSelector.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<label>选择指标：</label>
|
||||
<select v-model="localValue">
|
||||
<option v-for="ind in indicators" :key="ind" :value="ind">{{ ind }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
indicators: Array,
|
||||
modelValue: String,
|
||||
});
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
// 创建本地变量副本
|
||||
const localValue = ref(props.modelValue);
|
||||
|
||||
// 当父组件传值变化时，同步更新本地变量
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
localValue.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
// 当选择变化时，向父组件同步
|
||||
watch(localValue, (val) => {
|
||||
emit("update:modelValue", val);
|
||||
});
|
||||
</script>
|
||||
|
||||
36
src/components/Legend.vue
Normal file
36
src/components/Legend.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="legend-box">
|
||||
<div v-for="item in legendData" :key="item.color" class="legend-item">
|
||||
<span class="color-box" :style="{ background: item.color }"></span>
|
||||
<span>{{ item.range }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
legendData: Array,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.legend-box {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.color-box {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
margin-right: 6px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
524
src/components/MapView.vue
Normal file
524
src/components/MapView.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<div class="map-wrapper">
|
||||
<div id="map" ref="mapContainer" class="map-container"></div>
|
||||
|
||||
<div class="legend-panel">
|
||||
<Legend :legendData="legendItems" />
|
||||
|
||||
<IndicatorSelector
|
||||
:indicators="Object.keys(indicatorData)"
|
||||
v-model="selectedIndicator"
|
||||
/>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<button
|
||||
v-if="currentLevel === 'street'"
|
||||
class="back-btn"
|
||||
@click="backToDistrict"
|
||||
>
|
||||
返回区级
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, 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";
|
||||
|
||||
// 天津市行政区划数据（区级）
|
||||
const districtUrl =
|
||||
"https://geo.datav.aliyun.com/areas_v3/bound/120000_full.json";
|
||||
|
||||
// 区级与街道级指标（模拟数据）
|
||||
const indicatorData = {
|
||||
完成状态: {
|
||||
和平区: "已完成",
|
||||
河东区: "未完成",
|
||||
河西区: "已完成",
|
||||
南开区: "未开始",
|
||||
河北区: "未完成",
|
||||
红桥区: "已完成",
|
||||
滨海新区: "未完成",
|
||||
},
|
||||
图斑面积: {
|
||||
和平区: 230,
|
||||
河东区: 340,
|
||||
河西区: 410,
|
||||
南开区: 300,
|
||||
河北区: 500,
|
||||
红桥区: 270,
|
||||
滨海新区: 1200,
|
||||
},
|
||||
图斑数量: {
|
||||
和平区: 45,
|
||||
河东区: 80,
|
||||
河西区: 70,
|
||||
南开区: 60,
|
||||
河北区: 85,
|
||||
红桥区: 50,
|
||||
滨海新区: 150,
|
||||
},
|
||||
};
|
||||
|
||||
// 模拟街道级指标（真实项目应从接口获取）
|
||||
const streetIndicatorData = {
|
||||
完成状态: {
|
||||
光复道街道: "已完成",
|
||||
建昌道街道: "未完成",
|
||||
王串场街道: "未开始",
|
||||
},
|
||||
图斑面积: {
|
||||
光复道街道: 200,
|
||||
建昌道街道: 350,
|
||||
王串场街道: 120,
|
||||
},
|
||||
图斑数量: {
|
||||
光复道街道: 40,
|
||||
建昌道街道: 55,
|
||||
王串场街道: 30,
|
||||
},
|
||||
};
|
||||
|
||||
// 状态管理
|
||||
const selectedIndicator = ref("完成状态");
|
||||
const currentLevel = ref("district"); // 当前层级
|
||||
const currentDistrict = ref(""); // 当前区名
|
||||
|
||||
const mapContainer = ref(null);
|
||||
let map = null;
|
||||
const legendItems = ref([]);
|
||||
|
||||
// 初始化地图
|
||||
onMounted(async () => {
|
||||
map = new maplibregl.Map({
|
||||
container: mapContainer.value,
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
tdt_vec: {
|
||||
type: "raster",
|
||||
tiles: Array.from(
|
||||
{ length: 8 },
|
||||
(_, i) =>
|
||||
`https://t${i}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_KEY}`
|
||||
),
|
||||
tileSize: 256,
|
||||
},
|
||||
tdt_cva: {
|
||||
type: "raster",
|
||||
tiles: Array.from(
|
||||
{ length: 8 },
|
||||
(_, i) =>
|
||||
`https://t${i}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_KEY}`
|
||||
),
|
||||
tileSize: 256,
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{ id: "tdt_vec", type: "raster", source: "tdt_vec" },
|
||||
{ id: "tdt_cva", type: "raster", source: "tdt_cva" },
|
||||
],
|
||||
},
|
||||
center: [117.2, 39.13],
|
||||
zoom: 8,
|
||||
});
|
||||
|
||||
const res = await fetch(districtUrl);
|
||||
const geojson = await res.json();
|
||||
|
||||
map.on("load", () => {
|
||||
map.addSource("tianjin", { type: "geojson", data: geojson });
|
||||
|
||||
map.addLayer({
|
||||
id: "tianjin-fill",
|
||||
type: "fill",
|
||||
source: "tianjin",
|
||||
paint: { "fill-color": ["get", "color"], "fill-opacity": 0.6 },
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "tianjin-outline",
|
||||
type: "line",
|
||||
source: "tianjin",
|
||||
paint: { "line-color": "#333", "line-width": 1 },
|
||||
});
|
||||
|
||||
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.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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 缩放监听：14级以上显示图斑
|
||||
map.on("zoom", () => {
|
||||
const zoom = map.getZoom();
|
||||
if (zoom >= 14) {
|
||||
showPlotLayer();
|
||||
} else {
|
||||
hidePlotLayer();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 更新地图着色
|
||||
function updateMapColors(level = currentLevel.value) {
|
||||
const sourceId = level === "district" ? "tianjin" : "street";
|
||||
const data = map.getSource(sourceId)?._data;
|
||||
if (!data) return;
|
||||
|
||||
const indicator = level === "district" ? indicatorData : streetIndicatorData;
|
||||
const selected = selectedIndicator.value;
|
||||
|
||||
if (selected === "完成状态") {
|
||||
const colors = { 已完成: "#4CAF50", 未完成: "#FFC107", 未开始: "#BDBDBD" };
|
||||
data.features.forEach((f) => {
|
||||
const name = f.properties.name;
|
||||
const val = indicator[selected][name];
|
||||
f.properties.color = colors[val] || "#ccc";
|
||||
});
|
||||
map.getSource(sourceId).setData(data);
|
||||
legendItems.value = Object.entries(colors).map(([k, v]) => ({
|
||||
color: v,
|
||||
range: k,
|
||||
}));
|
||||
} else {
|
||||
const values = Object.values(indicator[selected]);
|
||||
const min = Math.min(...values);
|
||||
const max = Math.max(...values);
|
||||
const colors = ["#f2f0f7", "#cbc9e2", "#9e9ac8", "#756bb1", "#54278f"];
|
||||
const getColor = (v) =>
|
||||
colors[Math.floor(((v - min) / (max - min)) * (colors.length - 1))];
|
||||
data.features.forEach((f) => {
|
||||
const name = f.properties.name;
|
||||
const v = indicator[selected][name];
|
||||
f.properties.color = v ? getColor(v) : "#ccc";
|
||||
});
|
||||
map.getSource(sourceId).setData(data);
|
||||
legendItems.value = colors.map((c, i) => {
|
||||
const start = min + (i / colors.length) * (max - min);
|
||||
const end = min + ((i + 1) / colors.length) * (max - min);
|
||||
return { color: c, range: `${start.toFixed(1)} - ${end.toFixed(1)}` };
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 下钻显示街道级
|
||||
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();
|
||||
|
||||
if (map.getSource("street")) {
|
||||
map.removeLayer("street-fill");
|
||||
map.removeLayer("street-outline");
|
||||
map.removeSource("street");
|
||||
}
|
||||
|
||||
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 },
|
||||
});
|
||||
map.addLayer({
|
||||
id: "street-outline",
|
||||
type: "line",
|
||||
source: "street",
|
||||
paint: { "line-color": "#333", "line-width": 1 },
|
||||
});
|
||||
|
||||
// 隐藏区级
|
||||
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})暂无街道数据`);
|
||||
}
|
||||
}
|
||||
|
||||
// 返回区级图层
|
||||
function backToDistrict() {
|
||||
if (map.getLayer("street-fill")) {
|
||||
map.removeLayer("street-fill");
|
||||
map.removeLayer("street-outline");
|
||||
map.removeSource("street");
|
||||
}
|
||||
map.setLayoutProperty("tianjin-fill", "visibility", "visible");
|
||||
map.setLayoutProperty("tianjin-outline", "visibility", "visible");
|
||||
currentLevel.value = "district";
|
||||
map.flyTo({ center: [117.2, 39.13], zoom: 8 });
|
||||
updateMapColors("district");
|
||||
}
|
||||
|
||||
// === 图斑层控制 ===
|
||||
function showPlotLayer() {
|
||||
// 已存在则直接显示
|
||||
if (map.getLayer("plot-fill")) {
|
||||
map.setLayoutProperty("plot-fill", "visibility", "visible");
|
||||
map.setLayoutProperty("plot-outline", "visibility", "visible");
|
||||
} else {
|
||||
map.addSource("plot", { type: "geojson", data: plotGeoJSON });
|
||||
|
||||
const typeColors = {
|
||||
乔木林: "#4CAF50",
|
||||
灌木林: "#8BC34A",
|
||||
草地: "#CDDC39",
|
||||
};
|
||||
|
||||
map.addLayer({
|
||||
id: "plot-fill",
|
||||
type: "fill",
|
||||
source: "plot",
|
||||
paint: {
|
||||
"fill-color": [
|
||||
"match",
|
||||
["get", "type"],
|
||||
"乔木林",
|
||||
typeColors["乔木林"],
|
||||
"灌木林",
|
||||
typeColors["灌木林"],
|
||||
"草地",
|
||||
typeColors["草地"],
|
||||
"#ccc",
|
||||
],
|
||||
"fill-opacity": 0.7,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "plot-outline",
|
||||
type: "line",
|
||||
source: "plot",
|
||||
paint: { "line-color": "#333", "line-width": 1 },
|
||||
});
|
||||
}
|
||||
|
||||
// 隐藏行政区划与街道层
|
||||
if (map.getLayer("tianjin-fill"))
|
||||
map.setLayoutProperty("tianjin-fill", "visibility", "none");
|
||||
if (map.getLayer("tianjin-outline"))
|
||||
map.setLayoutProperty("tianjin-outline", "visibility", "none");
|
||||
if (map.getLayer("street-fill"))
|
||||
map.setLayoutProperty("street-fill", "visibility", "none");
|
||||
if (map.getLayer("street-outline"))
|
||||
map.setLayoutProperty("street-outline", "visibility", "none");
|
||||
|
||||
// 更新图例为图斑类型
|
||||
legendItems.value = [
|
||||
{ color: "#4CAF50", range: "乔木林" },
|
||||
{ color: "#8BC34A", range: "灌木林" },
|
||||
{ color: "#CDDC39", range: "草地" },
|
||||
];
|
||||
|
||||
// === 小班点击事件 ===
|
||||
map.on("click", "plot-fill", (e) => {
|
||||
const feature = e.features[0];
|
||||
const prop = feature.properties;
|
||||
// --- 关键修复 ---
|
||||
let images = prop.images;
|
||||
let videos = prop.videos;
|
||||
|
||||
// 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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// === 显示样地 ===
|
||||
function showSamples() {
|
||||
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" },
|
||||
});
|
||||
}
|
||||
|
||||
// === 显示四旁树 ===
|
||||
function showSideTrees() {
|
||||
if (map.getSource("sideTrees")) map.removeSource("sideTrees");
|
||||
if (map.getLayer("sideTrees")) map.removeLayer("sideTrees");
|
||||
|
||||
map.addSource("sideTrees", { type: "geojson", data: sideTrees });
|
||||
map.addLayer({
|
||||
id: "sideTrees",
|
||||
type: "circle",
|
||||
source: "sideTrees",
|
||||
paint: { "circle-radius": 6, "circle-color": "#388e3c" },
|
||||
});
|
||||
}
|
||||
|
||||
function hidePlotLayer() {
|
||||
// 隐藏图斑层
|
||||
if (map.getLayer("plot-fill")) {
|
||||
map.setLayoutProperty("plot-fill", "visibility", "none");
|
||||
map.setLayoutProperty("plot-outline", "visibility", "none");
|
||||
}
|
||||
|
||||
// 恢复行政区划或街道层显示
|
||||
if (currentLevel.value === "district") {
|
||||
map.setLayoutProperty("tianjin-fill", "visibility", "visible");
|
||||
map.setLayoutProperty("tianjin-outline", "visibility", "visible");
|
||||
} else if (currentLevel.value === "street") {
|
||||
map.setLayoutProperty("street-fill", "visibility", "visible");
|
||||
map.setLayoutProperty("street-outline", "visibility", "visible");
|
||||
}
|
||||
|
||||
// 恢复行政区划/街道的图例
|
||||
updateMapColors(currentLevel.value);
|
||||
}
|
||||
|
||||
// 监听指标变化
|
||||
watch(selectedIndicator, () => updateMapColors());
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.legend-panel {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.legend-panel > * {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
border: none;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: #1565c0;
|
||||
}
|
||||
</style>
|
||||
68
src/components/patches/plotData.js
Normal file
68
src/components/patches/plotData.js
Normal file
@@ -0,0 +1,68 @@
|
||||
// src/components/patches/plotData.js
|
||||
|
||||
export const plotGeoJSON = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {
|
||||
id: 1,
|
||||
type: "乔木林",
|
||||
species: "白蜡",
|
||||
},
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.180, 39.120],
|
||||
[117.185, 39.120],
|
||||
[117.185, 39.125],
|
||||
[117.180, 39.125],
|
||||
[117.180, 39.120],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {
|
||||
id: 2,
|
||||
type: "灌木林",
|
||||
species: "紫穗槐",
|
||||
},
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.190, 39.130],
|
||||
[117.195, 39.130],
|
||||
[117.195, 39.135],
|
||||
[117.190, 39.135],
|
||||
[117.190, 39.130],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {
|
||||
id: 3,
|
||||
type: "草地",
|
||||
species: "狗牙根",
|
||||
},
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [
|
||||
[
|
||||
[117.200, 39.110],
|
||||
[117.205, 39.110],
|
||||
[117.205, 39.115],
|
||||
[117.200, 39.115],
|
||||
[117.200, 39.110],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
5
src/main.js
Normal file
5
src/main.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Reference in New Issue
Block a user