更新地图，叠加图标展示

src/utils/mapConfig.ts

@@ -33,15 +33,55 @@ export function init(config: any) {
   scene = new Scene({
     id: 'mapDiv',
     map: new Mapbox({
-      center: [118.83, 28.85],
-      zoom: 4,
-      maxZoom: 9,
-      minZoom: 4,
-      pitch: 40, // 地图倾斜度
+      center: [120.83, 31.05],
+      zoom: 9,
+      maxZoom: 10,
+      minZoom: 5,
+      pitch: 90, // 地图倾斜度
       style: 'blank'
     })
   })
 
+  scene.on('loaded', () => {
+    loadedStatus = true
+    loadBaseLayer()
+    // 加载图片
+    if (config && config.images && config.images.length > 0) {
+      loadImage(config.images)
+    }
+
+    setTimeout(function() {
+
+      const map = scene.map
+      const startZoom = 6.5
+      const endZoom = 9
+      const duration = 6000 // 动画持续时间，单位毫秒
+      const interval = 100 // 每次更新间隔，单位毫秒
+      const step = (endZoom - startZoom) * (interval / duration)
+      const zoomAnimation = setInterval(() => {
+        const currentZoom = map.getZoom()
+        if (currentZoom <= startZoom) {
+          clearInterval(zoomAnimation)
+          map.setZoom(startZoom)
+        } else {
+          const newZoom = currentZoom - step
+          map.setZoom(newZoom)
+        }
+      }, interval)
+    }, 9000)
+
+  })
+
+  // 地图平移时触发事件
+  scene.on('mapmove', () => {
+    console.log('中心点：', scene.getCenter().lng, scene.getCenter().lat, scene.getZoom(), scene.getPitch())
+  })
+}
+
+/**
+ * 加载底图
+ */
+function loadBaseLayer() {
   // //添加太湖流域地图
   const thMap = new PolygonLayer({})
     .source(thData)      //使用的数据为下载到本地的json数据
@@ -82,47 +122,6 @@ export function init(config: any) {
   scene.addLayer(layerBoundary)
 
   scene.addLayer(thMap)
-
-  scene.on('loaded', () => {
-    loadedStatus = true
-    loadBaseLayer()
-    // 加载图片
-    if (config && config.images && config.images.length > 0) {
-      loadImage(config.images)
-    }
-    setTimeout(function() {
-
-      const map = scene.map
-      const startZoom = 4
-      const endZoom = 9
-      const duration = 5000 // 动画持续时间，单位毫秒
-      const interval = 80 // 每次更新间隔，单位毫秒
-      const step = (endZoom - startZoom) * (interval / duration)
-      scene.setCenter([120.83, 31.05])
-      const zoomAnimation = setInterval(() => {
-        const currentZoom = map.getZoom()
-        if (currentZoom >= endZoom) {
-          clearInterval(zoomAnimation)
-          map.setZoom(endZoom)
-        } else {
-          const newZoom = currentZoom + step
-          map.setZoom(newZoom)
-        }
-      }, interval)
-    }, 8000)
-
-  })
-
-  // 地图平移时触发事件
-  scene.on('mapmove', () => {
-    console.log('中心点：', scene.getCenter().lng, scene.getCenter().lat, scene.getZoom(), scene.getPitch())
-  })
-}
-
-/**
- * 加载底图
- */
-function loadBaseLayer() {
   setMark(lakeData)
 }
 
@@ -190,8 +189,9 @@ function createPointByCongfig(config: any) {
   const layer = new PointLayer({})
     .source(config.data, config.dataOptions)
     .size(config.size)
-    .active(config.emphasis.show)
-  setLayerShape(layer, config.shape)
+    .active(config.emphasis.show).shape('triangleColumn')
+    .color('#3ae33d')
+  // setLayerShape(layer, config.shape)
   // 颜色配置
   // setLayerColor(layer, config.color);
   scene.addLayer(layer)