Merge pull request #259 from antvis/l7-draw

L7 draw

babel.config.js

@@ -44,7 +44,7 @@ module.exports = api => {
         {
           // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
           // useBuiltIns: 'usage',
-          ...isCDNBundle ? { corejs: '2.0.0' } : {},
+          ...isCDNBundle ? { corejs: '3.0.0' } : {},
           useBuiltIns: isCDNBundle ? 'usage' : false,
           // set `modules: false` when building CDN bundle, let rollup do commonjs works
           // @see https://github.com/rollup/rollup-plugin-babel#modules

docs/api/scene.en.md

@@ -323,6 +323,14 @@ scene.setPitch(pitch);
 scene.fitBounds([112, 32, 114, 35]);
 ```
 
+### getContainer
+
+获取地图容器 return htmlElement
+
+```javascript
+scene.getContainer();
+```
+
 ### removeLayer
 
 移除 layer

docs/api/scene.zh.md

@@ -208,6 +208,14 @@ scene.getPitch();
 
 return {number} pitch
 
+### getContainer
+
+获取地图容器 return htmlElement
+
+```javascript
+scene.getContainer();
+```
+
 ### setMapStyle
 
 参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致

examples/react/covid/demo/meta.json

@@ -7,7 +7,7 @@
     {
       "filename": "covid_grid.tsx",
       "title": "世界地图网格背景",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*YYNtRZpxH_4AAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*CSUXTIYXXFwAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "covid_animate.tsx",

package.json

@@ -149,7 +149,7 @@
     "coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
     "tsc": "tsc",
     "watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs NODE_ENV=production babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "bundle": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --environment BUILD:production,MINIFY:true",
+    "bundle": "cross-env BABEL_ENV=bundle NODE_ENV=production node_modules/.bin/rollup -c ./build/rollup.config.js --environment BUILD:production,MINIFY:true",
     "bundle-dev": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c  ./build/rollup.config.js  --environment 'BUILD:production,MINIFY:false'",
     "bundle:watch": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch",
     "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
@@ -175,7 +175,6 @@
     }
   },
   "resolutions": {
-    "../core-js": "3",
     "d3-array": "1"
   },
   "tnpm": {

packages/draw/package.json

@@ -31,6 +31,10 @@
     "lint:ts": "run-p -c lint:ts-*",
     "test": "jest"
   },
+  "dependencies": {
+    "@antv/l7": "^2.1.3",
+    "@babel/runtime": "^7.7.7"
+  },
   "bugs": {
     "url": "https://github.com/antvis/L7/issues"
   },

packages/draw/src/modes/draw_circle.ts

@@ -0,0 +1,22 @@
+import { ILayer } from '@antv/l7';
+import DrawFeature from './draw_feature';
+
+export default class DrawCircle extends DrawFeature {
+  private center: [number, number];
+  private drawCircleLayer: ILayer;
+  protected onDragStart() {
+    // @ts-ignore
+    this.scene.map.dragdrag.disable();
+  }
+  protected onDragging() {
+    return;
+  }
+
+  protected onDragEnd() {
+    return;
+  }
+
+  protected onClick() {
+    return;
+  }
+}

packages/draw/src/modes/draw_feature.ts

@@ -1,3 +1,4 @@
+import { Scene } from '@antv/l7';
 import { Feature, FeatureCollection } from '@turf/helpers';
 import DrawSource from '../source';
 
@@ -5,26 +6,35 @@ export interface IDrawOption {
   data: FeatureCollection;
 }
 
+export type DrawStatus = 'Drawing' | 'Selected' | 'Edit' | 'Finish';
+
 export default abstract class DrawFeature {
   private source: DrawSource;
-  constructor(options: IDrawOption) {
+  private scene: Scene;
+  constructor(scene: Scene, options: IDrawOption) {
     const { data } = options;
+    this.scene = scene;
     this.source = new DrawSource(data);
   }
-
-  protected onDragStart() {
-    throw new Error('not imp');
+  public enable() {
+    this.scene.on('dragstart', this.onDragStart);
+    this.scene.on('drag', this.onDragging);
+    this.scene.on('dragend', this.onDragEnd);
+    this.scene.on('click', this.onClick);
   }
 
-  protected onDragging() {
-    throw new Error('not imp');
+  public disable() {
+    this.scene.off('dragstart', this.onDragStart);
+    this.scene.off('drag', this.onDragging);
+    this.scene.off('dragend', this.onDragEnd);
+    this.scene.off('click', this.onClick);
   }
 
-  protected onDragEnd() {
-    throw new Error('not imp');
-  }
+  protected abstract onDragStart(): any;
 
-  protected onClick() {
-    throw new Error('not imp');
-  }
+  protected abstract onDragging(): any;
+
+  protected abstract onDragEnd(): any;
+
+  protected abstract onClick(): any;
 }

packages/l7/demo/circle.html

@@ -27,7 +27,7 @@
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
     <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
-    <script src="../dist/l7-dev.js"></script>
+    <script src="../dist/l7.js"></script>
     <script>
       console.log(L7);
       const scene = new L7.Scene({

packages/l7/demo/polygon.html

@@ -11,10 +11,10 @@
       }
       #map {
         position: absolute;
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
       }
     </style>
     <link
@@ -24,11 +24,9 @@
   </head>
   <body>
     <div id="map"></div>
-      <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>-->
-     <!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> -->
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
     <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
-
-    <script src="../dist/l7-dev.js"></script>
+    <script src="../dist/l7.js"></script>
     <script>
     const data =
 {"type":"FeatureCollection","features":[
@@ -94,8 +92,8 @@
           zoom: 3,
           pitch: 0,
         })
-      })
-  scene.on('loaded',()=>{
+      });
+   scene.on('loaded',function(){
    console.log(L7);
 
 

packages/l7/src/index.ts

@@ -3,3 +3,4 @@ export * from '@antv/l7-scene';
 export * from '@antv/l7-maps';
 export * from '@antv/l7-layers';
 export * from '@antv/l7-component';
+export const version = '2.1.5';