@gis_victory/gismap 2.0.0 → 2.0.1

package/README.md

@@ -94,6 +94,74 @@ const addMarker = () => {
 </script>
 ```
 
+### 3. 使用 MapSwitch 组件
+
+```vue
+<template>
+  <div style="width: 100vw; height: 100vh; position: relative;">
+    <!-- 地图容器 -->
+    <GisMapContainer
+      :center="[120, 30]"
+      :zoom="10"
+      :access-token="'your-mapbox-access-token'"
+    >
+      <!-- 地图切换组件 -->
+      <template #top-right>
+        <GisMapSwitch :data="mapSwitchData" />
+      </template>
+    </GisMapContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GisMapContainer, GisMapSwitch } from 'gismap';
+
+// 地图切换数据
+const mapSwitchData = ref({
+  // 底图图层
+  layers: [
+    {
+      name: 'tdt-vec',
+      label: '矢量底图',
+      checked: true,
+      iconName: 'Picture'
+    },
+    {
+      name: 'tdt-img',
+      label: '影像底图',
+      checked: false,
+      iconName: 'Camera'
+    },
+    {
+      name: 'custom-layer',
+      label: '自定义底图',
+      checked: false,
+      iconName: 'Map'
+    }
+  ],
+  // 叠加图层
+  extensions: [
+    {
+      name: 'tdt-cia',
+      label: '天地图注记',
+      checked: true
+    },
+    {
+      name: 'terrain',
+      label: '地形',
+      checked: false
+    },
+    {
+      name: 'custom-extension',
+      label: '自定义叠加层',
+      checked: false
+    }
+  ]
+});
+</script>
+```
+
 ## 核心功能
 
 ### 1. 图层管理