Feat tdtmap (#2256)

* fix: fillImage中uniform没对齐的bug * feat: 适配天地图的底图 * chore: 修改天地图map中lngLatToCoord的方法实现 * feat: 添加天地图的markerContainer,但是不能更新其定位 * fix: marker和popup在地图拖动时不跟随的bug * feat: 图层显隐组件 LayerSwitch 新增单选模式 (#2211) * feat: layerSwitch组件新增单选属性 * chore: 更新markdown路径 * feat: layerSwitch组件添加单选模式 * chore: 恢复setting配置 * chore: 删除调试代码 --------- Co-authored-by: 谨欣 <[email protected]> * Fix raster webgl1 (#2213) * chore: g-device version & dev command * fix: raster g.LUMINANCE 回滚到webgl1 * chore: publish (#2214) * fix: single component data texture (#2215) * fix: 修复图层显隐控件LayerSwitch单选模式下未默认展示单个图层问题 (#2218) * fix: 修复图层显隐控件LayerSwitch单选模式下未默认展示单个图层问题 * feat: 图层显隐控件选择模式更新时，销毁图层内容重建 * chore: 修复空格 * chore: 新增todo * feat: 修改单选模式只显示第一个图层逻辑到onAdd函数中 --------- Co-authored-by: 谨欣 <[email protected]> * chore: multiband rgb raster parse (#2219) * chore: multiband rgb raster parse * fix: 单测 * chore: publish (#2220) * fix: 修复配置更新时，处理单选模式图层问题 (#2221) Co-authored-by: 谨欣 <[email protected]> * Update site&新增 raster ndi 计算 (#2222) * feat: 添加归一化指数 parse * chore: 更新文档 * Fix encode update (#2229) * fix: encode update * fix: encode update * chore: publish (#2230) * fix: 修复图层隐藏时，LayerPopup 未跟随隐藏的问题 (#2231) * chore: publish (#2232) * fix: 修正L7Plot官网图表示例按钮跳转链接 (#2233) * fix: 修复配置更新时，处理单选模式图层问题 * feat: 修改函数名 * fix: 修正L7Plot官网图表示例按钮跳转链接 --------- Co-authored-by: 谨欣 <[email protected]> * chore: publish (#2235) * Migrate tile layer (#2236) * fix: 修复栅格瓦片显示 * fix: 修复冲突 * chore: renderer ts 定义 * docs: add 矢量瓦片demo * fix: clear depth & stencil before rende mask * chore: update tile snapshot * chore: update tile vector snapshot --------- Co-authored-by: yuqi.pyq <[email protected]> * chore: add threejs demo (#2245) * chore: add threejs demo * docs: add screenshot url --------- Co-authored-by: zhnny <[email protected]> * 支持 WebGPU 渲染 (#2225) * fix: webgpu point fill example * fix: adjust order of varying in fill image shader * fix: remove redundant varying in extrude vert shader * fix: recreate main & depth rt when resizing * fix: load image in webgpu * fix: heatmap * fix: heatmap grid3d in webgpu * fix: heatmap grid3d in webgpu * fix: line * fix: change readpixel from sync to async * fix: resize picking fbo * fix: picking in webgpu * fix: arc line layer * fix: use diagnosticDerivativeUniformity in water demo * fix: add render cache * fix: point text layer * chore: update point text layer snapshot * fix: raster layer * chore: add screenshot callback on test cases * chore: sleep * chore: cancel point image test case for now * fix: 合并冲突 * fix: fillImage中uniform没对齐的bug * chore: 天地图导出类型 * feat: wms 支持 url service * feat: tdt fit bounds * docs: 补充 polygon linear demo --------- Co-authored-by: huyang <[email protected]> Co-authored-by: Dreammy23 <[email protected]> Co-authored-by: 谨欣 <[email protected]> Co-authored-by: xiaoiver <[email protected]> Co-authored-by: heiyexing <[email protected]> Co-authored-by: zhnny <[email protected]> Co-authored-by: zhnny <[email protected]>
antvis · Jan 16, 2024 · d0c09f0 · d0c09f0
1 parent 183ae17
commit d0c09f0
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 15 deletions.
diff --git a/packages/maps/src/tdtmap/map.ts b/packages/maps/src/tdtmap/map.ts
@@ -328,14 +328,6 @@ export default class TdtMapService extends BaseMapService<any> {
     return 0;
   }
 
-  public getBounds(): Bounds {
-    const ne = this.map.getBounds().getNorthEast();
-    const sw = this.map.getBounds().getSouthWest();
-    return [
-      [sw.lng, sw.lat],
-      [ne.lng, ne.lat],
-    ];
-  }
 
   public setRotation(rotation: number): void {
     this.map.setBearing(360);
@@ -363,8 +355,7 @@ export default class TdtMapService extends BaseMapService<any> {
   public fitBounds(bound: Bounds, fitBoundsOptions?: any): void {
     const [sw, ne] = bound;
     // @ts-ignore
-    const bounds = new window.T.LngLatBounds(sw, ne);
-    this.map.setMaxBounds(bounds);
+    this.map.setViewport([new window.T.LngLat(sw[0],sw[1]),new window.T.LngLat(ne[0],ne[1])]);
   }
 
   public setMaxZoom(max: number): void {
@@ -457,6 +448,17 @@ export default class TdtMapService extends BaseMapService<any> {
     );
   }
 
+  public getBounds(): Bounds {
+    const latlngBound = this.map.getBounds();
+
+    const sw = latlngBound.getSouthWest(),
+      ne = latlngBound.getNorthEast();
+    return [
+      [sw.lng, sw.lat],
+      [ne.lng, ne.lat],
+    ];
+  }
+
   public lngLatToMercator(
     lnglat: [number, number],
     altitude: number,

diff --git a/packages/site/docs/tutorial/polygon/fill.en.md b/packages/site/docs/tutorial/polygon/fill.en.md
@@ -90,11 +90,11 @@ style({ opacity Linear: { enable: true, // true - false dir: 'in', // n - out },
 });
 ```
 
-[radial gradient in](/examples/polygon/fill#china_linear_in)
+[radial gradient in](/examples/polygon/fill#linear_in)
 
 <img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*XjT5T4cT_CYAAAAAAAAAAAAAARQnAQ">
 
-[radial gradient out](/examples/polygon/fill#china_linear_out)
+[radial gradient out](/examples/polygon/fill#linear_out)
 
 <img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
 

diff --git a/packages/site/docs/tutorial/polygon/fill.zh.md b/packages/site/docs/tutorial/polygon/fill.zh.md
@@ -94,11 +94,11 @@ style({
 });
 ```
 
-[径向渐变 in](/examples/polygon/fill#china_linear_in)
+[径向渐变 in](/examples/polygon//fill/#linear_in)
 
 <img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*XjT5T4cT_CYAAAAAAAAAAAAAARQnAQ">
 
-[径向渐变 out](/examples/polygon/fill#china_linear_out)
+[径向渐变 out](/examples/polygon/fill#linear_out)
 
 <img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
 

diff --git a/packages/site/examples/map/map/demo/meta.json b/packages/site/examples/map/map/demo/meta.json
@@ -49,6 +49,12 @@
       "title": "MapLibre 地图",
       "new": true,
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tTFVRbgUdfMAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "tianditu.js",
+      "title": "天地图",
+      "new": true,
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*10TuSJ9OF7EAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/packages/site/examples/map/map/demo/tianditu.js b/packages/site/examples/map/map/demo/tianditu.js
@@ -0,0 +1,54 @@
+import { Scene,PointLayer } from '@antv/l7';
+import { TMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  logoPosition: 'bottomright',
+  map: new TMap({
+
+    center: [ 107.054293, 35.246265 ],
+    zoom: 5,
+  })
+});
+  scene.on('loaded', () => {
+    // fetch('https://tile0.tianditu.gov.cn/vts?t=vt&pk=agjda&tk=75f0434f240669f4a2df6359275146d2&v=1.0').then((res) => { 
+    //     res.arrayBuffer().then((arrayBuffer) => {  
+    //         console.log(arrayBuffer);
+    //     });  
+    //  });
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+    )
+      .then(res => res.json())
+      .then(data => {
+        const pointLayer = new PointLayer({
+            autoFit: true   
+        })
+          .source(data, {
+            parser: {
+              type: 'json',
+              x: 'longitude',
+              y: 'latitude'
+            }
+          })
+          .shape('name', [
+            'circle',
+            'triangle',
+            'square',
+            'pentagon',
+            'hexagon',
+            'octogon',
+            'hexagram',
+            'rhombus',
+            'vesica'
+          ])
+          .size('unit_price', [10, 25])
+          .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
+          .style({
+            opacity: 1,
+            strokeWidth: 2
+          });
+        scene.addLayer(pointLayer);
+      });
+  });
+
diff --git a/packages/site/examples/polygon/fill/demo/linear_in.js b/packages/site/examples/polygon/fill/demo/linear_in.js
@@ -0,0 +1,60 @@
+import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    center: [ -96, 37.8 ],
+    zoom: 3
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
+      const layer = new PolygonLayer({})
+        .source(data)
+        .scale('density', {
+          type: 'quantile'
+        })
+        .color(
+          'density', color
+        )
+        .shape('fill')
+        .active(true)
+        .style({
+            opacityLinear: {
+                enable: true, // true - false
+                dir: 'in', // in - out
+              },
+        })
+        ;
+      const layer2 = new LineLayer({
+        zIndex: 2
+      })
+        .source(data)
+        .color('#fff')
+        .active(true)
+        .size(1)
+        .style({
+          lineType: 'dash',
+          dashArray: [ 2, 2 ],
+        });
+      scene.addLayer(layer);
+      scene.addLayer(layer2);
+
+      layer.on('mousemove', e => {
+        const popup = new Popup({
+          offsets: [ 0, 0 ],
+          closeButton: false
+        })
+          .setLnglat(e.lngLat)
+          .setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
+        scene.addPopup(popup);
+      });
+    });
+});
diff --git a/packages/site/examples/polygon/fill/demo/linear_out.js b/packages/site/examples/polygon/fill/demo/linear_out.js
@@ -0,0 +1,60 @@
+import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    center: [ -96, 37.8 ],
+    zoom: 3
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
+      const layer = new PolygonLayer({})
+        .source(data)
+        .scale('density', {
+          type: 'quantile'
+        })
+        .color(
+          'density', color
+        )
+        .shape('fill')
+        .active(true)
+        .style({
+            opacityLinear: {
+                enable: true, // true - false
+                dir: 'out', // in - out
+              },
+        })
+        ;
+      const layer2 = new LineLayer({
+        zIndex: 2
+      })
+        .source(data)
+        .color('#fff')
+        .active(true)
+        .size(1)
+        .style({
+          lineType: 'dash',
+          dashArray: [ 2, 2 ],
+        });
+      scene.addLayer(layer);
+      scene.addLayer(layer2);
+
+      layer.on('mousemove', e => {
+        const popup = new Popup({
+          offsets: [ 0, 0 ],
+          closeButton: false
+        })
+          .setLnglat(e.lngLat)
+          .setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
+        scene.addPopup(popup);
+      });
+    });
+});
diff --git a/packages/site/examples/polygon/fill/demo/meta.json b/packages/site/examples/polygon/fill/demo/meta.json
@@ -23,6 +23,16 @@
       "filename": "ocean.js",
       "title": "拟真水面",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*BiawTbtX-CYAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "linear_in.js",
+      "title": "径向渐变 in",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pGaoSLHoAnkAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "linear_out.js",
+      "title": "径向渐变 out",
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Yc7HQ7CVQ7wAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/packages/utils/src/tileset-manager/utils/tile-url.ts b/packages/utils/src/tileset-manager/utils/tile-url.ts
@@ -95,6 +95,8 @@ export function getWMTSURLFromTemplate(
     service = 'WMTS',
     tileMatrixset,
   } = properties;
-  const url = `${template}&SERVICE=${service}&REQUEST=GetTile&VERSION=${version}&LAYER=${layer}&STYLE=${style}&TILEMATRIXSET=${tileMatrixset}&FORMAT=${format}&TILECOL=${x}&TILEROW=${y}&TILEMATRIX=${z}`;
+  const urls = expandUrl(template);
+  const index = Math.abs(x + y) % urls.length;
+  const url = `${urls[index]}&SERVICE=${service}&REQUEST=GetTile&VERSION=${version}&LAYER=${layer}&STYLE=${style}&TILEMATRIXSET=${tileMatrixset}&FORMAT=${format}&TILECOL=${x}&TILEROW=${y}&TILEMATRIX=${z}`;
   return url;
 }