feat: 样式修改、地图采用js
This commit is contained in:
parent
c5c713c908
commit
ad97e3ba02
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import * as turf from "@turf/turf";
|
||||
|
|
@ -7,58 +7,70 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
|
|||
|
||||
const mapContainer = useTemplateRef("mapContainer");
|
||||
|
||||
const map = ref<maplibregl.Map>();
|
||||
/**
|
||||
* @type {Ref<maplibregl.Map>}
|
||||
*/
|
||||
const map = ref();
|
||||
|
||||
const {feature} = useApi();
|
||||
const { feature } = useApi();
|
||||
|
||||
MapboxDraw.constants.classes.CANVAS = 'maplibregl-canvas';
|
||||
MapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';
|
||||
MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
|
||||
MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
|
||||
MapboxDraw.constants.classes.ATTRIBUTION = 'maplibregl-ctrl-attrib';
|
||||
|
||||
MapboxDraw.lib.theme.find((x: any) => x.id === 'gl-draw-lines').paint['line-dasharray'] = [0.2, 2]
|
||||
MapboxDraw.constants.classes.CANVAS = "maplibregl-canvas";
|
||||
MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
|
||||
MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
|
||||
MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";
|
||||
MapboxDraw.constants.classes.ATTRIBUTION = "maplibregl-ctrl-attrib";
|
||||
|
||||
MapboxDraw.lib.theme.find((x) => x.id === "gl-draw-lines").paint[
|
||||
"line-dasharray"
|
||||
] = [0.2, 2];
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapContainer.value) return;
|
||||
map.value = new maplibregl.Map({
|
||||
container: mapContainer.value, // container id
|
||||
style: "https://demotiles.maplibre.org/style.json", // style URL
|
||||
center: [0, 0], // starting position [lng, lat]
|
||||
zoom: 12, // starting zoom
|
||||
center: [116.405285, 39.904989], // starting position [lng, lat]
|
||||
zoom: 4, // starting zoom
|
||||
});
|
||||
// map.value.removeControl(map.value._controls[0]);
|
||||
map.value.removeControl(map.value._controls[0]);
|
||||
const draw = new MapboxDraw({
|
||||
displayControlsDefault: false,
|
||||
controls: {
|
||||
point: true,
|
||||
line_string: true,
|
||||
polygon: true,
|
||||
trash: true
|
||||
}
|
||||
})
|
||||
|
||||
const updateArea = (e: any) => {
|
||||
const data = draw.getAll();
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
map.value.addControl(draw, "top-right");
|
||||
map.value.on('draw.create', updateArea);
|
||||
map.value.on('draw.delete', updateArea);
|
||||
map.value.on('draw.update', updateArea);
|
||||
map.value.on('draw.selectionchange', (e: any) => {
|
||||
console.log(e)
|
||||
trash: true,
|
||||
// combine_features: true,
|
||||
// uncombine_features: true,
|
||||
},
|
||||
});
|
||||
|
||||
const {data, status} = await feature.list<any>({page: 1, size: 10});
|
||||
if (status.value !== 'success') return;
|
||||
let jsonData = turf.featureCollection(data.value.data.map((x: any) => turf.feature(x.geometry, {
|
||||
id: x.id,
|
||||
name: x.name
|
||||
})));
|
||||
const updateArea = (e) => {
|
||||
const data = draw.getAll();
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
map.value.addControl(draw, "top-right");
|
||||
map.value.on("draw.create", updateArea);
|
||||
map.value.on("draw.delete", updateArea);
|
||||
map.value.on("draw.update", updateArea);
|
||||
map.value.on("draw.selectionchange", (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
const { data, status } = await feature.list({ page: 1, size: 10 });
|
||||
if (status.value !== "success") return;
|
||||
let jsonData = turf.featureCollection(
|
||||
data.value.data.map((x) =>
|
||||
turf.feature(x.geometry, {
|
||||
id: x.id,
|
||||
name: x.name,
|
||||
})
|
||||
)
|
||||
);
|
||||
console.log(jsonData);
|
||||
|
||||
map.value.addSource("data", {type: "geojson", data: jsonData});
|
||||
map.value.addSource("data", { type: "geojson", data: jsonData });
|
||||
map.value.addLayer({
|
||||
id: "data-symbol",
|
||||
type: "symbol",
|
||||
|
|
@ -81,10 +93,10 @@ onMounted(async () => {
|
|||
"fill-opacity": 0.5,
|
||||
"fill-outline-color": "#FF0000", // 添加边界线颜色
|
||||
},
|
||||
})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="mapContainer" class="w-full h-full"/>
|
||||
<div ref="mapContainer" class="w-full h-full" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ const handleMenuChange = () => {
|
|||
};
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -55,7 +54,7 @@ const route = useRoute();
|
|||
aria-label="close sidebar"
|
||||
class="drawer-overlay"
|
||||
></label>
|
||||
<ul class="menu bg-base-300 text-base-content min-h-full w-56 p-2">
|
||||
<ul class="menu bg-base-300 text-base-content h-full w-56 p-2">
|
||||
<li>
|
||||
<a href="/" :class="route.path === '/' ? 'active' : ''"
|
||||
><Icon name="material-symbols:home-outline-rounded" />首页</a
|
||||
|
|
@ -74,14 +73,16 @@ const route = useRoute();
|
|||
<li><a>Sidebar Item 2</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="drawer-content flex-auto overflow-x-hidden overflow-y-auto bg-base-100">
|
||||
<section class="min-h-full relative p-4 pb-8">
|
||||
<Breadcrumbs />
|
||||
<main
|
||||
class="drawer-content flex-auto relative p-4 pb-0 overflow-hidden bg-base-100 flex flex-col"
|
||||
>
|
||||
<Breadcrumbs />
|
||||
<section class="flex-auto overflow-y-auto overflow-x-hidden">
|
||||
<slot />
|
||||
<footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
|
||||
©powered by maptile
|
||||
</footer>
|
||||
</section>
|
||||
<footer class="mt-auto w-full h-8 py-2 text-center text-xs">
|
||||
©powered by maptile
|
||||
</footer>
|
||||
</main>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1326,7 +1326,6 @@
|
|||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
|
||||
"integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"geojson-normalize": "geojson-normalize"
|
||||
}
|
||||
|
|
@ -1356,7 +1355,6 @@
|
|||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
|
||||
"integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@mapbox/geojson-area": "^0.2.2",
|
||||
"@mapbox/geojson-normalize": "^0.0.1",
|
||||
|
|
@ -1371,8 +1369,7 @@
|
|||
"node_modules/@mapbox/mapbox-gl-draw/node_modules/@mapbox/point-geometry": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
|
||||
"integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
|
||||
"license": "ISC"
|
||||
"integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ=="
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp": {
|
||||
"version": "2.0.0",
|
||||
|
|
@ -6069,14 +6066,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/call-bound": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.3.tgz",
|
||||
"integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
|
||||
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"get-intrinsic": "^1.2.6"
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"get-intrinsic": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ definePageMeta({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[600px] bg-red-200">
|
||||
<div class="w-full h-full relative">
|
||||
<Map />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue