feat: Mapbox 地图新增 turf 处理空间数据示例

package.json

@@ -81,6 +81,7 @@
         "@dcloudio/uni-quickapp-webview": "3.0.0-4020920240930001",
         "@dcloudio/uni-ui": "^1.5.6",
         "@faker-js/faker": "^8.4.1",
+        "@turf/turf": "^7.1.0",
         "@vue/runtime-core": "3.4.21",
         "@vueuse/core": "^10.11.1",
         "@vueuse/shared": "^11.1.0",
@@ -111,10 +112,10 @@
         "@dcloudio/uni-stacktracey": "3.0.0-4020920240930001",
         "@dcloudio/uni-uts-v1": "3.0.0-4020920240930001",
         "@dcloudio/vite-plugin-uni": "3.0.0-4020920240930001",
-        "@iconify/json": "^2.2.262",
+        "@iconify/json": "^2.2.263",
         "@types/crypto-js": "^4.2.2",
         "@types/lodash-es": "^4.17.12",
-        "@types/node": "^20.16.13",
+        "@types/node": "^20.17.0",
         "@types/qs": "^6.9.16",
         "@types/stompjs": "^2.3.9",
         "@types/urijs": "^1.19.25",
@@ -145,7 +146,7 @@
         "postcss-less": "^6.0.0",
         "prettier": "^3.3.3",
         "rimraf": "^6.0.1",
-        "sass": "^1.80.3",
+        "sass": "^1.80.4",
         "sort-package-json": "^2.10.1",
         "stylelint": "^16.10.0",
         "stylelint-config-html": "^1.1.0",
@@ -157,7 +158,7 @@
         "unocss-preset-weapp": "^0.58.8",
         "unplugin-auto-import": "^0.17.8",
         "unplugin-vue-components": "^0.27.4",
-        "vite": "^5.4.9",
+        "vite": "^5.4.10",
         "vue-eslint-parser": "^9.4.3"
     },
     "engines": {

src/pages/example/mapbox/index.vue

 <script setup lang="ts">
+    import * as turf from '@turf/turf'
     import type { Page } from './config'
     import { DEFAULT_MAP_CENTER } from '@/components/Map/Mapbox'
-    import { addDefaultGeoJSONSource, addDefaultSymbolLayer, useMapbox } from '@/components/Map/Mapbox/hook'
+    import {
+        addDefaultGeoJSONSource,
+        addDefaultSplotLayer,
+        addDefaultSymbolLayer,
+        useMapbox,
+    } from '@/components/Map/Mapbox/hook'
 
     // 页面参数
     const page = reactive<Page>({
@@ -19,25 +25,32 @@
         onLoaded: (data) => {
             console.log('✨✨✨ Map Loaded', data)
 
-            // 添加数值数据源
-            addDefaultGeoJSONSource(map, `${page.id}-text`, [
-                {
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [data.center.lng, data.center.lat],
-                    },
-                    properties: {
-                        title: 'Hello',
-                        description: 'World',
-                    },
-                },
-            ])
-            // 添加数值图层
+            // 添加一个坐标点
+            const point = turf.point([113.063841, 27.733286], {
+                title: 'Hello',
+                description: 'World',
+                popup: '<div class="popup-row">🙂👋</div>',
+            })
+            addDefaultGeoJSONSource(map, `${page.id}-text`, [point])
             addDefaultSymbolLayer(map, `${page.id}-text`, {
                 layout: {
                     'text-field': '{title} {description}',
                 },
+                paint: {
+                    'text-halo-width': 2,
+                },
+            })
+
+            // 添加坐标点 50 公里范围的圆圈
+            const circle = turf.circle(point, 50, {
+                properties: null,
+            })
+            addDefaultGeoJSONSource(map, `${page.id}-splot`, [circle])
+            addDefaultSplotLayer(map, `${page.id}-splot`, {
+                paint: {
+                    'fill-color': 'hsl(209, 83%, 79%)',
+                    'fill-opacity': 0.5,
+                },
             })
         },
         onSourceRequestHandle: () => {

types/components.d.ts

@@ -149,6 +149,8 @@ declare module 'vue' {
     Icon: typeof import('./../src/components/Icon/index.vue')['default']
     Legend: typeof import('./../src/components/Map/Widgets/Legend/src/Legend.vue')['default']
     Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     Src: typeof import('./../src/components/Echarts/src/index.vue')['default']
     Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
     ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']