Merge pull request #60 from antvis/site

Site

.gitignore

@@ -69,91 +69,7 @@ dist/
 
 .DS_Store
 public
-.cache/redirects.json
+.cache
-.cache/redux.state
+
-.cache/caches/gatsby-transformer-remark/diskstore-0b12f383a1ce9a8cdbb2a4f52cf8af84.json
+yarn.lock
-.cache/caches/gatsby-transformer-remark/diskstore-1ea0cd3c8f491f1774b8edd1ce38b1f9.json
+package-lock.json
-.cache/caches/gatsby-transformer-remark/diskstore-2b8cd1df4f8a6941bff4108301b5d6a9.json
-.cache/caches/gatsby-transformer-remark/diskstore-2c713f7ba9a30ac45cbadf6d86d5d544.json
-.cache/caches/gatsby-transformer-remark/diskstore-2e9a5d11bfbd9e331e877b0e013a0ab8.json
-.cache/caches/gatsby-transformer-remark/diskstore-03f70e3c5a52291e52b331e3d35900a4.json
-.cache/caches/gatsby-transformer-remark/diskstore-5a894e6dcf41aaf38dcfe7c4ef24bb6c.json
-.cache/caches/gatsby-transformer-remark/diskstore-5aa0c32748bae2a74e08828fed4fd3a6.json
-.cache/caches/gatsby-transformer-remark/diskstore-5be2deb5db771c62d6348aacc8798213.json
-.cache/caches/gatsby-transformer-remark/diskstore-5ce457da6f1384d2d0a1c8d65aa7035f.json
-.cache/caches/gatsby-transformer-remark/diskstore-5e29728bfdb977a2a740b90f7e81c026.json
-.cache/caches/gatsby-transformer-remark/diskstore-6e44d9bde57e425196c802f385c59145.json
-.cache/caches/gatsby-transformer-remark/diskstore-7c691ebc8b681ec76a0dd2b62e2186ba.json
-.cache/caches/gatsby-transformer-remark/diskstore-8a657829abac5ed5e9e205e519d6ded0.json
-.cache/caches/gatsby-transformer-remark/diskstore-8c6f6648e48a1e25d0879cba52c6f15c.json
-.cache/caches/gatsby-transformer-remark/diskstore-9a6db7a621d98f2e40fca942ffec8d7f.json
-.cache/caches/gatsby-transformer-remark/diskstore-09be3cfc8fb53b393e594e000fb9c3c4.json
-.cache/caches/gatsby-transformer-remark/diskstore-9ea0254de64dbc01eafc57f7dafb6400.json
-.cache/caches/gatsby-transformer-remark/diskstore-9fb8c242123b7f40762c92122bacea8e.json
-.cache/caches/gatsby-transformer-remark/diskstore-31a80985ee546abb7aa91ce454986fb1.json
-.cache/caches/gatsby-transformer-remark/diskstore-34caa57442541fb555e65adf766c9dbf.json
-.cache/caches/gatsby-transformer-remark/diskstore-35f1e3ed2504889557819cd85f730da3.json
-.cache/caches/gatsby-transformer-remark/diskstore-51d0f3b693c1d063f395570395293fb4.json
-.cache/caches/gatsby-transformer-remark/diskstore-60ffaa0253ce67428f5a7e31a4a0bad1.json
-.cache/caches/gatsby-transformer-remark/diskstore-61c1d71d82d9e8cb724bc675e994ee07.json
-.cache/caches/gatsby-transformer-remark/diskstore-62ff8f6ebb8d87c110d712e03f9a98e9.json
-.cache/caches/gatsby-transformer-remark/diskstore-63f86e913288c0406ba43ec83f25684f.json
-.cache/caches/gatsby-transformer-remark/diskstore-97cfab1e1ad583ea0fa987b5c84f159c.json
-.cache/caches/gatsby-transformer-remark/diskstore-314bc0cb54aa930a49cfb58df8b50ffa.json
-.cache/caches/gatsby-transformer-remark/diskstore-335fc52df6558698584a4c58a93133dc.json
-.cache/caches/gatsby-transformer-remark/diskstore-468b5bae8ef758f28811323986a026ca.json
-.cache/caches/gatsby-transformer-remark/diskstore-479f7412bfaf2ad395f176418584631a.json
-.cache/caches/gatsby-transformer-remark/diskstore-509da604a7cd9c41a31392dd15cfd143.json
-.cache/caches/gatsby-transformer-remark/diskstore-833c6a9868536cc7f0ee995069745bd6.json
-.cache/caches/gatsby-transformer-remark/diskstore-3240b72791cdbb0de473bd7b0fc3f4a3.json
-.cache/caches/gatsby-transformer-remark/diskstore-4959c881d2fccc57dea5cba657223041.json
-.cache/caches/gatsby-transformer-remark/diskstore-6195db1b342fb1235a247e18694e1cc8.json
-.cache/caches/gatsby-transformer-remark/diskstore-8152d0a6832522eb79f34eecc5e89cd4.json
-.cache/caches/gatsby-transformer-remark/diskstore-9429c44d730cc08b4b28804d3d7d5a2c.json
-.cache/caches/gatsby-transformer-remark/diskstore-19012e1f6f28c599baa0778f3e002c21.json
-.cache/caches/gatsby-transformer-remark/diskstore-20649dc8fd4cdde49b1d9ea0c26371b2.json
-.cache/caches/gatsby-transformer-remark/diskstore-96374eabb69d89610d3ad583e7ef7bfc.json
-.cache/caches/gatsby-transformer-remark/diskstore-164252f91872bc33e77d29eb616fafa1.json
-.cache/caches/gatsby-transformer-remark/diskstore-419766453a3a10f392d412948ad4520a.json
-.cache/caches/gatsby-transformer-remark/diskstore-2763556052b3406bbcf4532fe8fa5d4e.json
-.cache/caches/gatsby-transformer-remark/diskstore-a9a7598872d374acd56469ecbe4a84da.json
-.cache/caches/gatsby-transformer-remark/diskstore-a7725b15bd64a40f9d4d5eb35340b314.json
-.cache/caches/gatsby-transformer-remark/diskstore-aae05a37d5dbc73377131a3df8a830bd.json
-.cache/caches/gatsby-transformer-remark/diskstore-b0407a444ef8acb3f4819a2fd00c5ae3.json
-.cache/caches/gatsby-transformer-remark/diskstore-b923ecb39dc7dd6f4752bf9bbf5c94da.json
-.cache/caches/gatsby-transformer-remark/diskstore-b089023713dde4294665d832c48ccd63.json
-.cache/caches/gatsby-transformer-remark/diskstore-bbdcb1122dc2a86aef4134f4c5c42dc1.json
-.cache/caches/gatsby-transformer-remark/diskstore-bd3cd1387f798ad20e18475f0929f324.json
-.cache/caches/gatsby-transformer-remark/diskstore-be4a0f00b712d152c6b7536968d29cef.json
-.cache/caches/gatsby-transformer-remark/diskstore-bea1dfafb379b4e5e4393814eff70f54.json
-.cache/caches/gatsby-transformer-remark/diskstore-bee012580db1a2e5f57e03421caf971f.json
-.cache/caches/gatsby-transformer-remark/diskstore-bf54f7f5282b043f03b2a3733bdac4f3.json
-.cache/caches/gatsby-transformer-remark/diskstore-bf0995ffe3e44d36b50e8f808495c563.json
-.cache/caches/gatsby-transformer-remark/diskstore-bf3648bcc8f9d552a4439069ae408fad.json
-.cache/caches/gatsby-transformer-remark/diskstore-c32f0608dadae224d91a44d7bb4b66db.json
-.cache/caches/gatsby-transformer-remark/diskstore-c320ffacf9b8eef3d92229d6a1a70d96.json
-.cache/caches/gatsby-transformer-remark/diskstore-ca2fb97dfd9c7f243ca223efc08ffba5.json
-.cache/caches/gatsby-transformer-remark/diskstore-ca3867e16d821cfd8579d7b29582e0b8.json
-.cache/caches/gatsby-transformer-remark/diskstore-cbe5331f7cf63c058404726cdea224c2.json
-.cache/caches/gatsby-transformer-remark/diskstore-cc83f0f387424948934f22053503ed85.json
-.cache/caches/gatsby-transformer-remark/diskstore-d0b48925fc35a486d2edcefd379a8067.json
-.cache/caches/gatsby-transformer-remark/diskstore-d2b3f82b0a8e66040aa810a8958afe0d.json
-.cache/caches/gatsby-transformer-remark/diskstore-d4b28ce0015b79c52ff804a21a129aa0.json
-.cache/caches/gatsby-transformer-remark/diskstore-d41ece99b0e508f70b31a8152b25f8a5.json
-.cache/caches/gatsby-transformer-remark/diskstore-db5d13902d2d007ceff5537b4ca04b11.json
-.cache/caches/gatsby-transformer-remark/diskstore-dc1901f7f1baf243df1556f52717b2ba.json
-.cache/caches/gatsby-transformer-remark/diskstore-ddc1db31dfe2bcb6d2040bce323f5828.json
-.cache/caches/gatsby-transformer-remark/diskstore-df75817e83ad0a2f79b98ce42e6056a8.json
-.cache/caches/gatsby-transformer-remark/diskstore-e49d5822f90847d686ab7ed05c412e0b.json
-.cache/caches/gatsby-transformer-remark/diskstore-e2145ab61e30e98413fb69c2f3d5098f.json
-.cache/caches/gatsby-transformer-remark/diskstore-e8067f3515dcae00ea981c2733ca40cb.json
-.cache/caches/gatsby-transformer-remark/diskstore-e72135977ad05cc3007997a59f58e7ed.json
-.cache/caches/gatsby-transformer-remark/diskstore-ec259f9adac459854ebecf9375d97a8d.json
-.cache/caches/gatsby-transformer-remark/diskstore-ee0df53bccbd3ad6e6ad1b28c1331ca4.json
-.cache/caches/gatsby-transformer-remark/diskstore-f5cfa5aac1b0651a071bc0b0f90efa3c.json
-.cache/caches/gatsby-transformer-remark/diskstore-f9c2ec20398ba84a7058c3475b4845c3.json
-.cache/caches/gatsby-transformer-remark/diskstore-f250d30e0f7c9f0380924fbf1033efc3.json
-.cache/caches/gatsby-transformer-remark/diskstore-fb18e835921f3dc32ae5b74bdfb36220.json
-.cache/caches/gatsby-transformer-remark/diskstore-fbddf0de549e59cfa8bf242898a85984.json
-.cache/caches/gatsby-transformer-remark/diskstore-feb74fcce830febf6919bf3857a7765f.json
-.cache/caches/gatsby-transformer-remark/diskstore-fffb15ec8285c18963c880046e7fccce.json

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
+
-}
+}

babel.config.js

@@ -1,19 +1,32 @@
 // @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
 module.exports = (api) => {
   api.cache(() => process.env.NODE_ENV);
-  if (api.env('site')) { //
+  if(api.env('site')) {
     return {
-      presets: [
+      "presets": [
-        [
+        "babel-preset-gatsby"
-          '@babel/preset-env',
-          {
-            loose: true,
-            modules: false,
-          },
-        ],
-        '@babel/preset-react',
-        'babel-preset-gatsby',
       ],
+      "plugins": [
+          '@babel/plugin-proposal-optional-chaining',
+          '@babel/plugin-proposal-nullish-coalescing-operator',
+        [
+          '@babel/plugin-proposal-decorators',
+          {
+            legacy: true,
+          }
+        ],
+        [
+          // import glsl as raw text
+          'babel-plugin-inline-import',
+          {
+            extensions: [
+              // 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
+              // '.json',
+              '.glsl',
+            ]
+          }
+        ],
+      ]
     };
   }
   return {

examples/heatmap/basic/demo/grid.js

@@ -1,55 +0,0 @@
-import { Scene } from '@l7/scene';
-import { HeatMapGridLayer } from '@l7/layers';
-const scene = new Scene({
-  id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
-  type: 'amap',
-  zoom: 16,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new HeatMapGridLayer({
-      })
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-        transforms: [
-          {
-            type: 'grid',
-            size: 50,
-            field: 'count',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value;
-      })
-      .shape('square')
-      .style({
-        coverage: 0.8,
-        angle: 0,
-        opacity: 0.6,
-      })
-      .color('count', [
-        '#002466',
-        '#105CB3',
-        '#2894E0',
-        '#CFF6FF',
-        '#FFF5B8',
-        '#FFAB5C',
-        '#F27049',
-        '#730D1C',
-      ]);
-    scene.addLayer(layer);
-
-
-  });

examples/heatmap/grid/demo/grid.js

@@ -5,7 +5,7 @@ const scene = new Scene({
   style: 'light',
   pitch: 0,
   center: [116.49434030056, 39.868073421167621],
-  type: 'amap',
+  type: 'mapbox',
   zoom: 16,
 });
 
@@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
         transforms: [
           {
             type: 'grid',
-            size: 50,
+            size: 20,
             field: 'count',
             method: 'sum',
           },
@@ -33,23 +33,19 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
       .size('sum', (value) => {
         return value;
       })
-      .shape('square')
+      .shape('circle')
       .style({
         coverage: 0.8,
         angle: 0,
-        opacity: 0.6,
+        opacity: 1.0,
       })
-      .color('count', [
+      .color('count',  ['#0A3663', '#1558AC',
-        '#002466',
+      '#3771D9', '#4D89E5',
-        '#105CB3',
+      '#64A5D3', '#72BED6',
-        '#2894E0',
+      '#83CED6', '#A6E1E0',
-        '#CFF6FF',
+      '#B8EFE2', '#D7F9F0']);
-        '#FFF5B8',
-        '#FFAB5C',
-        '#F27049',
-        '#730D1C',
-      ]);
     scene.addLayer(layer);
+    console.log(layer);
 
 
   });

examples/heatmap/grid/demo/meta.json

@@ -6,11 +6,13 @@
   "demos": [
     {
       "filename": "grid.js",
-      "title": "网格热力图"
+      "title": "网格热力图",
+      "screenshot":""
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图"
+      "title": "世界电厂热力图",
+      "screenshot":""
     }
   ]
 }

examples/heatmap/grid/demo/world.js

@@ -1,5 +1,5 @@
 import { Scene } from '@l7/scene';
-import { HeatMapGridLayer } from '@l7/layers';
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
 const scene = new Scene({
   id: 'map',
   style: 'light',
@@ -13,39 +13,34 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64
   .then((res) => res.json())
   .then((data) => {
     const layer =
-      new HeatMapGridLayer({
+      new HeatMapGrid3dLayer({
       })
       .source(data, {
         transforms: [
           {
-            type: 'grid',
+            type: 'hexagon',
-            size: 100000,
+            size: 200000,
             field: 'capacity',
             method: 'sum',
           },
         ],
       })
       .size('sum', (value) => {
-        return value;
+        return value * 50;
       })
-      .scale('sum',{
+      .shape('hexagon')
-        type:'quantile',
-      })
-      .shape('square')
       .style({
-        coverage: 1,
+        coverage: 0.9,
         angle: 0,
         opacity: 1.0,
       })
       .color('sum', [
-        '#002466',
+            '#2E8AE6',
-        '#105CB3',
+            '#69D1AB',
-        '#2894E0',
+            '#DAF291',
-        '#CFF6FF',
+            '#FFD591',
-        '#FFF5B8',
+            '#FF7A45',
-        '#FFAB5C',
+            '#CF1D49',
-        '#F27049',
-        '#730D1C',
       ]);
     scene.addLayer(layer);
 

examples/heatmap/heatmap/demo/meta.json

@@ -1,16 +1,19 @@
 {
   "title": {
-    "zh": "网格热力图",
+    "zh": "经典热力图",
     "en": "heatmap"
   },
   "demos": [
     {
-      "filename": "grid.js",
+      "filename": "world3d.js",
-      "title": "网格热力图"
+
+      "title": "经典热力图3D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图"
+      "title": "经典热力图2D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/heatmap/heatmap/demo/world.js

@@ -4,35 +4,27 @@ const scene = new Scene({
   id: 'map',
   style: 'dark',
   pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
+  center: [127.5671666579043,7.445038892195569],
   type: 'mapbox',
-  zoom: 3,
+  zoom: 2.632456779444394
 });
 
-fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
   .then((res) => res.json())
   .then((data) => {
     const layer =
       new HeatMapLayer({
       })
-      .source(data)
+      .source(data).size('mag', [0, 1.0]) // weight映射通道
-      .size('capacity', [0, 1]) // weight映射通道
+        .style({
-      .style({
+          intensity: 2,
-        intensity: 10,
+          radius: 20,
-        radius: 5,
+          opacity: 1.0,
-        opacity: 1.0,
+          rampColors: {
-        rampColors: {
+            colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
-          colors: [
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
-            '#2E8AE6',
+          }
-            '#69D1AB',
+        })
-            '#DAF291',
-            '#FFD591',
-            '#FF7A45',
-            '#CF1D49',
-          ],
-          positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
-        },
-      });
     scene.addLayer(layer);
 
 

examples/heatmap/heatmap/demo/world3d.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'mapbox',
+  zoom: 3,
+});
+window.mapScene = scene;
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data)
+      .size('capacity', [0, 1])
+      .shape('heatmap3D')
+       // weight映射通道
+      .style({
+        intensity: 10,
+        radius: 5,
+        opacity: 1.0,
+        rampColors: {
+          colors:[
+            '#2E8AE6',
+            '#69D1AB',
+            '#DAF291',
+            '#FFD591',
+            '#FF7A45',
+            '#CF1D49',
+          ],
+          positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
+        },
+      });
+    scene.addLayer(layer);
+    console.log(layer)
+
+  });

examples/heatmap/heatmap/index.zh.md

@@ -1,4 +1,6 @@
 ---
-title: 热力图
+title: 经典热力图
 order: 0
+redirect_from:
+  - /zh/examples/heatmap/
 ---

examples/heatmap/hexagon/demo/hexagon.ts

@@ -0,0 +1,50 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [114.0500, 22.5441],
+  zoom: 14,
+  type: 'mapbox',
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
+)
+  .then((res) => res.json())
+  .then((data) => {
+    const layer = new HeatMapGrid3dLayer({})
+      .source(data, {
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 200,
+            field: 'h12',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', [0, 600])
+      .shape('hexagon')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color(
+        'sum',
+        [
+          '#ffffcc',
+          '#ffeda0',
+          '#fed976',
+          '#feb24c',
+          '#fd8d3c',
+          '#fc4e2a',
+          '#e31a1c',
+          '#bd0026',
+          '#800026',
+        ].reverse(),
+      );
+    scene.addLayer(layer);
+  });

examples/heatmap/hexagon/demo/light.js

@@ -0,0 +1,114 @@
+import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 43,
+  center: [119.9719107,29.4924299],
+  zoom: 7.2,
+  type: 'mapbox',
+});
+window.mapScene = scene;
+const colorObj = {
+  redyellow: [
+    '#8A191A', '#AE3235',
+    '#CC464B', '#E26A5D',
+    '#EC8765', '#F0A66C',
+    '#F4BC8F', '#FFCEA7',
+    '#FFE4CE', '#FFF2E8'
+  ],
+  yellow: [
+    '#7B320A', '#B35B21',
+    '#D2722E', '#F0883A',
+    '#FBA045', '#FAB04B',
+    '#FAC760', '#FBD78C',
+    '#FCE6B3', '#FCF3DB'
+  ],
+  blue_green: [
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+  ],
+  blue: [
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ],
+  purple: [
+    '#312B60', '#4A457E',
+    '#615C99', '#816CAD',
+    '#A67FB5', '#C997C7',
+    '#DEB8D4', '#F5D4E6',
+    '#FAE4F1', '#FFF3FC'
+  ],
+  color1: [
+    '#E4682F', '#FF8752',
+    '#FFA783', '#FFBEA8',
+    '#FFDCD6', '#EEF3FF',
+    '#C8D7F5', '#A5C1FC',
+    '#7FA7F9', '#5F8AE5'
+  ],
+  color2: [
+    '#F1646A', '#F48789',
+    '#F7A9AC', '#FBCCCD',
+    '#FDEEEE', '#EEF3FF',
+    '#C8DAFE', '#A5C1FC',
+    '#80A8FB', '#5B8EF8'
+  ],
+  color3: [
+    '#EEF3FF', '#C8DAFE',
+    '#A5C1FC', '#80A8FB',
+    '#5B8EF8', '#FCF6FA',
+    '#F5E4EF', '#F7CDDF',
+    '#ED9CBE', '#D1749B'
+  ],
+  color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
+  colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
+  colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
+  colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
+  colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
+  colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
+  colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
+}
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGrid3dLayer({})
+      .source(data, {
+
+        parser:{
+           type:'csv',
+            x:'lng',
+            y:'lat',
+        },
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 2500,
+            field: 'v',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (sum)=>{
+        return sum * 200;
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.8,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color(
+        'sum',
+        colorObj.blue.slice(0,7).reverse(),
+      );
+    scene.addLayer(layer);
+    console.log(layer);
+  });

examples/heatmap/hexagon/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 蜂窝热力图
+order: 1
+---

examples/line/arc/demo/arc.js

@@ -5,7 +5,7 @@ const scene = new Scene({
   pitch: 0,
   type: 'mapbox',
   style: 'dark',
-  center: [102.602992, 23.107329],
+  center: [0., 23.107329],
   zoom: 0,
 });
 

examples/line/arc/demo/meta.json

@@ -11,13 +11,14 @@
 
     },
     {
-      "filename": "arcCircle.js",
+      "filename": "arc.js",
-      "title": "大圆弧线"
+      "title": "弧线",
-
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "arc.js",
+      "filename": "arcCircle.js",
-      "title": "弧线"
+      "title": "大圆弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
 
     }
   ]

examples/line/arc/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 弧线
+title: 弧线地图
 order: 1
 ---

examples/line/basic/demo/meta.json

@@ -1,20 +0,0 @@
-{
-  "title": {
-    "zh": "线图层",
-    "en": "line"
-  },
-  "demos": [
-    {
-      "filename": "path.js",
-      "title": "路径"
-    },
-    {
-      "filename": "line.js",
-      "title": "等高线"
-    },
-    {
-      "filename": "line2.js",
-      "title": "等值线"
-    }
-  ]
-}

examples/line/basic/index.zh.md

@@ -1,4 +0,0 @@
----
-title: 路径
-order: 0
----

examples/line/dash/demo/meta.json

@@ -1,20 +0,0 @@
-{
-  "title": {
-    "zh": "线图层",
-    "en": "line"
-  },
-  "demos": [
-    {
-      "filename": "path.js",
-      "title": "路径"
-    },
-    {
-      "filename": "line.js",
-      "title": "等高线"
-    },
-    {
-      "filename": "line2.js",
-      "title": "等值线"
-    }
-  ]
-}

examples/line/dash/demo/path.js

@@ -1,96 +0,0 @@
-import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [120.2336, 30.2002],
-  zoom: 3,
-});
-const lineData ={
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "LineString",
-        "coordinates": [
-          [
-            102.98583984374999,
-            37.666429212090605
-          ],
-          [
-            111.33544921874999,
-            37.23032838760387
-          ],
-          [
-            111.24755859375,
-            34.92197103616377
-          ],
-          [
-            98.15185546874999,
-            35.44277092585766
-          ],
-          [
-            98.701171875,
-            41.09591205639546
-          ],
-          [
-            100.5908203125,
-            41.0130657870063
-          ],
-          [
-            101.09619140625,
-            41.0130657870063
-          ],
-          [
-            101.689453125,
-            41.0130657870063
-          ],
-          [
-            102.26074218749999,
-            41.0130657870063
-          ],
-          [
-            102.26074218749999,
-            40.58058466412761
-          ],
-          [
-            102.23876953125,
-            40.329795743702064
-          ],
-          [
-            102.23876953125,
-            39.977120098439634
-          ],
-          [
-            102.26074218749999,
-            40.212440718286466
-          ],
-          [
-            102.48046875,
-            39.87601941962116
-          ]
-        ]
-      }
-    }
-  ]
-};
-fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new DashLineLayer({
-      })
-        .source(lineData)
-        .size(1.5)
-        .shape('line')
-        .color(
-          '#5B8FF9'
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/line/dash/index.zh.md

@@ -1,4 +0,0 @@
----
-title: 虚线
-order: 0
----

examples/line/line/demo/ele.js

@@ -17,7 +17,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
       })
         .source(data)
         .size('ELEV', (h) => {
-          return h % 50 === 0 ? 1.0 : 0.5;
+          return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
         })
         .shape('line')
         .scale('ELEV', {

examples/line/line/demo/ele_dark.js

@@ -1,10 +1,10 @@
 import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
+import { LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
   pitch: 0,
   type: 'amap',
-  style: 'light',
+  style: 'dark',
   center: [102.602992, 23.107329],
   zoom: 14,
 });
@@ -13,11 +13,11 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
   .then((res) => res.json())
   .then((data) => {
     const layer =
-      new DashLineLayer({
+      new LineLayer({
       })
         .source(data)
         .size('ELEV', (h) => {
-          return h % 50 === 0 ? 1.0 : 0.5;
+          return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
         })
         .shape('line')
         .scale('ELEV', {
@@ -35,9 +35,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
             '#A5C1FC',
             '#7FA7F9',
             '#5F8AE5' ].reverse()
-        ).style({
+        )
-          dashArray:[10, 1],
-        })
     scene.addLayer(layer);
     console.log(layer);
 

examples/line/line/demo/linedash.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 23.107329],
+  center: [102.602992, 33.107329],
-  zoom: 4,
+  zoom: 3.5,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')

examples/line/line/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "线图层",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "ele.js",
+      "title": "等高线",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FGliTJ7eSBIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ele_dark.js",
+      "title": "等高线",
+      "screenshot":""
+    },
+    {
+      "filename": "linedash.js",
+      "title": "等高线",
+      "screenshot":""
+    }
+
+  ]
+}

examples/line/line/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 等值线
+order: 0
+redirect_from:
+  - /zh/examples/line/
+---

examples/line/path/demo/linedash.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 23.107329],
+  center: [102.602992, 33.107329],
-  zoom: 4,
+  zoom: 3.5,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')

examples/line/path/demo/meta.json

@@ -0,0 +1,28 @@
+{
+  "title": {
+    "zh": "线图层",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "road_light.js",
+      "title": "路径",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line.js",
+      "title": "等高线",
+      "screenshot":""
+    },
+    {
+      "filename": "line2.js",
+      "title": "等值线",
+      "screenshot":""
+    },
+    {
+      "filename": "road_dark.js",
+      "title": "路径",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1FVsSLUncw4AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/line/path/demo/road_dark.js

@@ -0,0 +1,29 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [116.3956,39.9392],
+  pitch: 0,
+  zoom: 10,
+  rotation: 0,
+  type: 'mapbox',
+  style: 'dark',
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data)
+        .size(1.5)
+        .shape('line')
+        .color(
+          '标准名称',
+          ['#5B8FF9','#5CCEA1','#F6BD16' ]
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/path/demo/road_light.js

@@ -2,14 +2,15 @@ import { Scene } from '@l7/scene';
 import { LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
+  center: [116.3956,39.9392],
   pitch: 0,
-  type: 'amap',
+  zoom: 10,
+  rotation: 0,
+  type: 'mapbox',
   style: 'light',
-  center: [120.2336, 30.2002],
-  zoom: 15,
 });
 
-fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
+fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')
   .then((res) => res.json())
   .then((data) => {
     const layer =
@@ -19,10 +20,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727
         .size(1.5)
         .shape('line')
         .color(
-          'name',
+          '标准名称',
-          ['#5B8FF9','#5CCEA1','#7B320A' ]
+          ['#5B8FF9','#5CCEA1','#5D7092' ]
         )
     scene.addLayer(layer);
     console.log(layer);
 
-  });
+  });

examples/line/path/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 路径地图
+order: 0
+redirect_from:
+  - /zh/examples/line/
+---

examples/marker/basic/demo/line.js

@@ -1,39 +0,0 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 13,
-});
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1)
-        .shape('line')
-        .color(
-          'ELEV',
-          [
-            '#E8FCFF',
-            '#CFF6FF',
-            '#A1E9ff',
-            '#65CEF7',
-            '#3CB1F0',
-            '#2894E0',
-            '#1772c2',
-            '#105CB3',
-            '#0D408C',
-            '#002466',
-          ].reverse(),
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/marker/basic/demo/meta.json

@@ -1,13 +0,0 @@
-{
-  "title": {
-    "zh": "图库",
-    "en": "Gallery"
-  },
-  "demos": [
-    {
-      "filename": "line.js",
-      "title": "线图层",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
-    }
-  ]
-}

examples/marker/basic/index.zh.md

@@ -1,4 +0,0 @@
----
-title: 标注
-order: 0
----

examples/point/3d/demo/column_dark.js

@@ -0,0 +1,44 @@
+import { Scene } from '@l7/scene';
+import { Point3dLayer} from '@l7/layers'
+
+const scene = new Scene({
+  id: 'map',
+  pitch: 35.210526315789465,
+  type: 'amap',
+  style: 'dark',
+  center: [108.524505, 29.873128],
+  zoom: 4.4,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new Point3dLayer({
+      })
+        .source(data.list, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w'
+          }
+        }) 
+        .shape('cylinder')
+        .size('t', function(level) {
+          return [1, 2, level * 2 + 20];
+        })
+        .color('t',[
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#CEF8D6'
+        ],)
+        .style({
+          opacity: 1.0,
+        })
+        scene.addLayer(pointLayer);
+        console.log(pointLayer);
+       
+  });

examples/point/3d/demo/column_light.js

@@ -0,0 +1,38 @@
+import { Scene } from '@l7/scene';
+import { Point3dLayer} from '@l7/layers'
+
+const scene = new Scene({
+  id: 'map',
+  pitch: 35.210526315789465,
+  type: 'amap',
+  style: 'light',
+  center: [108.524505, 29.873128],
+  zoom: 4.4,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new Point3dLayer({
+      })
+        .source(data.list, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w'
+          }
+        }) 
+        .shape('cylinder')
+        .size('t', function(level) {
+          return [1, 2, level * 2 + 20];
+        })
+        .color('#006CFF')
+        .style({
+          opacity: 1.0,
+        })
+        scene.addLayer(pointLayer);
+        console.log(pointLayer);
+       
+  });

examples/point/3d/demo/meta.json

@@ -0,0 +1,25 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "column_light.js",
+      "title": "3D柱图_浅色底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*5WdiT7MmU_cAAAAAAAAAAABkARQnAQ"
+   
+    },
+    {
+      "filename": "world.js",
+      "title": "气泡图 - 电厂装机量"
+    
+    },
+    {
+      "filename": "column_dark.js",
+      "title": "3D柱图_深色底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
+   
+    }
+  ]
+}

examples/point/3d/demo/point.js

@@ -0,0 +1,38 @@
+import { Scene } from '@l7/scene';
+import { Point3dLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new Point3dLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn'])
+        .size('unit_price', (h)=>{
+          return [ 15,15, h / 1000 ]
+        })
+        .color('name',['#49B5AD', "#5B8FF9",'#E4504A','#E99431'])
+        .style({
+          opacity: 1.0,
+        })
+
+      scene.addLayer(pointLayer);
+
+  });
+
+

examples/point/3d/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 3D柱状地图
+order: 4
+---

examples/point/basic/demo/buble.js

@@ -0,0 +1,36 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [140.067171, 36.26186],
+  zoom: 5.32,
+  maxZoom: 10
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
+  .then((res) => res.json())
+  .then((data) => {
+  
+    const pointLayer =
+        new PointLayer({
+        })
+        .source(data)
+        .shape('circle')
+        .size('mag', [5, 16])
+        .scale('mag',{
+          type:'quantile'
+        })
+        .color('mag',(mag)=>{
+           return mag > 4.5? "#5B8FF9" : '#5CCEA1';
+        })
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1
+        })
+
+        scene.addLayer(pointLayer);
+
+  });

examples/point/basic/demo/color.js

@@ -22,13 +22,22 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
             x: 'longitude',
             y: 'latitude'
           }
-        }).shape('circle')
+        }).shape('name',[
-        .size('unit_price', [5, 25])
+          'circle',
-        .color('#5B8FF9')
+          'triangle',
+          'square',
+          'pentagon',
+          'hexagon',
+          'octogon',
+          'hexagram',
+          'rhombus',
+          'vesica',
+        ])
+        .size('unit_price', [10, 25])
+        .color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"])
         .style({
-          opacity: 0.3,
+          opacity:1.0,
           strokeWidth: 1,
-          strokeColor: "#5B8FF9",
 
         })
 

examples/point/basic/demo/meta.json

@@ -5,13 +5,21 @@
   },
   "demos": [
     {
-      "filename": "point.js",
+      "filename": "buble.js",
-      "title": "气泡图"
+      "title": "气泡图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ"
    
     },
     {
       "filename": "world.js",
-      "title": "气泡图 - 电厂装机量"
+      "title": "气泡图 - 电厂装机量",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ"
+    
+    },
+    {
+      "filename": "normal.js",
+      "title": "城市亮度图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
     
     }
   ]

examples/point/basic/demo/normal.js

@@ -0,0 +1,36 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 64.88,
+  type: 'amap',
+  style: 'dark',
+  center: [114.060288, 22.53684],
+  zoom: 15.63,
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+       
+      })
+        .source(data)
+        .size(2)
+        .color('h8',[
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ])
+        .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/point/basic/demo/text.js

@@ -0,0 +1,41 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+  minZoom: 10
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('#5B8FF9')
+        .label('name')
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+          strokeColor: "#5B8FF9",
+
+        })
+
+        scene.addLayer(pointLayer);
+        console.log(pointLayer);
+
+  });
+
+

examples/point/basic/demo/world.js

@@ -5,24 +5,26 @@ const scene = new Scene({
   pitch: 0,
   type: 'mapbox',
   style: 'dark',
-  center: [121.40, 31.258134],
+  center: [ 96.99215001469588, 29.281597225674773],
-  zoom: 1,
+  zoom: 2.194613775109773,
   maxZoom: 10
 });
-
+window.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
   .then((res) => res.json())
   .then((data) => {
+    data.features = data.features.filter(item=>{
+      return item.properties.capacity> 800;
+    })
     const pointLayer =
         new PointLayer({
         })
         .source(data).shape('circle')
-        .size('capacity', [0, 20])
+        .size('capacity', [0, 16])
-        .color('status', ['#ced1cc','#ffc83e','#ff8767','#dd54b6','#a45edb'])
+        .color('capacity',['#34B6B7', '#4AC5AF','#5FD3A6', '#7BE39E','#A1EDB8', '#CEF8D6'])
         .style({
-          opacity: 0.3,
+          opacity: 0.5,
-          strokeWidth: 1,
+          strokeWidth: 0
-
         })
 
         scene.addLayer(pointLayer);

examples/point/basic/index.zh.md

@@ -1,5 +1,5 @@
 ---
-title: 气泡图
+title: 气泡地图
 order: 0
 redirect_from:
   - /zh/examples

examples/point/chartmap/demo/chart.js

@@ -0,0 +1,139 @@
+import { Scene } from '@l7/scene';
+import { Marker } from '@l7/component'
+import G2Plot from '@antv/g2plot'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [-122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 5
+});
+
+// fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
+//   .then((res) => res.text())
+//   .then((data) => {
+//     data.nodes.forEach(function (item) {
+//       const el = document.createElement('div');
+//       const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
+
+//       const size = Math.max(Math.min(parseInt(total / 20000), 150), 30);
+//       const itemData = [{
+//         item: 'Agriculture',
+//         count: item.gdp.Agriculture,
+//         percent: item.gdp.Agriculture / total
+//       }, {
+//         item: 'Industry',
+//         count: item.gdp.Industry,
+//         percent: item.gdp.Industry / total
+//       }, {
+//         item: 'Service',
+//         count: item.gdp.Service,
+//         percent: item.gdp.Service / total
+//       }];
+
+//       const config = {
+//         "title": {
+//           "visible": false,
+//           "text": "环图",
+//           "style": {
+//             "fill": "rgba(0, 0, 0, 0.85)"
+//           }
+//         },
+//         "description": {
+//           "visible": false,
+//           "text": "一个简单的环图",
+//           "style": {
+//             "fill": "rgba(0, 0, 0, 0.85)",
+//             "bottom_margin": 10
+//           }
+//         },
+//         "padding": "auto",
+//         "legend": {
+//           "visible": false,
+//           "position": "top-left"
+//         },
+//         "tooltip": {
+//           "visible": false,
+//           "shared": false,
+//           "crosshairs": null
+//         },
+//         "xAxis": {
+//           "visible": true,
+//           "autoHideLabel": false,
+//           "autoRotateLabel": false,
+//           "autoRotateTitle": false,
+//           "grid": {
+//             "visible": false
+//           },
+//           "line": {
+//             "visible": false
+//           },
+//           "tickLine": {
+//             "visible": true
+//           },
+//           "label": {
+//             "visible": true
+//           },
+//           "title": {
+//             "visible": false,
+//             "offset": 12
+//           }
+//         },
+//         "yAxis": {
+//           "visible": true,
+//           "autoHideLabel": false,
+//           "autoRotateLabel": false,
+//           "autoRotateTitle": true,
+//           "grid": {
+//             "visible": true
+//           },
+//           "line": {
+//             "visible": false
+//           },
+//           "tickLine": {
+//             "visible": false
+//           },
+//           "label": {
+//             "visible": true
+//           },
+//           "title": {
+//             "visible": false,
+//             "offset": 12
+//           }
+//         },
+//         "label": {
+//           "visible": true,
+//           "type": "outer",
+//           "style": {
+//             "fill": "rgba(0, 0, 0, 0.65)"
+//           }
+//         },
+//         "width": 317,
+//         "height": 249,
+//         "forceFit": false,
+//         "radius": 1,
+//         "pieStyle": {
+//           "stroke": "white",
+//           "lineWidth": 1
+//         },
+//         "innerRadius": 0.74,
+//         "animation": false,
+//         "colorField": "x",
+//         "angleField": "y",
+//         "color": null
+//       }
+//       const plot = new G2Plot.Ring(el, {
+//         data: itemData,
+//         ...config,
+//       });
+//       plot.render();
+//       var popup = new L7.Popup({
+//         anchor: 'left'
+//       }).setText(item.name);
+//       new Marker({
+//         element: el
+//       }).setLnglat(item.coordinates).setPopup(popup).addTo(scene);
+//     });
+
+//   });

examples/point/chartmap/demo/marker.js

@@ -0,0 +1,37 @@
+import { Scene } from '@l7/scene';
+import { Marker } from '@l7/component'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 3
+});
+
+scene.on('loaded',()=>{
+  addMarkers();
+})
+
+function addMarkers() {
+  fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json')
+  .then((res) => res.json())
+  .then((nodes) => {
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].g !== '1') continue;
+      var el = document.createElement('label');
+      el.className = 'lableclass';
+      el.textContent = nodes[i].v;
+      el.style.background = getColor(nodes[i].v);
+      const marker = new Marker({
+        element: el
+      }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }).addTo(scene);;
+
+    }
+  })
+}
+
+
+  function getColor(v) {
+    return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';
+  }

examples/point/chartmap/demo/meta.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "normal.js",
+      "title": "海量点",
+      "screenshot":""
+
+    }
+  ]
+}

examples/point/chartmap/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 复合图表地图
+order: 7
+---

examples/point/cluster/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: "聚合地图"
+order: 6
+---

examples/point/image/demo/size.js

@@ -9,32 +9,28 @@ const scene = new Scene({
   center: [121.40, 31.258134],
   zoom: 15,
 });
-
+scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ');
+scene.addImage('02', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');
+scene.addImage('04', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ');
+scene.addImage('11', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');
+scene.addImage('15', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ');
+scene.addImage('07', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ');
+scene.addImage('16', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ');
+scene.addImage('06', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ');
+scene.addImage('08', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ');
+scene.addImage('17', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ');
+scene.addImage('05', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ');
+fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json')
   .then((res) => res.json())
   .then((data) => {
-  scene.addImage(
+
-    '00',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
-  );
-  scene.addImage(
-    '01',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
-  );
-  scene.addImage(
-    '02',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
-  );
    const imageLayer = new PointImageLayer()
-      .source(data, {
+      .source(data)
-        parser: {
+      .shape('w', function(w) {
-          type: 'json',
+        return w;
-          x: 'longitude',
-          y: 'latitude'
-        }
       })
-      .shape('name', ['00', '01','02'])
+      .size(20)
-      .size('unit_price', [30, 100])
        scene.addLayer(imageLayer);
   });
 

examples/point/image/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 符号图
+title: 符号地图
-order: 1
+order: 2
 ---

examples/point/scatter/demo/meta.json

@@ -0,0 +1,19 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "normal.js",
+      "title": "海量点",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "scatter.js",
+      "title": "定点图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
+
+    }
+  ]
+}

examples/point/scatter/demo/normal.js

@@ -0,0 +1,34 @@
+
+import { Scene } from '@l7/scene';
+import { PointNormalLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'dark',
+  center: [121.417463, 31.215175],
+  pitch: 0,
+  zoom: 11
+
+});
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const pointLayer =
+      new PointNormalLayer({
+      })
+      .source(data, {
+        parser: {
+          type: 'csv',
+          y: 'lat',
+          x: 'lng'
+        }
+      }).size(0.5)
+      .color('#080298')
+      .style({
+          opacity:1.,
+        })
+
+      scene.addLayer(pointLayer);
+
+  })

examples/point/scatter/demo/scater.js

@@ -0,0 +1,94 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [-122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 5.740491857794806
+});
+const colorObj = {
+  redyellow: [
+    '#8A191A', '#AE3235',
+    '#CC464B', '#E26A5D',
+    '#EC8765', '#F0A66C',
+    '#F4BC8F', '#FFCEA7',
+    '#FFE4CE', '#FFF2E8'
+  ],
+  yellow: [
+    '#7B320A', '#B35B21',
+    '#D2722E', '#F0883A',
+    '#FBA045', '#FAB04B',
+    '#FAC760', '#FBD78C',
+    '#FCE6B3', '#FCF3DB'
+  ],
+  blue_green: [
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+  ],
+  blue: [
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ],
+  purple: [
+    '#312B60', '#4A457E',
+    '#615C99', '#816CAD',
+    '#A67FB5', '#C997C7',
+    '#DEB8D4', '#F5D4E6',
+    '#FAE4F1', '#FFF3FC'
+  ],
+  color1: [
+    '#E4682F', '#FF8752',
+    '#FFA783', '#FFBEA8',
+    '#FFDCD6', '#EEF3FF',
+    '#C8D7F5', '#A5C1FC',
+    '#7FA7F9', '#5F8AE5'
+  ],
+  color2: [
+    '#F1646A', '#F48789',
+    '#F7A9AC', '#FBCCCD',
+    '#FDEEEE', '#EEF3FF',
+    '#C8DAFE', '#A5C1FC',
+    '#80A8FB', '#5B8EF8'
+  ],
+  color3: [
+    '#EEF3FF', '#C8DAFE',
+    '#A5C1FC', '#80A8FB',
+    '#5B8EF8', '#FCF6FA',
+    '#F5E4EF', '#F7CDDF',
+    '#ED9CBE', '#D1749B'
+  ]
+}
+fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
+  .then((res) => res.text())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data,{
+          parser:{
+            type:'csv',
+            x:'Longitude',
+            y:'Latitude'
+          }
+        })
+        .shape('circle')
+        .size(4)
+        .color('Magnitude',colorObj.yellow)
+        .style({
+          opacity: 0.5,
+          strokeWidth: 0,
+        })
+
+        scene.addLayer(pointLayer);
+
+  });
+
+

examples/point/scatter/demo/scatter.js

@@ -0,0 +1,94 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [-122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 5.740491857794806
+});
+const colorObj = {
+  redyellow: [
+    '#8A191A', '#AE3235',
+    '#CC464B', '#E26A5D',
+    '#EC8765', '#F0A66C',
+    '#F4BC8F', '#FFCEA7',
+    '#FFE4CE', '#FFF2E8'
+  ],
+  yellow: [
+    '#7B320A', '#B35B21',
+    '#D2722E', '#F0883A',
+    '#FBA045', '#FAB04B',
+    '#FAC760', '#FBD78C',
+    '#FCE6B3', '#FCF3DB'
+  ],
+  blue_green: [
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+  ],
+  blue: [
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ],
+  purple: [
+    '#312B60', '#4A457E',
+    '#615C99', '#816CAD',
+    '#A67FB5', '#C997C7',
+    '#DEB8D4', '#F5D4E6',
+    '#FAE4F1', '#FFF3FC'
+  ],
+  color1: [
+    '#E4682F', '#FF8752',
+    '#FFA783', '#FFBEA8',
+    '#FFDCD6', '#EEF3FF',
+    '#C8D7F5', '#A5C1FC',
+    '#7FA7F9', '#5F8AE5'
+  ],
+  color2: [
+    '#F1646A', '#F48789',
+    '#F7A9AC', '#FBCCCD',
+    '#FDEEEE', '#EEF3FF',
+    '#C8DAFE', '#A5C1FC',
+    '#80A8FB', '#5B8EF8'
+  ],
+  color3: [
+    '#EEF3FF', '#C8DAFE',
+    '#A5C1FC', '#80A8FB',
+    '#5B8EF8', '#FCF6FA',
+    '#F5E4EF', '#F7CDDF',
+    '#ED9CBE', '#D1749B'
+  ]
+}
+fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
+  .then((res) => res.text())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data,{
+          parser:{
+            type:'csv',
+            x:'Longitude',
+            y:'Latitude'
+          }
+        })
+        .shape('circle')
+        .size(4)
+        .color('Magnitude',colorObj.yellow)
+        .style({
+          opacity: 0.5,
+          strokeWidth: 0,
+        })
+
+        scene.addLayer(pointLayer);
+
+  });
+
+

examples/point/scatter/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: "等值线"
+order: 1
+---

examples/polygon/3d/demo/city.js

@@ -0,0 +1,121 @@
+import { Scene } from '@l7/scene';
+import { Polygon3DLayer  } from '@l7/layers'
+const colorObj = {
+  redyellow: [
+    '#8A191A', '#AE3235',
+    '#CC464B', '#E26A5D',
+    '#EC8765', '#F0A66C',
+    '#F4BC8F', '#FFCEA7',
+    '#FFE4CE', '#FFF2E8'
+  ],
+  yellow: [
+    '#7B320A', '#B35B21',
+    '#D2722E', '#F0883A',
+    '#FBA045', '#FAB04B',
+    '#FAC760', '#FBD78C',
+    '#FCE6B3', '#FCF3DB'
+  ],
+  blue_green: [
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+  ],
+  blue: [
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ],
+  purple: [
+    '#312B60', '#4A457E',
+    '#615C99', '#816CAD',
+    '#A67FB5', '#C997C7',
+    '#DEB8D4', '#F5D4E6',
+    '#FAE4F1', '#FFF3FC'
+  ],
+  color1: [
+    '#E4682F', '#FF8752',
+    '#FFA783', '#FFBEA8',
+    '#FFDCD6', '#EEF3FF',
+    '#C8D7F5', '#A5C1FC',
+    '#7FA7F9', '#5F8AE5'
+  ],
+  color2: [
+    '#F1646A', '#F48789',
+    '#F7A9AC', '#FBCCCD',
+    '#FDEEEE', '#EEF3FF',
+    '#C8DAFE', '#A5C1FC',
+    '#80A8FB', '#5B8EF8'
+  ],
+  color3: [
+    '#EEF3FF', '#C8DAFE',
+    '#A5C1FC', '#80A8FB',
+    '#5B8EF8', '#FCF6FA',
+    '#F5E4EF', '#F7CDDF',
+    '#ED9CBE', '#D1749B'
+  ]
+}
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'dark',
+  center: [120.173104, 30.244072],
+  pitch: 66.50572,
+  zoom: 15.79,
+  minZoom: 10
+});
+const polygon ={
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              114.05817031860352,
+              22.543714416963457
+            ],
+            [
+              114.07087326049805,
+              22.543714416963457
+            ],
+            [
+              114.07087326049805,
+              22.55504986643093
+            ],
+            [
+              114.05817031860352,
+              22.55504986643093
+            ],
+            [
+              114.05817031860352,
+              22.543714416963457
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
+fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new Polygon3DLayer ({
+      })
+      .source(data)
+      .shape('extrude')
+      .size('floor', [10, 200])
+      .color('rgba(242,246,250,0.96)')
+      .style({
+        opacity: 1.0
+      }).render();
+    scene.addLayer(layer);
+    console.log(layer);
+  });

examples/polygon/3d/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "polygon.js",
+      "title": "3D 建筑面",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JgXVSoV03n4AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/polygon/3d/demo/polygon.js

@@ -0,0 +1,30 @@
+import { Scene } from '@l7/scene';
+import { Polygon3DLayer  } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 15.05263,
+  type: 'amap',
+  style: 'dark',
+  center: [114.056128, 22.529272],
+  zoom: 14.2,
+});
+
+window.mapScene = scene;
+fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new Polygon3DLayer ({
+      })
+      .source(data)
+      .shape('fill')
+      .size('h20',[100, 120, 160, 200, 260, 500])
+      .color('h20', ['#816CAD',
+      '#A67FB5', '#C997C7',
+      '#DEB8D4', '#F5D4E6',
+      '#FAE4F1', '#FFF3FC'])
+      .style({
+        opacity: 1.0
+      });
+    scene.addLayer(layer);
+  });

examples/polygon/3d/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 3D填充图
+order: 0
+redirect_from:
+  - /zh/examples/polygon/
+---

examples/polygon/basic/demo/fill.js

@@ -0,0 +1,84 @@
+import { Scene } from '@l7/scene';
+import { PolygonLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [116.3237, 39.8829],
+  zoom: 8
+});
+const colorObj = {
+  redyellow: [
+    '#8A191A', '#AE3235',
+    '#CC464B', '#E26A5D',
+    '#EC8765', '#F0A66C',
+    '#F4BC8F', '#FFCEA7',
+    '#FFE4CE', '#FFF2E8'
+  ],
+  yellow: [
+    '#7B320A', '#B35B21',
+    '#D2722E', '#F0883A',
+    '#FBA045', '#FAB04B',
+    '#FAC760', '#FBD78C',
+    '#FCE6B3', '#FCF3DB'
+  ],
+  blue_green: [
+    '#094D4A', '#146968',
+    '#1D7F7E', '#289899',
+    '#34B6B7', '#4AC5AF',
+    '#5FD3A6', '#7BE39E',
+    '#A1EDB8', '#CEF8D6'
+  ],
+  blue: [
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ],
+  purple: [
+    '#312B60', '#4A457E',
+    '#615C99', '#816CAD',
+    '#A67FB5', '#C997C7',
+    '#DEB8D4', '#F5D4E6',
+    '#FAE4F1', '#FFF3FC'
+  ],
+  color1: [
+    '#E4682F', '#FF8752',
+    '#FFA783', '#FFBEA8',
+    '#FFDCD6', '#EEF3FF',
+    '#C8D7F5', '#A5C1FC',
+    '#7FA7F9', '#5F8AE5'
+  ],
+  color2: [
+    '#F1646A', '#F48789',
+    '#F7A9AC', '#FBCCCD',
+    '#FDEEEE', '#EEF3FF',
+    '#C8DAFE', '#A5C1FC',
+    '#80A8FB', '#5B8EF8'
+  ],
+  color3: [
+    '#EEF3FF', '#C8DAFE',
+    '#A5C1FC', '#80A8FB',
+    '#5B8EF8', '#FCF6FA',
+    '#F5E4EF', '#F7CDDF',
+    '#ED9CBE', '#D1749B'
+  ]
+}
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new PolygonLayer({
+      })
+      .source(data)
+       .color('unit_price', colorObj.blue_green)
+       .shape('fill')
+       .style({
+        opacity: 1
+      })
+    scene.addLayer(layer);
+    console.log(layer);
+  });

examples/polygon/basic/demo/meta.json

@@ -5,9 +5,14 @@
   },
   "demos": [
     {
-      "filename": "point.js",
+      "filename": "polygon.js",
-      "title": "面图层",
+      "title": "全国地图行政区划",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*AoD6SZ4kz0wAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "fill.js",
+      "title": "分类填充图",
+      "screenshot": ""
     }
   ]
 }

examples/polygon/basic/demo/polygon.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [121.40, 31.258134],
+  center: [102.430994, 29.877025],
-  zoom: 3,
+  zoom: 3.52,
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')

examples/polygon/basic/index.zh.md

@@ -1,5 +1,5 @@
 ---
-title: 面图层
+title: 填充地图
 order: 0
 redirect_from:
   - /zh/examples

examples/raster/basic/demo/image.js

@@ -0,0 +1,25 @@
+import { Scene } from '@l7/scene';
+import { ImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 13,
+});
+
+const layer = new ImageLayer({});
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'image',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+scene.on('loaded',()=>{
+  scene.addLayer(layer);
+})
+

examples/raster/basic/demo/line.js

@@ -1,39 +0,0 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 13,
-});
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1)
-        .shape('line')
-        .color(
-          'ELEV',
-          [
-            '#E8FCFF',
-            '#CFF6FF',
-            '#A1E9ff',
-            '#65CEF7',
-            '#3CB1F0',
-            '#2894E0',
-            '#1772c2',
-            '#105CB3',
-            '#0D408C',
-            '#002466',
-          ].reverse(),
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/raster/basic/demo/meta.json

@@ -1,13 +1,17 @@
 {
   "title": {
-    "zh": "图库",
+    "zh": "栅格图层",
     "en": "Gallery"
   },
   "demos": [
     {
-      "filename": "line.js",
+      "filename": "image.js",
-      "title": "线图层",
+      "title": "图片",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "raster.js",
+      "title": "地形"
     }
   ]
 }

examples/raster/basic/demo/raster.js

@@ -0,0 +1,70 @@
+import { Scene } from '@l7/scene';
+import { RasterLayer } from '@l7/layers'
+// import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.2680, 30.3628],
+  zoom: 13,
+});
+
+async function addLayer() {
+  const tiffdata = await this.getTiffData();
+  const layer = new RasterLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        min: 0,
+        max: 8000,
+        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+      },
+    })
+    .style({
+      opacity: 0.8,
+      rampColors: {
+        colors: [
+          '#002466',
+          '#0D408C',
+          '#105CB3',
+          '#1A76C7',
+          '#2894E0',
+          '#3CB4F0',
+          '#65CEF7',
+          '#98E3FA',
+          '#CFF6FF',
+          '#E8FCFF',
+        ],
+        positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
+      },
+    });
+    return layer;
+}
+addLayer()
+scene.on('loaded',()=>{
+  const layer = addLayer();
+  scene.addLayer(layer);
+})
+
+ async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height,
+    min: 0,
+    max: 8000,
+  };
+}

examples/raster/basic/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: 栅格图层
 order: 0
+redirect_from:
+  - /zh/examples/raster/
 ---

examples/scene/control/demo/popup.js

@@ -0,0 +1,57 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+import { Scale, Zoom, Layers } from '@l7/component';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('name',['#49B5AD', "#5B8FF9"])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        })
+
+      scene.addLayer(pointLayer);
+      var overlayers = {
+        "围栏填充": pointLayer,
+      };
+      var baseLayers = {
+        "基础地图": pointLayer,
+      };
+      const layersControl = new Layers({
+        overlayers: overlayers,
+        baseLayers,
+      });
+
+      scene.addControl(layersControl);
+
+  });
+
+
+
+
+  const zoomControl = new Zoom();
+  const scaleControl = new Scale();
+
+  scene.addControl(zoomControl);
+  scene.addControl(scaleControl);
+

examples/scene/map/demo/amap.js

@@ -1,9 +0,0 @@
-import { Scene } from './node_modules/@l7/scene';
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [121.40, 31.258134],
-  zoom: 5,
-});

examples/tutorial/control/demo/mapbox.js

@@ -10,7 +10,9 @@ const scene = new Scene({
 });
 
 const zoomControl = new Zoom();
-const scaleControl = new Scale();
+const scaleControl = new Scale({
+  position:'rightbottom',
+});
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
 

examples/tutorial/control/demo/popup.js

@@ -0,0 +1,57 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+import { Scale, Zoom, Layers } from '@l7/component';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('name',['#49B5AD', "#5B8FF9"])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        })
+
+      scene.addLayer(pointLayer);
+      var overlayers = {
+        "围栏填充": pointLayer,
+      };
+      var baseLayers = {
+        "基础地图": pointLayer,
+      };
+      const layersControl = new Layers({
+        overlayers: overlayers,
+        baseLayers,
+      });
+
+      scene.addControl(layersControl);
+
+  });
+
+
+
+
+  const zoomControl = new Zoom();
+  const scaleControl = new Scale();
+
+  scene.addControl(zoomControl);
+  scene.addControl(scaleControl);
+

examples/tutorial/control/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 组件
-order: 0
+order: 2
 ---
 
 

examples/tutorial/data/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: 数据
-order: 0
+order: 1
 ---

gatsby-browser.js

@@ -1,5 +1,9 @@
-import './packages/component/src/css/l7.css';
-window.scene = require('@l7/scene');
-window.layers= require('@l7/layers');
-window.component= require('@l7/component');
 
+import './packages/component/src/css/l7.css';
+import './site/css/demo.css'
+require('./packages/component/src/css/l7.css');
+// window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js')
+window.scene = require('./packages/scene/src');
+window.layers= require('./packages/layers/src');
+window.component= require('./packages/component/src');
+window.g2plot = require('@antv/g2plot');

gatsby-config.js

@@ -4,6 +4,11 @@ module.exports = {
       resolve: '@antv/gatsby-theme-antv',
       options: {
         pathPrefix: '/gatsby-theme-antv',
+        GATrackingId: 'UA-148148901-7',
+        pathPrefix: '/l7',
+        theme: {
+          'primary-color': '#722ED1',
+        },
       },
     },
   ],
@@ -84,22 +89,6 @@ module.exports = {
           en: 'Gallery',
         },
       },
-      {
-        slug: 'data',
-        icon: 'data',
-        title: {
-          zh: '数据源',
-          en: 'data',
-        },
-      },
-      {
-        slug: 'scene',
-        icon: 'map',
-        title: {
-          zh: '场景',
-          en: 'Scene',
-        },
-      },
       {
         slug: 'point',
         icon: 'point',
@@ -142,19 +131,17 @@ module.exports = {
         },
       },
       {
-        slug: 'marker',
+        slug: 'tutorial',
-        icon: 'mapmarker',
+        icon: 'map',
         title: {
-          zh: '标注',
+          zh: '教程示例',
-          en: 'Marker',
+          en: 'tutorial',
         },
-      }
+      },
     ],
     exampleContainer: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
     playground: {
       container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
-      playgroundDidMount: 'console.log("playgroundDidMount");',
-      playgroundWillUnmount: 'console.log("scene");',
     },
   },
 

gatsby-node.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+exports.onCreateWebpackConfig = ({ getConfig, stage, plugins }) => {
+  const config = getConfig();
+  config.resolve.extensions.push('.glsl');
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@l7/core': path.resolve(__dirname, 'packages/core/src'),
+    '@l7/component': path.resolve(__dirname, 'packages/component/src'),
+    '@l7/layers': path.resolve(__dirname, 'packages/layers/src'),
+    '@l7/maps': path.resolve(__dirname, 'packages/maps/src'),
+    '@l7/renderer': path.resolve(__dirname, 'packages/renderer/src'),
+    '@l7/scene': path.resolve(__dirname, 'packages/scene/src'),
+    '@l7/source': path.resolve(__dirname, 'packages/source/src'),
+    '@l7/utils': path.resolve(__dirname, 'packages/utils/src'),
+  };
+};

package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/antvis/L7"
   },
   "devDependencies": {
-    "@antv/gatsby-theme-antv": "^0.9.7",
+    "@antv/gatsby-theme-antv": "^0.9.52",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-decorators": "^7.6.0",
@@ -54,6 +54,7 @@
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.0.0-beta6",
     "gatsby": "^2.17.7",
+    "gatsby-remark-prettier": "^1.0.0",
     "geotiff": "^1.0.0-beta.6",
     "gh-pages": "^2.1.1",
     "gl": "^4.4.0",
@@ -103,7 +104,7 @@
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "start": "export NODE_ENV=site && npm run site:develop",
+    "start": "NODE_ENV=site npm run site:develop",
     "site:develop": "gatsby develop --open -H 0.0.0.0",
     "site:build": "npm run site:clean && export NODE_ENV=site &&  gatsby build --prefix-paths",
     "site:clean": "gatsby clean",
@@ -144,5 +145,9 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "@antv/g2plot": "^0.1.0-beta.5",
+    "geotiff": "^1.0.0-beta.6"
   }
 }

packages/component/src/css/l7.css

@@ -791,8 +791,8 @@
   padding: 8px;
   }
 .l7-control-layers label input[type="radio"], input[type="checkbox"]{
-  width: 19px;
+  width: 14px;
-  height: 19px;
+  height: 14px;
   margin: 0;
   vertical-align: middle;
   -ms-transform: scale(1.5); /* IE 9 */

packages/core/src/services/layer/ILayerService.ts

@@ -1,9 +1,11 @@
 import { SyncBailHook, SyncHook } from 'tapable';
+import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
 import { IModel } from '../renderer/IModel';
 import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer';
 import { ISource, ISourceCFG } from '../source/ISourceService';
 import {
+  IAnimateOption,
   IEncodeFeature,
   IScale,
   IScaleOptions,
@@ -61,6 +63,8 @@ export interface ILayer {
   size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
+  label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
+  animate(option: IAnimateOption): ILayer;
   // pattern(field: string, value: StyleAttributeOption): ILayer;
   // filter(field: string, value: StyleAttributeOption): ILayer;
   // active(option: ActiveOption): ILayer;
@@ -145,8 +149,11 @@ export interface ILayerInitializationOptions {
  * 提供 Layer 管理服务
  */
 export interface ILayerService {
+  clock: Clock;
   add(layer: ILayer): void;
   initLayers(): void;
+  startAnimate(): void;
+  stopAnimate(): void;
   getLayers(): ILayer[];
   getLayer(name: string): ILayer | undefined;
   remove(layer: ILayer): void;

packages/core/src/services/layer/IStyleAttributeService.ts

@@ -61,6 +61,13 @@ export enum AttributeType {
   Uniform,
 }
 
+export interface IAnimateOption {
+  enable: boolean;
+  interval?: number;
+  duration?: number;
+  trailLength?: number;
+}
+
 export interface IEncodeFeature {
   color?: Color;
   size?: number | number[];

packages/core/src/services/layer/LayerService.ts

@@ -1,14 +1,21 @@
 import { inject, injectable } from 'inversify';
 import { container, ILayer } from '../..';
 import { TYPES } from '../../types';
+import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
 import { IRendererService } from '../renderer/IRendererService';
 import { ILayerService } from './ILayerService';
 
 @injectable()
 export default class LayerService implements ILayerService {
+  public clock = new Clock();
+
   private layers: ILayer[] = [];
 
+  private layerRenderID: number;
+
+  private animateInstanceCount: number = 0;
+
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -17,6 +24,8 @@ export default class LayerService implements ILayerService {
 
   public add(layer: ILayer) {
     this.layers.push(layer);
+    this.initPlugin(layer);
+    layer.init();
   }
 
   public initLayers() {
@@ -72,6 +81,24 @@ export default class LayerService implements ILayerService {
     this.layers = [];
   }
 
+  public startAnimate() {
+    if (this.animateInstanceCount++ === 0) {
+      this.runRender();
+    }
+  }
+
+  public stopAnimate() {
+    if (--this.animateInstanceCount === 0) {
+      this.stopRender();
+    }
+  }
+
+  private initPlugin(layer: ILayer) {
+    for (const plugin of layer.plugins) {
+      plugin.apply(layer);
+    }
+  }
+
   private clear() {
     this.renderService.clear({
       color: [0, 0, 0, 0],
@@ -79,4 +106,13 @@ export default class LayerService implements ILayerService {
       framebuffer: null,
     });
   }
+
+  private runRender() {
+    this.renderLayers();
+    this.layerRenderID = requestAnimationFrame(this.renderLayers.bind(this));
+  }
+
+  private stopRender() {
+    cancelAnimationFrame(this.layerRenderID);
+  }
 }

packages/core/src/services/scene/SceneService.ts

@@ -119,6 +119,9 @@ export default class Scene extends EventEmitter implements ISceneService {
       // 重新绑定非首次相机更新事件
       this.map.onCameraChanged(this.handleMapCameraChanged);
       this.logger.info('map loaded');
+
+      // scene 创建完成自动调用render 方法
+      this.render();
     });
 
     /**
@@ -161,14 +164,13 @@ export default class Scene extends EventEmitter implements ISceneService {
       await this.initPromise;
       // 初始化 marker 容器 TODO: 可以放到 map 初始化方法中？
       this.map.addMarkerContainer();
-      this.layerService.initLayers();
+      this.logger.info(' render inited');
-
       this.inited = true;
       this.emit('loaded');
     }
 
     this.layerService.renderLayers();
-    // this.logger.info('render');
+    this.logger.info('render');
   }
 
   public destroy() {

packages/core/src/services/shader/ShaderModuleService.ts

@@ -5,9 +5,11 @@ import { IModuleParams, IShaderModuleService } from './IShaderModuleService';
 
 import common from '../../shaders/common.glsl';
 import decode from '../../shaders/decode.glsl';
+import light from '../../shaders/light.glsl';
 import lighting from '../../shaders/lighting.glsl';
 import pickingFrag from '../../shaders/picking.frag.glsl';
 import pickingVert from '../../shaders/picking.vert.glsl';
+import project from '../../shaders/project.glsl';
 import projection from '../../shaders/projection.glsl';
 import sdf2d from '../../shaders/sdf_2d.glsl';
 
@@ -26,8 +28,10 @@ export default class ShaderModuleService implements IShaderModuleService {
     this.registerModule('common', { vs: common, fs: common });
     this.registerModule('decode', { vs: decode, fs: '' });
     this.registerModule('projection', { vs: projection, fs: '' });
+    this.registerModule('project', { vs: project, fs: '' });
     this.registerModule('sdf_2d', { vs: '', fs: sdf2d });
     this.registerModule('lighting', { vs: lighting, fs: '' });
+    this.registerModule('light', { vs: light, fs: '' });
     this.registerModule('picking', { vs: pickingVert, fs: pickingFrag });
   }
 

packages/core/src/shaders/light.glsl

@@ -0,0 +1,25 @@
+#define ambientRatio 0.5
+#define diffuseRatio 0.3
+#define specularRatio 0.2
+
+
+float calc_lighting(vec4 pos) {
+
+    vec3 worldPos = vec3(pos * u_ModelMatrix);
+
+    vec3 worldNormal = vec3(vec4(a_Normal,1.0));
+      // //cal light weight
+    vec3 viewDir = normalize(u_CameraPosition - worldPos);
+
+    vec3 lightDir = normalize(vec3(1, -10.5, 12));
+
+    vec3 halfDir = normalize(viewDir+lightDir);
+      // //lambert
+    float lambert = dot(worldNormal, lightDir);
+        //specular
+    float specular = pow( max(0.0, dot(worldNormal, halfDir)), 32.0);
+        //sum to light weight
+    float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
+
+    return lightWeight;
+}

packages/core/src/shaders/project.glsl

@@ -0,0 +1,34 @@
+
+#define E 2.718281828459045
+vec2 ProjectFlat(vec2 lnglat){
+  float maxs=85.0511287798;
+  float lat=max(min(maxs,lnglat.y),-maxs);
+  float scale= 268435456.;
+  float d=PI/180.;
+  float x=lnglat.x*d;
+  float y=lat*d;
+  y=log(tan((PI/4.)+(y/2.)));
+  
+  float a=.5/PI,
+  b=.5,
+  c=-.5/PI;
+  d=.5;
+  x=scale*(a*x+b);
+  y=scale*(c*y+d);
+  return vec2(x,y);
+}
+
+vec2 unProjectFlat(vec2 px){
+  float a=.5/PI;
+  float b=.5;
+  float c=-.5/PI;
+  float d=.5;
+  float scale = 268435456.;
+  float x=(px.x/scale-b)/a;
+  float y=(px.y/scale-d)/c;
+  y=(atan(pow(E,y))-(PI/4.))*2.;
+  d=PI/180.;
+  float lat=y/d;
+  float lng=x/d;
+  return vec2(lng,lat);
+}

packages/core/src/shaders/projection.glsl

@@ -41,6 +41,7 @@ float project_scale(float meters) {
   return meters * u_PixelsPerMeter.z;
 }
 
+
 // offset coords -> world coords
 vec4 project_offset(vec4 offset) {
   float dy = offset.y;
@@ -103,6 +104,14 @@ vec2 project_pixel_size_to_clipspace(vec2 pixels) {
   return offset * u_FocalDistance;
 }
 
+float project_pixel(float pixel) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
+    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+    // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
+    return pixel * pow(2.0, (19.0 - u_Zoom));
+  }
+  return pixel;
+}
 vec2 project_pixel(vec2 pixel) {
   if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
     || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
@@ -132,10 +141,11 @@ vec4 project_common_position_to_clipspace(vec4 position) {
 
 vec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {
   vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);
+
   if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
     u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
     // Needs to be divided with project_uCommonUnitsPerMeter
-    pos.w /= u_PixelsPerMeter.z;
+     pos.w = pos.w / u_PixelsPerMeter.z;
   }
   return pos;
 }