feat(layer) add fitbounds

demos/01_point_column.html

@@ -30,7 +30,7 @@ const scene = new L7.Scene({
 });
 scene.on('loaded', () => {
   $.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => {
-    scene.PointLayer({
+   window.layer = scene.PointLayer({
       zIndex: 2
     })
     .source(data.list, {

src/core/layer.js

@@ -213,6 +213,10 @@ export default class Layer extends Base {
   }
   texture() {
 
+  }
+  fitBounds() {
+    const extent = this.layerSource.data.extent;
+    this.scene.fitBounds(extent);
   }
   hide() {
     this._visible(false);
@@ -472,10 +476,10 @@ export default class Layer extends Base {
   }
   _initEvents() {
     this.scene.on('pick-' + this.layerId, e => {
-      const { featureId, point2d, type } = e;
+      let { featureId, point2d, type } = e;
       if (featureId < -100 && this._activeIds !== null) {
-        this.emit('mouseleave');
+        type = 'mouseleave';
-        return;
+        featureId = this._activeIds[0];
       }
       const feature = this.layerSource.getSelectFeature(featureId);
       const lnglat = this.scene.containerToLngLat(point2d);
@@ -483,6 +487,7 @@ export default class Layer extends Base {
         featureId,
         feature,
         pixel: point2d,
+        type,
         lnglat: { lng: lnglat.lng, lat: lnglat.lat }
       };
       if (featureId >= 0) {

src/core/source.js

@@ -2,6 +2,7 @@
 import Base from './base';
 import Controller from './controller/index';
 import { getTransform, getParser } from '../source';
+import { extent } from '../util/geo';
 import { getMap } from '../map/index';
 export default class Source extends Base {
   getDefaultCfg() {
@@ -32,6 +33,7 @@ export default class Source extends Base {
     const { type = 'geojson' } = parser;
     const data = this.get('data');
     this.data = getParser(type)(data, parser);
+    this.data.extent = extent(this.data.dataArray);
   }
   /**
    * 数据统计
@@ -40,7 +42,8 @@ export default class Source extends Base {
     const trans = this._transforms;
     trans.forEach(tran => {
       const { type } = tran;
-      this.data = getTransform(type)(this.data, tran);
+      const data = getTransform(type)(this.data, tran);
+      Object.assign(this.data, data);
     });
     this._transforms = trans;
   }

src/geom/shader/point_vert.glsl

@@ -1,4 +1,5 @@
 precision highp float;
+attribute float pickingId;
 attribute vec4 a_color;
 attribute float a_size;
 attribute float a_shape;

src/geom/shader/shaderChunks/pick_color.glsl

@@ -0,0 +1,7 @@
+    vec4 id_topickColor(float pickingId) {
+      float id = step(0.,pickingId) * pickingId;
+      vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
+      a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
+      vec4 worldId = vec4(a,1);
+      return worldId
+    }

src/map/AMap.js

@@ -17,7 +17,7 @@ export default class GaodeMap extends Base {
     let d = Math.PI / 180;
     let x = lnglat[0] * d;
     let y = lat * d;
-    y = Math.log(Math.tan((Math.PI / 4) + (y / 2)));
+    y = Math.log(Math.tan(Math.PI / 4 + y / 2));
     const a = 0.5 / Math.PI,
       b = 0.5,
       c = -0.5 / Math.PI;
@@ -34,7 +34,6 @@ export default class GaodeMap extends Base {
     setTimeout(() => {
       this.emit('mapLoad');
     }, 100);
-
   }
 
   initMap() {
@@ -52,7 +51,6 @@ export default class GaodeMap extends Base {
     }
     this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
     this.map = new AMap.Map(this.container, this._attrs);
-
   }
   asyncCamera(engine) {
     this._engine = engine;
@@ -64,7 +62,7 @@ export default class GaodeMap extends Base {
       let { fov, near, far, height, pitch, rotation, aspect } = mapCamera;
       pitch *= DEG2RAD;
       rotation *= DEG2RAD;
-      camera.fov = 180 * fov / Math.PI;
+      camera.fov = (180 * fov) / Math.PI;
       camera.aspect = aspect;
       camera.near = near;
       camera.far = far;
@@ -97,32 +95,78 @@ export default class GaodeMap extends Base {
     const canvasContainer = document.getElementById(this.container);
     this.canvasContainer = canvasContainer;
     this.renderDom = document.createElement('div');
-    this.renderDom.style.cssText += 'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
+    this.renderDom.style.cssText +=
+      'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
     this.renderDom.id = 'l7_canvaslayer';
     canvasContainer.appendChild(this.renderDom);
   }
   mixMap(scene) {
     const map = this.map;
-    scene.getZoom = () => { return map.getZoom(); };
+    scene.getZoom = () => {
-    scene.getCenter = () => { return map.getCenter(); };
+      return map.getZoom();
-    scene.getSize = () => { return map.getSize(); };
+    };
-    scene.getPitch = () => { return map.getPitch(); };
+    scene.getCenter = () => {
-    scene.getRotation = () => { return map.getRotation(); };
+      return map.getCenter();
-    scene.getStatus = () => { return map.getStatus(); };
+    };
-    scene.getScale = () => { return map.getScale(); };
+    scene.getSize = () => {
-    scene.getZoom = () => { return map.getZoom(); };
+      return map.getSize();
-    scene.setZoom = () => { return map.setZoom(); };
+    };
-    scene.setBounds = () => { return map.setBounds(); };
+    scene.getPitch = () => {
-    scene.setRotation = () => { return map.setRotation(); };
+      return map.getPitch();
-    scene.zoomIn = () => { return map.zoomIn(); };
+    };
-    scene.setRotation = () => { return map.setRotation(); };
+    scene.getRotation = () => {
-    scene.zoomOut = () => { return map.zoomOut(); };
+      return map.getRotation();
-    scene.panTo = () => { return map.panTo(); };
+    };
-    scene.panBy = () => { return map.panBy(); };
+    scene.getStatus = () => {
-    scene.setPitch = () => { return map.setPitch(); };
+      return map.getStatus();
-    scene.pixelToLngLat = () => { return map.pixelToLngLat(); };
+    };
-    scene.lngLatToPixel = () => { return map.lngLatToPixel(); };
+    scene.getScale = () => {
-    scene.setMapStyle = () => { return map.setMapStyle(); };
+      return map.getScale();
+    };
+    scene.getZoom = () => {
+      return map.getZoom();
+    };
+    scene.setZoom = () => {
+      return map.setZoom();
+    };
+    scene.setBounds = () => {
+      return map.setBounds();
+    };
+    scene.setRotation = () => {
+      return map.setRotation();
+    };
+    scene.zoomIn = () => {
+      return map.zoomIn();
+    };
+    scene.setRotation = () => {
+      return map.setRotation();
+    };
+    scene.zoomOut = () => {
+      return map.zoomOut();
+    };
+    scene.panTo = () => {
+      return map.panTo();
+    };
+    scene.panBy = () => {
+      return map.panBy();
+    };
+    scene.setPitch = () => {
+      return map.setPitch();
+    };
+    scene.pixelToLngLat = () => {
+      return map.pixelToLngLat();
+    };
+    scene.lngLatToPixel = () => {
+      return map.lngLatToPixel();
+    };
+    scene.setMapStyle = () => {
+      return map.setMapStyle();
+    };
+    scene.fitBounds = extent => {
+      return map.setBounds(
+        new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ])
+      );
+    };
     scene.containerToLngLat = pixel => {
       const ll = new AMap.Pixel(pixel.x, pixel.y);
       return map.containerToLngLat(ll);

src/map/gaodeMap.js

@@ -1,69 +0,0 @@
-export default class GaodeMap {
-  constructor(map) {
-    this.map = map;
-  }
-  getZoom() {
-    return this.map.getZoom();
-  }
-  getCenter() {
-    return this.map.getCenter();
-  }
-  getSize() {
-    return this.map.getSize();
-  }
-  getPitch() {
-    return this.map.getPitch();
-  }
-  getRotation() {
-    return this.map.getRotation();
-  }
-  getStatus() {
-    return this.map.getStatus();
-  }
-  getScale() {
-    return this.map.getScale();
-  }
-  setZoom(zoom) {
-    return this.map.setZoom(zoom);
-  }
-  setCenter(lnglat) {
-    return this.map.setCenter(lnglat);
-  }
-  setBounds(bounds) {
-    return this.map.setBounds(bounds);
-  }
-  setRotation(rotation) {
-    return this.map.setRotation(rotation);
-  }
-  zoomIn() {
-    return this.map.zoomIn();
-  }
-  zoomOut() {
-    return this.map.zoomOut();
-  }
-  panTo(lngLat) {
-    return this.map.panTo(lngLat);
-  }
-  panBy(x, y) {
-    return this.map.panBy(x, y);
-  }
-  setPitch(pitch) {
-    return this.map.setPitch(pitch);
-  }
-  pixelToLngLat(lngLat, level) {
-    return this.map.pixelToLngLat(lngLat, level);
-  }
-  lngLatToPixel(lngLat, level) {
-    return this.map.lnglatToPixel(lngLat, level);
-
-  }
-  containerToLngLat(pixel) {
-    const ll = new AMap.Pixel(pixel.x, pixel.y);
-    return this.map.containerToLngLat(ll);
-  }
-  setMapStyle(style) {
-    return this.map.setMapStyle(style);
-  }
-
-
-}

src/source/parser/csv.js

@@ -5,9 +5,9 @@ export default function csv(data, cfg) {
   const resultdata = [];
   csvdata.forEach((col, featureIndex) => {
     let coordinates = [];
-    if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据
+    if (x && y) { coordinates = [ col[x] * 1, col[y] * 1 ]; } // 点数据
     if (x1 && y1) { // 弧线 或者线段
-      coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
+      coordinates = [[ col[x] * 1, col[y] * 1 ], [ col[x1] * 1, col[y1] * 1 ]];
     }
     col._id = featureIndex + 1;
     const dataItem = {

src/util.js

@@ -1,8 +1,3 @@
-/**
- * @fileOverview The util method based on the lodash.
- * @author dxq613@gmail.com
- * @see https://github.com/lodash/lodash
- */
 import Utils from '@antv/util';
 
 const Util = Utils.mix({}, Utils, {
@@ -13,33 +8,7 @@ const Util = Utils.mix({}, Utils, {
   isNaN,
   snapEqual: Utils.isNumberEqual,
   remove: Utils.pull,
-  inArray: Utils.contains,
+  inArray: Utils.contains
-  /**
-   * 将用户输入的 padding 转换成 [top, right, bottom, right] 的模式
-   * @param  {Number|Array} padding 输入的padding
-   * @return {Array} 四个padding 值
-   */
-  toAllPadding(padding) {
-    let top = 0;
-    let left = 0;
-    let right = 0;
-    let bottom = 0;
-
-    if (Util.isNumber(padding) || Util.isString(padding)) {
-      top = left = right = bottom = padding;
-    } else if (Util.isArray(padding)) {
-      top = padding[0];
-      right = !Util.isNil(padding[1]) ? padding[1] : padding[0];
-      bottom = !Util.isNil(padding[2]) ? padding[2] : padding[0];
-      left = !Util.isNil(padding[3]) ? padding[3] : right;
-    } else if (Util.isObject(padding)) {
-      top = padding.top || 0;
-      right = padding.right || 0;
-      bottom = padding.bottom || 0;
-      left = padding.left || 0;
-    }
-    return [ top, right, bottom, left ];
-  }
 });
 
 Util.Array = {

src/util/geo.js

@@ -0,0 +1,25 @@
+/**
+ * 计算地理数据范围
+ * @param {dataArray} data 地理坐标数据
+ * @return {Array} extent
+ */
+export function extent(data) {
+  const extent = [ Infinity, Infinity, -Infinity, -Infinity ];
+  data.forEach(item => {
+    const { coordinates } = item;
+    if (Array.isArray(coordinates[0])) {
+      coordinates.forEach(coord => {
+        if (extent[0] > coord[0]) extent[0] = coord[0];
+        if (extent[1] > coord[1]) extent[1] = coord[1];
+        if (extent[2] < coord[0]) extent[2] = coord[0];
+        if (extent[3] < coord[1]) extent[3] = coord[1];
+      });
+    } else {
+      if (extent[0] > coordinates[0]) extent[0] = coordinates[0];
+      if (extent[1] > coordinates[1]) extent[1] = coordinates[1];
+      if (extent[2] < coordinates[0]) extent[2] = coordinates[0];
+      if (extent[3] < coordinates[1]) extent[3] = coordinates[1];
+    }
+  });
+  return extent;
+}