update

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -17,6 +17,7 @@ import FeatureCollectionEditor from './components/features/FeatureCollectionEdit
 import ShowEditorButton from './components/features/ShowEditorButton.vue';
 import Data from './components/features/Data/Data.vue';
 import ToggleButton from './components/base/ToggleButton.vue';
+import DataDetail from './components/features/DataDetail.vue';
 
 import { DrawManager, GeoJSONLayerManager, MeasureManager, TIdentityGeoJSONFeature, MiddleButtonRoate, VertexEditor, useCamera } from '../../packages/maplugin-maplibre';
 import { StoreEditor } from './stores';
@@ -68,7 +69,42 @@ function handleMapLoaded(map: maplibregl.Map) {
     // 中键旋转
     new MiddleButtonRoate(map);
 
-    const glManager = new GeoJSONLayerManager(map, new Array<TIdentityGeoJSONFeature>());
+    const glManager = new GeoJSONLayerManager<TIdentityGeoJSONFeature>(map, [
+        {
+            "type": "Feature",
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [
+                    [
+                        [
+                            121.20015593197513,
+                            31.646326873778108
+                        ],
+                        [
+                            121.21262716876038,
+                            31.636886722815902
+                        ],
+                        [
+                            121.22128404677903,
+                            31.644328677177043
+                        ],
+                        [
+                            121.20797723212729,
+                            31.654153282119196
+                        ],
+                        [
+                            121.20015593197513,
+                            31.646326873778108
+                        ]
+                    ]
+                ]
+            },
+            "properties": {
+                "id": "09cd7939-9a47-4318-aeeb-64b8f2ed7ff4"
+            }
+        }
+    ]);
+
     glManager.on('all', () => {
         fc.value = glManager.fc;
     });
@@ -96,21 +132,32 @@ function handleMapLoaded(map: maplibregl.Map) {
         drawManager.id_layer_line,
         drawManager.id_layer_line_circle,
         drawManager.id_layer_point,
-        drawManager.id_layer_point_symbol], ({ features , lngLat}) => {
+        drawManager.id_layer_point_symbol], ({ features, lngLat }) => {
             if (drawManager.drawing || !features || features.length === 0) return;
             const f = glManager.query((features[0].properties as any)['id']);
             if (f) {
-                // glManager.setFeatureHidden(f.properties.id);
-
-                // vertexEditor.setFeature(f, (id, g) => {
-                //     glManager.clearFeatureHidden(id);
-
-                //     const featrue = glManager.query(id)!;
-                //     featrue.geometry = g;
-                //     glManager.update(featrue);
-                // });
-
-                createMapPopup(map, lngLat, ToggleButton, {content:"123", defaultActive: false});
+                const popup = createMapPopup(map, lngLat, DataDetail, {
+                    featrue: f,
+                    onDelete() {
+                        glManager.delete(f);
+                        popup.remove();
+                    },
+                    onEdit() {
+                        glManager.setFeatureHidden(f.properties.id);
+
+                        vertexEditor.setFeature(f, (id, g) => {
+                            glManager.clearFeatureHidden(id);
+
+                            const featrue = glManager.query(id)!;
+                            featrue.geometry = g;
+                            glManager.update(featrue);
+                        });
+                        popup.remove();
+                    },
+                    onCopy() {
+                        popup.remove();
+                    }
+                });
             }
         });
 

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

@@ -0,0 +1,52 @@
+<template>
+    <div class="detail">
+        <div class="detail-data"></div>
+        <div class="detail-action">
+            <div class="detail-action-delete" @click="onDelete">删除</div>
+            <div class="detail-action-edit" @click="onEdit">修改</div>
+            <div class="detail-action-copy" @click="onCopy">复制</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    onDelete():void,
+    onEdit():void
+    onCopy():void,
+    feature: GeoJSON.Feature
+}>();
+
+
+</script>
+
+<style scoped>
+.detail {
+    width: 200px;
+    background-color: var(--color-bg);
+}
+
+.detail-data {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.detail-action {
+    display: flex;
+}
+
+.detail-action>div {
+    cursor: pointer;
+    flex: 1;
+    text-align: center;
+    border: 1px solid #ccc;
+}
+
+.detail-action>div:hover {
+    background-color: var(--color-hover);
+}
+
+.detail-action-delete {
+    color: #f00;
+}
+</style>

geojson-editor/src/utils/map-ui.ts

@@ -1,4 +1,5 @@
 import { Component, createApp } from "vue";
+import {Popup} from '../../../packages/maplugin-maplibre/demo/wapper';
 
 export function createMapControl(map: maplibregl.Map, component: Component, data?: Record<string, unknown>, position: maplibregl.ControlPosition | "top-center" | "bottom-center" = 'top-right') {
     const div = document.createElement('div');
@@ -29,14 +30,12 @@ export function createMapControl(map: maplibregl.Map, component: Component, data
 
 export function createMapPopup(map: maplibregl.Map, position: maplibregl.LngLatLike, component: Component, data?: Record<string, unknown>) {
     const div = document.createElement('div');
-    div.classList.add("maplibregl-popup");
     createApp(component, data).mount(div);
 
-    // @ts-ignore
-    const popup = new maplibregl.Popup()
+    const popup = new Popup({})
         .setDOMContent(div)
         .setLngLat(position)
         .addTo(map);
 
-    return
+    return popup;
 }

packages/maplugin-maplibre/demo/wapper.ts

@@ -0,0 +1,5 @@
+import {Popup} from 'maplibre-gl';
+
+export {
+    Popup
+};