Merge pull request #106 from antvis/update_docs

fix(map): temporarily closed  amap offset coordinate

.storybook/webpack.config.js

@@ -1,9 +1,9 @@
 module.exports = ({ config }) => {
 
-  // config.module.rules.push({
-  //   test: /\.glsl$/,
-  //   loader: 'raw-loader'
-  // });
+  config.module.rules.push({
+    test: /\.glsl$/,
+    loader: 'raw-loader'
+  });
 
   // config.module.rules.push({
   //   test: /\.worker\.(js|ts)$/,

packages/component/src/control/BaseControl.ts

@@ -48,7 +48,7 @@ export default class Control extends EventEmitter {
     };
   }
   public setPosition(position: PositionName) {
-    // FIXME: 只是改变位置不需要销毁再重建吧
+    // 考虑组件的自动布局，需要销毁重建
     // const controlService = this.controlService;
     // if (controlService) {
     //   controlService.removeControl(this);

packages/core/src/shaders/projection.glsl

@@ -105,8 +105,7 @@ vec2 project_pixel_size_to_clipspace(vec2 pixels) {
 }
 
 float project_pixel(float pixel) {
-  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
-    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {
     // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
     return pixel * pow(2.0, (19.0 - u_Zoom));
   }

packages/maps/src/amap/index.ts

@@ -33,7 +33,7 @@ let amapLoaded = false;
  * 高德地图脚本加载成功等待队列，成功之后依次触发
  */
 let pendingResolveQueue: Array<() => void> = [];
-const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
+const LNGLAT_OFFSET_ZOOM_THRESHOLD = 20; // 暂时关闭 fix 统一不同坐标系，不同底图的高度位置
 
 /**
  * AMapService

stories/Layers/Layers.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Arc2DLineDemo from './components/Arc2DLine';
 import ArcLineDemo from './components/Arcline';
+import Column from './components/column';
 import HeatMapDemo from './components/HeatMap';
 import GridHeatMap from './components/HeatmapGrid';
 import LineLayer from './components/Line';
@@ -16,6 +17,7 @@ import RasterLayerDemo from './components/RasterLayer';
 storiesOf('图层', module)
   .add('点图层', () => <PointDemo />)
   .add('3D点', () => <Point3D />)
+  .add('Column', () => <Column />)
   .add('图片标注', () => <PointImage />)
   .add('面3d图层', () => <Polygon3D />)
   .add('线图层', () => <LineLayer />)

stories/Layers/components/column.tsx

@@ -0,0 +1,71 @@
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+// @ts-ignore
+import data from '../data/data.json';
+export default class Column extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 66.02383,
+        style: 'dark',
+        center: [ 121.400257, 31.25287 ],
+        zoom: 14.55,
+        rotation: 134.9507
+      })
+    });
+
+    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('name', [
+            'cylinder',
+            'triangleColumn',
+            'hexagonColumn',
+            'squareColumn'
+          ])
+          .size('unit_price', h => {
+            return [ 6, 6, h / 500];
+          })
+          .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
+          .style({
+            opacity: 1.0
+          });
+
+        scene.addLayer(pointLayer);
+   })
+}
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}