update

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <Map class="map" :onMapLoad="handleMapLoaded"></Map>
-        <div class="editor">
+        <div class="editor" :class="{ hidden: !StoreEditor.show.value }">
             <FeatureCollectionEditor :fc="fc"></FeatureCollectionEditor>
         </div>
     </div>
@@ -10,17 +10,20 @@
 <script setup lang="ts">
 import { Component, createApp, ref } from 'vue';
 import Map from '../../packages/maplugin-maplibre/demo/Map.vue';
-import Drawer from '../components/features/Drawer.vue';
-import Measurer from '../components/features/Measurer.vue';
-import FeatureCollectionEditor from '../components/features/FeatureCollectionEditor.vue';
+import Drawer from './components/features/Drawer.vue';
+import Measurer from './components/features/Measurer.vue';
+import FeatureCollectionEditor from './components/features/FeatureCollectionEditor.vue';
+import ShowEditorButton from './components/features/ShowEditorButton.vue';
 
 import { DrawManager, GeoJSONLayerManager, MeasureManager } from '../../packages/maplugin-maplibre';
 import { TIdentityGeoJSONFeature } from '../../packages/maplugin-core/types';
+import { StoreEditor } from './stores';
 
 const fc = ref<GeoJSON.FeatureCollection>({
     type: 'FeatureCollection',
     features: []
 });
+
 let glManager: GeoJSONLayerManager;
 
 function handleMapLoaded(map: maplibregl.Map) {
@@ -31,6 +34,7 @@ function handleMapLoaded(map: maplibregl.Map) {
         type: 'raster',
         source: {
             type: 'raster',
+            maxzoom: 19,
             tiles: ["https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"]
         }
     });
@@ -40,6 +44,7 @@ function handleMapLoaded(map: maplibregl.Map) {
         fc.value = glManager.fc;
     });
 
+    createMapControl(map, ShowEditorButton);
     createMapControl(map, Drawer, { drawManager: new DrawManager(glManager, {}) });
     createMapControl(map, Measurer, { measureManager: new MeasureManager(glManager, {}) });
 }
@@ -77,4 +82,8 @@ function createMapControl(map: maplibregl.Map, component: Component, data?: Reco
     height: 100vh !important;
     width: 30%;
 }
+
+.editor.hidden {
+    display: none;
+}
 </style>

geojson-editor/components/base/RadioButton.vue renamed to geojson-editor/src/components/base/RadioButton.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="toggle-button" :class="{ active: active }" @click="handleClick">{{ content }}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+    content: string,
+    defaultActive: boolean,
+    onChange: (val: boolean) => void
+}>();
+
+const active = ref(props.defaultActive);
+
+function handleClick(v: boolean) {
+    props.onChange(!active.value);
+    active.value = !active.value;
+}
+</script>
+
+<style scoped>
+.toggle-button {
+    padding: 6px 12px;
+    background: var(--color-bg);
+    color: var(--color-word);
+    font-size: var(--color-word);
+    cursor: pointer;
+    border-radius: 6px;
+}
+
+.toggle-button.active {
+    color: var(--color-primary);
+}
+
+.toggle-button:hover {
+    background-color: var(--color-hover);
+}
+</style>

geojson-editor/src/components/base/ToggleButton.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import RadioButton from '../base/RadioButton.vue';
-import { DrawManager, TDrawGeometryType } from '../../../packages/maplugin-core';
+import { DrawManager, TDrawGeometryType } from '../../../../packages/maplugin-core';
 import { ref, watch } from 'vue';
 
 const radios: Record<TDrawGeometryType, string> = {

geojson-editor/components/features/Drawer.vue renamed to geojson-editor/src/components/features/Drawer.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { MeasureManager } from '../../../packages/maplugin-core';
+import { MeasureManager } from '../../../../packages/maplugin-core';
 
 const props = defineProps<{
     measureManager: MeasureManager

geojson-editor/components/features/FeatureCollectionEditor.vue renamed to geojson-editor/src/components/features/FeatureCollectionEditor.vue

@@ -0,0 +1,12 @@
+<template>
+    <ToggleButton content="编辑器" :defaultActive="StoreEditor.show.value" :onChange="v => StoreEditor.showEditor(v)">
+    </ToggleButton>
+</template>
+
+<script setup lang="ts">
+import ToggleButton from '../base/ToggleButton.vue';
+import { StoreEditor } from '../../stores/index';
+
+</script>
+
+<style scoped></style>

geojson-editor/components/features/Measurer.vue renamed to geojson-editor/src/components/features/Measurer.vue

@@ -0,0 +1 @@
+export * from './store-editor';

geojson-editor/src/components/features/ShowEditorButton.vue

@@ -0,0 +1,17 @@
+import { computed, ref } from "vue";
+
+export namespace StoreEditor {
+    const _show = ref(false);
+
+    export function toggle() {
+        _show.value = !_show.value;
+    }
+
+    export function showEditor(value: boolean) {
+        _show.value = value;
+    }
+
+    export const show = computed(() => {
+        return _show.value;
+    })
+}