[WIP]chore: crs

dev-demos/features/crs/3857.md

@@ -0,0 +1,2 @@
+### Leaflet 3857
+<code src="./demos/3857.tsx"></code>

dev-demos/features/crs/3857_L7.md

@@ -0,0 +1,2 @@
+### L7 3857
+<code src="./demos/3857_L7.tsx"></code>

dev-demos/features/crs/4326.md

@@ -0,0 +1,2 @@
+### Leaflet 4326
+<code src="./demos/4326.tsx"></code>

dev-demos/features/crs/4326_L7.md

@@ -0,0 +1,2 @@
+### L7 4326
+<code src="./demos/4326_L7.tsx"></code>

dev-demos/features/crs/demos/3857.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import * as L from 'leaflet';
+import { RDBSource } from 'district-data';
+import 'leaflet/dist/leaflet.css';
+
+
+export default () => {
+  useEffect(() => {
+    const map = L.map('map', {
+		center: [123, 30],
+		zoom: 0
+	});
+  // 
+
+	L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles',{
+    subdomains:['1','2','3','4','5'],
+  }).addTo(map);
+  const source = new RDBSource({});
+    source.getData({ level: 'province' }).then((data) => {
+      const geojson = L.geoJson(data, {
+        style: {
+          weight: 2,
+          opacity: 1,
+          color: 'white',
+          dashArray: '3',
+          fillOpacity: 0.7,
+          fillColor: '#ff7800',
+        },
+      }).addTo(map);
+      map.fitBounds(geojson.getBounds());
+    });
+
+
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/crs/demos/3857_L7.tsx

@@ -0,0 +1,70 @@
+// @ts-ignore
+import { Scene, RasterLayer,PolygonLayer } from '@antv/l7';
+import { RDBSource } from 'district-data';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Map({
+          center: [123, 30],
+          zoom: 1,
+          crs:'EPSG:3857'
+      }),
+    });
+
+    const url =
+      'http://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles';
+
+
+
+    scene.on('loaded', () => {
+      const source = new RDBSource({});
+      const layer = new RasterLayer({
+        zIndex: 1,
+      }).source(url, {
+        parser: {
+          type: 'rasterTile',
+          tileSize: 256,
+        },
+      });
+    source.getData({ level: 'province' }).then((data) => {
+      const fill = new PolygonLayer({
+        autoFit: true,
+        zIndex: 2,
+      })
+        .source(data)
+        .shape('fill')
+        .color('name', [
+          '#a6cee3',
+          '#1f78b4',
+          '#b2df8a',
+          '#33a02c',
+          '#fb9a99',
+          '#e31a1c',
+          '#fdbf6f',
+          '#ff7f00',
+          '#cab2d6',
+          '#6a3d9a',
+          '#ffff99',
+          '#b15928',
+        ])
+        .active(false);
+      scene.addLayer(fill);
+      scene.addLayer(layer);
+    });
+  });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '60vh',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/crs/demos/4326.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import * as L from 'leaflet';
+import { RDBSource } from 'district-data';
+import 'leaflet/dist/leaflet.css';
+
+
+export default () => {
+  useEffect(() => {
+    const map = L.map('map', {
+    crs: L.CRS.EPSG4326,
+		center: [123, 30],
+		zoom: 0
+	});
+  // 
+
+
+	L.tileLayer('http://t{s}.tianditu.gov.cn/img_c/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles',{
+    subdomains:['1','2','3','4','5'],
+    zoomOffset:1,
+  }).addTo(map);
+  const source = new RDBSource({});
+    source.getData({ level: 'province' }).then((data) => {
+      const geojson = L.geoJson(data, {
+        style: {
+          weight: 2,
+          opacity: 1,
+          color: 'white',
+          dashArray: '3',
+          fillOpacity: 0.7,
+          fillColor: '#ff7800',
+        },
+      }).addTo(map);
+      // map.fitBounds(geojson.getBounds());
+    });
+
+
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/crs/demos/4326_L7.tsx

@@ -0,0 +1,70 @@
+// @ts-ignore
+import { Scene, RasterLayer,PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { RDBSource } from 'district-data';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Map({
+          center: [123, 30],
+          zoom: 0,
+          crs:'EPSG:4326'
+      }),
+    });
+
+    const url =
+      'http://t0.tianditu.gov.cn/img_c/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles';
+
+    const layer = new RasterLayer({
+      zIndex: 1,
+    }).source(url, {
+      parser: {
+        type: 'rasterTile',
+        tileSize: 256,
+        zoomOffset: 0,
+      },
+    });
+
+    scene.on('loaded', () => {
+      const source = new RDBSource({});
+      source.getData({ level: 'province' }).then((data) => {
+        const fill = new PolygonLayer({
+          autoFit: true,
+          zIndex: 2,
+        })
+          .source(data)
+          .shape('fill')
+          .color('name', [
+            '#a6cee3',
+            '#1f78b4',
+            '#b2df8a',
+            '#33a02c',
+            '#fb9a99',
+            '#e31a1c',
+            '#fdbf6f',
+            '#ff7f00',
+            '#cab2d6',
+            '#6a3d9a',
+            '#ffff99',
+            '#b15928',
+          ])
+          .active(false);
+        scene.addLayer(fill);
+        // scene.addLayer(layer);
+      });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '60vh',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/tile/Mask/demos/vector_raster.tsx

@@ -0,0 +1,84 @@
+// @ts-ignore
+import { Scene, RasterLayer, MaskLayer,Source,PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+
+      map: new Map({
+        center: [116.39852, 39.918255],
+        zoom: 9,
+      }),
+    });
+
+    const source = new Source(
+        'https://gridwise.alibaba-inc.com/tile/test?z={z}&x={x}&y={y}',
+        {
+          parser: {
+            type: 'mvt',
+            tileSize: 256,
+          },
+        },
+      );
+
+      const fillLayer = new PolygonLayer({
+        featureId: 'space_id',
+        zIndex: 3,
+        visible: false,
+        sourceLayer: 'default', // woods hillshade contour ecoregions ecoregions2 city
+      })
+        .source(source)
+        .shape('fill')
+        .scale('space_val', {
+          type: 'quantize',
+          domain: [0, 100],
+        })
+        .color('space_val', [
+          '#f2f0f7',
+          '#cbc9e2',
+          '#9e9ac8',
+          '#756bb1',
+          '#54278f',
+        ])
+        .style({
+          opacity: 0.1,
+        });
+
+
+
+    const layer = new RasterLayer({
+      zIndex: 2,
+      maskLayers:[fillLayer],
+      enableMask: true,
+    }).source(
+      'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
+      {
+        parser: {
+          type: 'rasterTile',
+          tileSize: 256,
+        },
+      },
+    ).style({
+      opacity:1
+    });
+
+    scene.on('loaded', () => {
+
+      scene.addLayer(layer);
+      scene.addLayer(fillLayer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '60vh',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/tile/Mask/vector_raster.md

@@ -0,0 +1,8 @@
+---
+group:
+  path: 'Mask'
+  title: 掩膜
+title: 矢量栅格瓦片
+order: 2
+---
+<code src="./demos/vector_raster.tsx"></code>

dev-demos/tile/Vector/demos/citytile.tsx

@@ -2,9 +2,15 @@
 import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import React, { useEffect } from 'react';
+import React, { useEffect,useState } from 'react';
 
 export default () => {
+ const [tileSource, setTileSource] = useState<Source>();
+ const onReload = ()=>{
+  tileSource.reloadAllTile();
+  // tileSource.reloadTilebyId(9,421,193)
+  // tileSource
+}
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
@@ -32,6 +38,7 @@ export default () => {
 
       },
     );
+    setTileSource(source)
 
     const layer = new PolygonLayer({
       featureId: 'space_id',
@@ -79,13 +86,16 @@ export default () => {
     });
   }, []);
   return (
+    <>
+    <button onClick={onReload}>reload</button>
     <div
       id="map"
       style={{
         height: '100vh',
         position: 'relative',
       }}
     />
+    </>
   );
 };