JSON Tile Parser (#1970)

* feat: add tile_json_parser

* feat: update lint

---------

Co-authored-by: kip.song <kip.song@nio.com>

dev-demos/bugs/scene/demos/bmap.tsx

@@ -1,5 +1,5 @@
-import { Map, BMap,Scene, ExportImage, PointLayer } from "@antv/l7";
-import React, { useState } from "react";
+import { BaiduMap, Scene, PointLayer } from "@antv/l7";
+import React from "react";
 // tslint:disable-next-line:no-duplicate-imports
 import { FunctionComponent, useEffect } from "react";
 
@@ -12,14 +12,14 @@ const Demo: FunctionComponent = () => {
     var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
     bmap.addOverlay(marker1);
 
-    console.log('getRotation',bmap)
+    console.log('getRotation', bmap)
     const newScene = new Scene({
       id: "map",
-      map:new BMap({mapInstance:bmap})
+      map: new BaiduMap({ mapInstance: bmap })
     });
 
     newScene.on("loaded", () => {
-      
+
       fetch(
         "https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json"
       )
@@ -29,15 +29,15 @@ const Demo: FunctionComponent = () => {
             autoFit: false
           })
             .source([{
-                x:116.404,
-                y:39.925
+              x: 116.404,
+              y: 39.925
 
-            }],{
-                parser:{
-                    type:'json',
-                    x:'x',
-                    y:'y'
-                }
+            }], {
+              parser: {
+                type: 'json',
+                x: 'x',
+                y: 'y'
+              }
             })
             .shape("circle")
             .size(10)
@@ -56,14 +56,14 @@ const Demo: FunctionComponent = () => {
   }, []);
 
   return (
-   
-      <div
-        id="map"
-        style={{
-          height: "500px",
-          position: "relative"
-        }}
-      />
+
+    <div
+      id="map"
+      style={{
+        height: "500px",
+        position: "relative"
+      }}
+    />
   );
 };
 

packages/source/src/index.ts

@@ -4,6 +4,7 @@ import geojson from './parser/geojson';
 import geojsonVTTile from './parser/geojsonvt';
 import image from './parser/image';
 import json from './parser/json';
+import jsonTile from './parser/jsonTile';
 import mapboxVectorTile from './parser/mvt';
 import raster from './parser/raster';
 import rasterTile, { rasterDataTypes } from './parser/raster-tile';
@@ -31,6 +32,7 @@ registerParser('mvt', mapboxVectorTile);
 registerParser('geojsonvt', geojsonVTTile);
 registerParser('testTile', testTile);
 registerParser('geojson', geojson);
+registerParser('jsonTile', jsonTile);
 registerParser('image', image);
 registerParser('csv', csv);
 registerParser('json', json);

packages/source/src/parser/jsonTile.ts

@@ -0,0 +1,106 @@
+import {
+  getData,
+  getURLFromTemplate,
+  RequestParameters,
+  SourceTile,
+  TileLoadParams,
+} from '@antv/l7-utils';
+import { Feature } from '@turf/helpers';
+import { IParserData, ITileSource } from '../interface';
+import VtSource from '../source/geojsonvt';
+
+import { ITileParserCFG } from '@antv/l7-core';
+
+export type MapboxVectorTile = {
+  layers: { [key: string]: { features: Feature[] } };
+};
+
+const getVectorTile = async (
+  url: string,
+  tile: SourceTile,
+  requestParameters?: Partial<RequestParameters>,
+  getCustomData?: ITileParserCFG['getCustomData'],
+): Promise<ITileSource> => {
+  const params = { x: tile.x, y: tile.y, z: tile.z };
+  const tileUrl = getURLFromTemplate(url, params);
+  return new Promise((resolve) => {
+    if (getCustomData) {
+      getCustomData(params, (err, data) => {
+        if (err || !data) {
+          const vectorTile: MapboxVectorTile = {
+            layers: { defaultLayer: { features: [] } },
+          };
+          const vectorSource = new VtSource(vectorTile, tile.x, tile.y, tile.z);
+          resolve(vectorSource);
+        } else {
+          const vectorTile: MapboxVectorTile = {
+            layers: { defaultLayer: { features: data.features } },
+          };
+          const vectorSource = new VtSource(vectorTile, tile.x, tile.y, tile.z);
+          resolve(vectorSource);
+        }
+      });
+    } else {
+      getData(
+        {
+          ...requestParameters,
+          url: tileUrl,
+        },
+        (err, data) => {
+          if (err || !data) {
+            const vectorTile: MapboxVectorTile = {
+              layers: {
+                defaultLayer: {
+                  features: [],
+                },
+              },
+            };
+            const vectorSource = new VtSource(
+              vectorTile,
+              tile.x,
+              tile.y,
+              tile.z,
+            );
+            resolve(vectorSource);
+          } else {
+            const json = JSON.parse(data);
+            const vectorTile: MapboxVectorTile = {
+              layers: {
+                defaultLayer: {
+                  features: json,
+                },
+              },
+            };
+            const vectorSource = new VtSource(
+              vectorTile,
+              tile.x,
+              tile.y,
+              tile.z,
+            );
+            resolve(vectorSource);
+          }
+        },
+      );
+    }
+  });
+};
+
+export default function jsonTile(
+  url: string,
+  cfg: ITileParserCFG,
+): IParserData {
+  const getTileData = (_: TileLoadParams, tile: SourceTile) => {
+    return getVectorTile(url, tile, cfg?.requestParameters, cfg.getCustomData);
+  };
+
+  const tilesetOptions = {
+    ...cfg,
+    getTileData,
+  };
+
+  return {
+    dataArray: [],
+    tilesetOptions,
+    isTile: true,
+  };
+}

packages/utils/src/ajax.ts

@@ -190,6 +190,13 @@ export const postData = (
   return makeRequest({ ...requestParameters, method: 'POST' }, callback);
 };
 
+export const getData = (
+  requestParameters: RequestParameters,
+  callback: ResponseCallback<string>,
+) => {
+  return makeRequest({ ...requestParameters, method: 'GET' }, callback);
+};
+
 export function sameOrigin(url: string) {
   const a = window.document.createElement('a');
   a.href = url;