fix(popup): update popup event

packages/component/src/popup.ts

@@ -208,11 +208,10 @@ export default class Popup extends EventEmitter implements IPopup {
           .split(' ')
           .forEach((name) => this.container.classList.add(name));
       }
-      this.container.addEventListener('mousedown', (e) => {
-        e.stopPropagation();
-      });
-      this.container.addEventListener('click', (e) => {
-        e.stopPropagation();
+      ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
+        this.container.addEventListener(type, (e) => {
+          e.stopPropagation();
+        });
       });
     }
     if (maxWidth && this.container.style.maxWidth !== maxWidth) {

packages/maps/src/mapbox/map.ts

@@ -27,6 +27,7 @@ import mapboxgl, { IControl, Map } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { IMapboxInstance } from '../../typings/index';
 import Viewport from './Viewport';
+window.mapboxgl = mapboxgl;
 const EventMap: {
   [key: string]: any;
 } = {
@@ -239,10 +240,11 @@ export default class MapboxService
     lnglat: [number, number],
     altitude: number,
   ): IMercator {
-    const { x = 0, y = 0, z = 0 } = mapboxgl.MercatorCoordinate.fromLngLat(
-      lnglat,
-      altitude,
-    );
+    const {
+      x = 0,
+      y = 0,
+      z = 0,
+    } = window.mapboxgl.MercatorCoordinate.fromLngLat(lnglat, altitude);
     return { x, y, z };
   }
   public getModelMatrix(
@@ -252,7 +254,7 @@ export default class MapboxService
     scale: [number, number, number] = [1, 1, 1],
     origin: IMercator = { x: 0, y: 0, z: 0 },
   ): number[] {
-    const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
+    const modelAsMercatorCoordinate = window.mapboxgl.MercatorCoordinate.fromLngLat(
       lnglat,
       altitude,
     );
@@ -302,7 +304,7 @@ export default class MapboxService
      */
 
     // 判断全局 mapboxgl 对象的加载
-    if (!mapInstance && !mapboxgl) {
+    if (!mapInstance && !window.mapboxgl) {
       // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
       this.logger.error(this.configService.getSceneWarninfo('SDK'));
     }
@@ -310,16 +312,16 @@ export default class MapboxService
     if (
       token === MAPBOX_API_KEY &&
       style !== 'blank' &&
-      !mapboxgl.accessToken &&
+      !window.mapboxgl.accessToken &&
       !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。
     ) {
       this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
     }
 
     // 判断是否设置了 accessToken
-    if (!mapInstance && !mapboxgl.accessToken) {
+    if (!mapInstance && !window.mapboxgl.accessToken) {
       // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
-      mapboxgl.accessToken = token;
+      window.mapboxgl.accessToken = token;
     }
 
     if (mapInstance) {
@@ -329,7 +331,7 @@ export default class MapboxService
     } else {
       this.$mapContainer = this.creatAmapContainer(id);
       // @ts-ignore
-      this.map = new mapboxgl.Map({
+      this.map = new window.mapboxgl.Map({
         container: this.$mapContainer,
         style: this.getMapStyle(style),
         attributionControl,

stories/District/Layer/country_city.tsx

@@ -20,7 +20,7 @@ export default class Country extends React.Component {
         style: 'blank',
         zoom: 3,
         minZoom: 3,
-        maxZoom: 6,
+        maxZoom: 10,
       }),
     });
     scene.on('loaded', () => {
@@ -35,13 +35,7 @@ export default class Country extends React.Component {
         fill: {
           color: {
             field: 'NAME_CHN',
-            values: [
-              '#D92568',
-              '#E3507E',
-              '#FC7AAB',
-              '#F1D3E5',
-              '#F2EEFF'
-            ],
+            values: ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#F2EEFF'],
           },
         },
         popup: {

stories/Layers/components/Polygon3D.tsx

@@ -40,7 +40,7 @@ export default class Polygon3D extends React.Component {
     const layer = new PolygonLayer({})
       .source(await response.json())
       .shape('extrude')
-      .size('h20', [100, 120, 160, 200, 260, 500])
+      .size('h20', [10, 12, 16, 20, 26, 50])
       .active({ color: 'blue' })
       .color('h20', [
         '#816CAD',

stories/Layers/components/polygon.tsx

@@ -114,7 +114,7 @@ export default class TextLayerDemo extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
         style: 'blank',
@@ -127,10 +127,11 @@ export default class TextLayerDemo extends React.Component {
           type: 'FeatureCollection',
           features: [],
         })
-        .shape('fill')
+        .shape('extrude')
         .scale('childrenNum', {
           type: 'quantile',
         })
+        .size('childrenNum', [10, 100000000])
         // .color('red')
         .color('childrenNum', [
           '#D92568',

stories/Source/components/multiPolygon.tsx

@@ -1,5 +1,5 @@
 import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 function convertRGB2Hex(rgb: number[]) {
@@ -27,17 +27,57 @@ export default class MultiPolygon extends React.Component {
       map: new GaodeMap({
         pitch: 0,
         style: 'dark',
-        center: [121.775374, 31.31067],
-        zoom: 5,
+        center: [118.70796203613281, 31.84956532831343],
+        zoom: 12,
       }),
     });
     const data = await response.json();
     // console.log(data.features[5]);
     // data.features = data.features.slice(6);
-    const layer = new LineLayer()
-      .source(data)
-      .shape('line')
-      .size(1)
+    const layer = new PolygonLayer()
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [118.70796203613281, 31.84956532831343],
+                  [118.67019653320312, 31.783049527817784],
+                  [118.70384216308594, 31.757947795369688],
+                  [118.7944793701172, 31.79647323968844],
+                  [118.78829956054686, 31.85073184447357],
+                  [118.70796203613281, 31.84956532831343],
+                ],
+              ],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [116.96044921875, 29.38217507514529],
+                  [114.41162109375, 30.315987718557867],
+                  [114.78515624999999, 28.43971381702788],
+                  [114.93896484374999, 27.0982539061379],
+                  [116.98242187499999, 27.01998400798257],
+                  [119.20166015625, 28.091366281406945],
+                  [119.17968749999999, 29.38217507514529],
+                  [116.96044921875, 29.38217507514529],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('extrude')
+      .size(10)
       .color('red')
       .style({
         opacity: 1.0,