Merge pull request #780 from antvis/feat-yanxiong

feat: 新增Control position：topcenter、bottomcenter、leftcenter、rightcenter

.gitignore

@@ -72,6 +72,7 @@ es/
 .DS_Store
 public
 .cache
+.idea
 
 package-lock.json
 git_log.sh
@@ -87,4 +88,4 @@ yarn.lock
 publish.sh
 latest.sh
 beta.sh
-mini.sh
+mini.sh

docs/api/renderer/three.zh.md

@@ -45,7 +45,7 @@ const threeJSLayer = new ThreeLayer({
     let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
     let cubeMaterial = new THREE.MeshNormalMaterial();
     let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-    
+
     layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
     threeScene.add(cube);
   },
@@ -63,46 +63,53 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与
 ## 构造函数 new ThreeLayer
 
 ### onAddMeshes
+
 该方法接受两个参数 threeScene: THREE.Scene, layer: ThreeLayer
+
 - threeScene: 这是普通的 threejs 场景对象
 - layer: 这是 L7 提供的 threeLayer 对象，上面挂载了 threejs 空间适配到地图空间所需要的方法
 
-
 ## ThreeLayer
+
 用户新建的图层对象，同时也会在 onAddMesh 方法的第二个参数返回。
 
 以下是挂载在 ThreeLayer 实例上的适配方法。
 
 ### getModelMatrix(lnglat, altitude, rotation, scale): Matrix
-  - lnglat: [number, number]  经纬度
-  - altitude: number = 0      相对高度
-  - rotation: [number, number, number] = [0, 0, 0]  旋转角度
-  - scale: [number, number, number] = [1, 1, 1]     缩放比例
+
+- lnglat: [number, number] 经纬度
+- altitude: number = 0 相对高度
+- rotation: [number, number, number] = [0, 0, 0] 旋转角度
+- scale: [number, number, number] = [1, 1, 1] 缩放比例
 
 用户可以通过该方法计算在对应经纬度点位、相对高度、旋转角度和缩放的模型矩阵
 该方法的返回值是 THREE.Matrix4 类型的矩阵
 
 ### applyObjectLngLat(object, lnglat, altibute): void
-  - object: Object3D  threejs 对象
-  - lnglat: ILngLat[number, number]   经纬度
-  - altitude = 0  相对高度
+
+- object: Object3D threejs 对象
+- lnglat: ILngLat[number, number] 经纬度
+- altitude = 0 相对高度
 
 用户可以通过该方法将 object 对象从当前位置向指定位置移动（地图经纬度坐标）
 
 ### setObjectLngLat(object, lnglat, altibute): void
-  - object: Object3D  threejs 对象
-  - lnglat: ILngLat[number, number]   经纬度
-  - altitude = 0  相对高度
+
+- object: Object3D threejs 对象
+- lnglat: ILngLat[number, number] 经纬度
+- altitude = 0 相对高度
 
 用户可以通过该方法设置 object 对象的位置（地图经纬度坐标）
 
 ### lnglatToCoord(lnglat): [number, number]
-  - lnglat: ILngLat[number, number]   经纬度
+
+- lnglat: ILngLat[number, number] 经纬度
 
 用户可以通过该方法将经纬度坐标转化成 threejs 世界坐标
 
 ### adjustMeshToMap(object): void
-  - object: Object3D threejs 对象
+
+- object: Object3D threejs 对象
 
 用户在添加 threejs 对象的前可以通过该方法调整 3D 对象的姿态，保证添加对象能正确显示
 
@@ -111,10 +118,11 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与
 ✨ 用户不一定使用该方法调整物体的姿态，也可以自己实现
 
 ### setMeshScale(object, x, y, z): void
-  - object: Object3D  threejs 对象
-  - x: number = 1     x 轴方向的缩放比例
-  - y: number = 1     y 轴方向的缩放比例
-  - z: number = 1     z 轴方向的缩放比例
+
+- object: Object3D threejs 对象
+- x: number = 1 x 轴方向的缩放比例
+- y: number = 1 y 轴方向的缩放比例
+- z: number = 1 z 轴方向的缩放比例
 
 用户可以通过该方法设置 threejs 对象缩放
 
@@ -123,7 +131,8 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与
 ✨ 同样的，可以直接修改 threejs 的 position、rotation 等调整 3D 对象的姿态
 
 ### addAnimateMixer(mixer): void
-  - mixer: AnimationMixer threejs 的动画混合器
+
+- mixer: AnimationMixer threejs 的动画混合器
 
 用户通过该方法管理加载模型的动画
 
@@ -132,6 +141,7 @@ L7 将 threejs 的引用封装成一个特殊的图层对象，在使用上与
 用户可以使用 threejs 提供的能力加载其支持的任意模型
 
 ### 简单案例
+
 ✨ 以加载 gltf 模型为例
 
 ```javascript
@@ -166,4 +176,4 @@ const threeJSLayer = new ThreeLayer({
 }).source(data)
 .animate(true) // 若需要播放模型动画，请开启动画模式（或者场景中已经存在开启动画的图层）
 
-```
+```

packages/component/src/control/BaseControl.ts

@@ -4,19 +4,14 @@ import {
   ILayerService,
   IMapService,
   IRendererService,
-  PositionName,
+  PositionType,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
 
-export enum PositionType {
-  'TOPRIGHT' = 'topright',
-  'TOPLEFT' = 'topleft',
-  'BOTTOMRIGHT' = 'bottomright',
-  'BOTTOMLEFT' = 'bottomleft',
-}
+export { PositionType } from '@antv/l7-core';
 
 let controlId = 0;
 export default class Control extends EventEmitter {
@@ -45,7 +40,7 @@ export default class Control extends EventEmitter {
     };
   }
 
-  public setPosition(position: PositionName = 'bottomright') {
+  public setPosition(position: PositionType = PositionType.BOTTOMRIGHT) {
     // 考虑组件的自动布局，需要销毁重建
     const controlService = this.controlService;
     if (controlService) {

packages/core/src/services/component/ControlService.ts

@@ -72,16 +72,20 @@ export default class ControlService implements IControlService {
       this.container,
     ));
 
-    function createCorner(vSide: string, hSide: string) {
-      const className = l + vSide + ' ' + l + hSide;
-
-      corners[vSide + hSide] = DOM.create('div', className, container);
+    function createCorner(vSideList: string[] = []) {
+      const className = vSideList.map((item) => l + item).join(' ');
+      corners[vSideList.join('')] = DOM.create('div', className, container);
     }
 
-    createCorner('top', 'left');
-    createCorner('top', 'right');
-    createCorner('bottom', 'left');
-    createCorner('bottom', 'right');
+    createCorner(['top', 'left']);
+    createCorner(['top', 'right']);
+    createCorner(['bottom', 'left']);
+    createCorner(['bottom', 'right']);
+
+    createCorner(['top', 'center']);
+    createCorner(['right', 'center']);
+    createCorner(['left', 'center']);
+    createCorner(['bottom', 'center']);
   }
 
   private clearControlPos() {

packages/core/src/services/component/IControlService.ts

@@ -4,13 +4,21 @@ export enum PositionType {
   'TOPLEFT' = 'topleft',
   'BOTTOMRIGHT' = 'bottomright',
   'BOTTOMLEFT' = 'bottomleft',
+  'TOPCENTER' = 'topcenter',
+  'BOTTOMCENTER' = 'bottomcenter',
+  'LEFTCENTER' = 'leftcenter',
+  'RIGHTCENTER' = 'rightcenter',
 }
 
 export type PositionName =
   | 'topright'
   | 'topleft'
   | 'bottomright'
-  | 'bottomleft';
+  | 'bottomleft'
+  | 'topcenter'
+  | 'bottomcenter'
+  | 'leftcenter'
+  | 'rightcenter';
 export interface IControlOption {
   name: string;
   position: PositionName;

stories/Components/Components.stories.tsx

@@ -7,6 +7,7 @@ import MarkerLayerComponent from './components/markerlayer';
 import Popup from './components/Popup';
 import Scale from './components/Scale';
 import Zoom from './components/Zoom';
+import Position from './components/Position';
 // @ts-ignore
 storiesOf('UI 组件', module)
   .add('Zoom', () => <Zoom />)
@@ -15,4 +16,5 @@ storiesOf('UI 组件', module)
   .add('Chart', () => <Chart />)
   .add('Popup', () => <Popup />)
   .add('MarkerLayer', () => <MarkerLayerComponent />)
-  .add('ClusterMarkerLayer', () => <ClusterMarkerLayer />);
+  .add('ClusterMarkerLayer', () => <ClusterMarkerLayer />)
+  .add('Position', () => <Position />);

stories/Components/components/Position.tsx

@@ -0,0 +1,118 @@
+// @ts-ignore
+import { Layers, PointLayer, PolygonLayer, Scale, Scene, Zoom } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class ScaleComponent extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+    );
+    const response2 = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response2.json();
+    const data = await response.json();
+    const scene = new Scene({
+      id: 'map',
+      logoVisible: false,
+      map: new Mapbox({
+        style: 'dark',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+    this.scene = scene;
+    const layer = new PolygonLayer({
+      name: '01',
+    });
+
+    layer
+      .source(data)
+      .size('name', [0, 10000, 50000, 30000, 100000])
+      .color('name', [
+        '#2E8AE6',
+        '#69D1AB',
+        '#DAF291',
+        '#FFD591',
+        '#FF7A45',
+        '#CF1D49',
+      ])
+      .shape('fill')
+      .select(true)
+      .style({
+        opacity: 1.0,
+      });
+    scene.addLayer(layer);
+    const pointLayer = new PointLayer({
+      name: '02',
+      enablePropagation: true,
+    })
+      .source(pointsData, {
+        cluster: true,
+      })
+      .shape('circle')
+      .scale('point_count', {
+        type: 'quantile',
+      })
+      .size('point_count', [5, 10, 15, 20, 25])
+      .animate(false)
+      .active(false)
+      .color('yellow')
+      .style({
+        opacity: 0.5,
+        strokeWidth: 1,
+      });
+    scene.addLayer(pointLayer);
+    layer.on('click', (e) => {
+      console.log(1, e);
+      // layer.setSelect(e.featureId);
+    });
+    pointLayer.on('click', (e) => {
+      console.log(2, e);
+    });
+    pointLayer.on('mouseout', (e) => {
+      console.log(2, e);
+    });
+    const scaleControl = new Scale({
+      position: 'leftcenter',
+    });
+    const layers = {
+      点图层: pointLayer,
+      面图层: layer,
+    };
+    const layerControl = new Layers({
+      overlayers: layers,
+      position: 'leftcenter',
+    });
+
+    scene.addControl(scaleControl);
+    scene.addControl(layerControl);
+    const zoomControl = new Zoom({
+      position: 'leftcenter',
+    });
+    scene.addControl(zoomControl);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}