feat: 优化图片的显示效果 (#1282)

* feat: 优化栅格瓦片的显示效果

* style: lint style

* style: lint style

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/features/point/image.md

@@ -0,0 +1,2 @@
+### 图片图层
+<code src="./image.tsx"></code>

dev-demos/features/point/image.tsx

@@ -0,0 +1,45 @@
+import { PointLayer, ImageLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+            id: 'map',
+            pickBufferScale: 1.0,
+            map: new GaodeMap({
+                center: [121.268, 30.3628],
+                pitch: 0,
+                style: 'normal',
+                zoom: 10,
+            }),
+        });
+
+        const layer = new ImageLayer({});
+        layer.source(
+        //   'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+        // 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0TVXSbkyKvsAAAAAAAAAAAAAARQnAQ',
+        'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4k6vT6rUsk4AAAAAAAAAAAAAARQnAQ',
+          {
+            parser: {
+              type: 'image',
+              extent: [121.168, 30.2828, 121.384, 30.4219],
+            },
+          },
+        );
+       
+
+        scene.on('loaded', () => {
+            scene.addLayer(layer);
+        })
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}

dev-demos/features/point/tile.md

@@ -0,0 +1,2 @@
+### Raster Tile
+<code src="./tile.tsx"></code>

dev-demos/features/point/tile.tsx

@@ -0,0 +1,50 @@
+import { PointLayer, ImageLayer, Scene, RasterLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+            id: 'map',
+            pickBufferScale: 1.0,
+            map: new GaodeMap({
+                center: [121.268, 30.3628],
+                pitch: 0,
+                style: 'blank',
+                zoom: 10,
+            }),
+        });
+
+       
+        const layerTile = new RasterLayer({
+            zIndex: 1,
+          });
+          layerTile.source(
+              '//t3.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f1f2021a42d110057042177cd22d856f',
+              {
+                parser: {
+                  type: 'rasterTile',
+                  tileSize: 256,
+                //   zoomOffset: 0
+                zoomOffset: 1
+                }
+              }
+          )
+          
+          
+       
+
+        scene.on('loaded', () => {
+            scene.addLayer(layerTile);
+        })
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}

packages/layers/src/core/interface.ts

@@ -28,7 +28,7 @@ export enum TextureBlend {
  * 基础图层类型定义
  */
 export interface IBaseLayerStyleOptions {
-  opacity: styleSingle;
+  opacity?: number;
 
   depth?: boolean; // 是否开启深度检测
   blend?: string; // 混合方式

packages/layers/src/image/models/image.ts

@@ -18,7 +18,7 @@ export default class ImageModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
     return {
-      u_opacity: (opacity as number) || 1,
+      u_opacity: opacity || 1,
       u_texture: this.texture,
     };
   }
@@ -59,6 +59,8 @@ export default class ImageModel extends BaseModel {
             data: imageData[0],
             width: imageData[0].width,
             height: imageData[0].height,
+            mag: gl.LINEAR,
+            min: gl.LINEAR,
           });
           this.layerService.updateLayerRenderList();
           this.layerService.renderLayers();
@@ -73,6 +75,10 @@ export default class ImageModel extends BaseModel {
         fragmentShader: ImageFrag,
         triangulation: RasterImageTriangulation,
         primitive: gl.TRIANGLES,
+        blend: {
+          // Tip: 优化显示效果
+          enable: false,
+        },
         depth: { enable: false },
         stencil: getMask(mask, maskInside),
       })

packages/renderer/package.json

@@ -31,7 +31,6 @@
     "@antv/l7-core": "2.9.23",
     "@antv/l7-utils": "2.9.23",
     "@babel/runtime": "^7.7.7",
-    "gl": "^4.4.0",
     "inversify": "^5.0.1",
     "l7regl": "^0.0.20",
     "lodash": "^4.17.15",