fix: safari 浏览器文本显示问题

packages/core/src/services/asset/FontService.ts

@@ -177,11 +177,10 @@ export default class FontService implements IFontService {
 
     // 2. update canvas
     // copy old canvas data to new canvas only when height changed
-    if (canvas.height !== canvasHeight) {
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      canvas.height = canvasHeight;
-      ctx.putImageData(imageData, 0, 0);
-    }
+    // TODO safari 不能正常更新
+    const copyImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    canvas.height = canvasHeight;
+    ctx.putImageData(copyImageData, 0, 0);
     setTextStyle(ctx, fontFamily, fontSize, fontWeight);
 
     // 3. layout characters
@@ -197,7 +196,6 @@ export default class FontService implements IFontService {
       // used to store distance values from tinySDF
       // tinySDF.size equals `fontSize + buffer * 2`
       const imageData = ctx.getImageData(0, 0, tinySDF.size, tinySDF.size);
-
       for (const char of characterSet) {
         populateAlphaChannel(tinySDF.draw(char), imageData);
         // 考虑到描边，需要保留 sdf 的 buffer，不能像 deck.gl 一样直接减去

stories/District/Layer/drillDown.tsx

@@ -29,6 +29,9 @@ export default class Country extends React.Component {
     });
     scene.on('loaded', () => {
       this.scene = scene;
+      // @ts-ignore
+      window.scene = scene;
+      console.log(scene);
       this.drillDown = new DrillDownLayer(scene, {
         drillDepth: 2,
         geoDataLevel: 2,
@@ -67,6 +70,9 @@ export default class Country extends React.Component {
             ],
           },
         },
+        drillDownEvent:()=>{
+          console.log(scene);
+        },
         popup: {
           enable: true,
           Html: (props) => {
@@ -75,6 +81,7 @@ export default class Country extends React.Component {
         },
       });
     });
+
   }
 
   public render() {

stories/React/components/Scene.tsx

@@ -1,10 +1,11 @@
 import {
   AMapScene,
   LayerContext,
+  LayerEvent,
   LineLayer,
-  PolygonLayer,
   MapboxScene,
   Marker,
+  PolygonLayer,
   Popup,
   SceneContext,
   SceneEvent,
@@ -23,7 +24,8 @@ export default React.memo(function Map() {
     };
     fetchData();
   }, []);
-  const popupClick = () => {
+  const popupClick = (e: any) => {
+    e.stopPropagation();
     alert('11333');
   };
   return (
@@ -46,6 +48,7 @@ export default React.memo(function Map() {
         <Popup
           option={{
             closeOnClick: false,
+            stopPropagation: false,
           }}
           lnglat={[110.1938, 30.25] as number[]}
         >
@@ -63,7 +66,15 @@ export default React.memo(function Map() {
             values: 1,
           }}
           color={{
-            values: '#fff',
+            field:'name',
+            values: [
+              '#2E8AE6',
+              '#69D1AB',
+              '#DAF291',
+              '#FFD591',
+              '#FF7A45',
+              '#CF1D49',
+            ],
           }}
           shape={{
             values: 'fill',
@@ -72,12 +83,12 @@ export default React.memo(function Map() {
             opacity: 1,
           }}
         >
-          <LayerContext.Consumer>
-            {(layer) => {
-              console.log(layer);
-              return null;
+          <LayerEvent
+            type="click"
+            handler={(e) => {
+              console.log(e);
             }}
-          </LayerContext.Consumer>
+          />
         </PolygonLayer>
       </AMapScene>
     </>