@mapgis/webclient-vue-cesium 10.5.5-1 → 10.5.5-6

package/src/components/Overlay/mapv/MapvBaseLayer.js

@@ -1,6 +1,12 @@
-import { baiduMapLayer, DataSet } from "mapv";
+import {
+  baiduMapLayer,
+  DataSet,
+  utilDataRangeIntensity as Intensity
+} from "mapv";
 
-var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
+import Supercluster from './SuperCluster'
+
+let BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
 
 /**
  * @private
@@ -14,34 +20,34 @@ var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
  * @extends BaseLayer
  *
  */
- export class MapvBaseLayer extends BaseLayer {
+export class MapvBaseLayer extends BaseLayer {
   constructor(map, dataSet, options, cesiumLayer) {
-      super(map, dataSet, options);
+    super(map, dataSet, options);
 
-      if (!BaseLayer) return;
+    if (!BaseLayer) return;
 
-      this.map = map; //此处的map是外面传入的cesium的map对象
-      this.scene = map.scene;
-      this.dataSet = dataSet;
+    this.map = map; //此处的map是外面传入的cesium的map对象
+    this.scene = map.scene;
+    this.dataSet = dataSet;
 
-      var self = this;
-      var data = null;
-      options = options || {};
+    let self = this;
+    let data = null;
+    options = options || {};
 
-      self.init(options);
-      self.argCheck(options);
+    self.init(options);
+    self.argCheck(options);
 
-      this.initDevicePixelRatio();
+    this.initDevicePixelRatio();
 
-      this.canvasLayer = cesiumLayer;
+    this.canvasLayer = cesiumLayer;
 
-      this.stopAniamation = false;
-      this.animation = options.animation;
+    this.stopAniamation = false;
+    this.animation = options.animation;
 
-      this.clickEvent = this.clickEvent.bind(this);
-      this.mousemoveEvent = this.mousemoveEvent.bind(this);
+    this.clickEvent = this.clickEvent.bind(this);
+    this.mousemoveEvent = this.mousemoveEvent.bind(this);
 
-      this.bindEvent();
+    this.bindEvent();
   }
 
   /**
@@ -50,17 +56,17 @@ var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
    * 公式表示就是：window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备
    */
   initDevicePixelRatio() {
-      this.devicePixelRatio = window.devicePixelRatio || 1;
+    this.devicePixelRatio = window.devicePixelRatio || 1;
   }
 
   /**
    * @function cesium.zondy.MapvBaseLayer.prototype.clickEvent
    * @description 百度mapv原本的事件只有clickEvent和mousemoveEvent
    * @param e 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}
-   * @example 
+   * @example
    * //mapv.map.BaseLayer.clickEvent
    * clickEvent(pixel, e) {
-   *    var dataItem = this.isPointInPath(this.getContext(), pixel);
+   *    let dataItem = this.isPointInPath(this.getContext(), pixel);
    *    if (dataItem) {
    *       this.options.methods.click(dataItem, e);
    *    } else {
@@ -69,18 +75,18 @@ var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
    *  }
    */
   clickEvent(e) {
-      var pixel = e.point;
-      super.clickEvent(pixel, e);
+    let pixel = e.point;
+    super.clickEvent(pixel, e);
   }
 
   /**
    * @function cesium.zondy.MapvBaseLayer.prototype.mousemoveEvent
    * @description 百度mapv原本的事件只有clickEvent和mousemoveEvent
    * @param e 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}
-   * @example 
+   * @example
    * //mapv.map.BaseLayer.mousemoveEvent
    * mousemoveEvent(pixel, e) {
-   *   var dataItem = this.isPointInPath(this.getContext(), pixel);
+   *   let dataItem = this.isPointInPath(this.getContext(), pixel);
    *   if (dataItem) {
    *       this.options.methods.mousemove(dataItem, e);
    *   } else {
@@ -89,220 +95,393 @@ var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
    * }
    */
   mousemoveEvent(e) {
-      var pixel = e.point;
-      super.mousemoveEvent(pixel, e);
+    let pixel = e.point;
+    super.mousemoveEvent(pixel, e);
   }
 
-  addAnimatorEvent() {
-
-  }
+  addAnimatorEvent() {}
 
   animatorMovestartEvent() {
-      var animationOptions = this.options.animation;
-      if (this.isEnabledTime() && this.animator) {
-          this.steps.step = animationOptions.stepsRange.start;
-          //this.animator.stop();
-      }
+    let animationOptions = this.options.animation;
+    if (this.isEnabledTime() && this.animator) {
+      this.steps.step = animationOptions.stepsRange.start;
+      //this.animator.stop();
+    }
   }
 
   animatorMoveendEvent() {
-      if (this.isEnabledTime() && this.animator) {
-          //this.animator.start();
-      }
+    if (this.isEnabledTime() && this.animator) {
+      //this.animator.start();
+    }
   }
 
   bindEvent() {
-      var map = this.map;
-      if (this.options.methods) {
-          if (this.options.methods.click) {
-              //map.on('click', this.clickEvent);
-          }
-          if (this.options.methods.mousemove) {
-              //map.on('mousemove', this.mousemoveEvent);
-          }
+    let map = this.map;
+    if (this.options.methods) {
+      if (this.options.methods.click) {
+        //map.on('click', this.clickEvent);
+      }
+      if (this.options.methods.mousemove) {
+        //map.on('mousemove', this.mousemoveEvent);
       }
+    }
   }
 
   unbindEvent() {
-      var map = this.map;
+    let map = this.map;
 
-      if (this.options.methods) {
-          if (this.options.methods.click) {
-              map.off('click', this.clickEvent);
-          }
-          if (this.options.methods.mousemove) {
-              map.off('mousemove', this.mousemoveEvent);
-          }
+    if (this.options.methods) {
+      if (this.options.methods.click) {
+        map.off("click", this.clickEvent);
+      }
+      if (this.options.methods.mousemove) {
+        map.off("mousemove", this.mousemoveEvent);
       }
+    }
   }
 
   getContext() {
-      return this.canvasLayer.canvas.getContext(this.context);
+    return this.canvasLayer.canvas.getContext(this.context);
   }
 
+  getZoom() {
+    let zoom = 0;
+    if (!this.map) return zoom;
+    let tiles = this.map.scene.globe._surface._tilesToRender;
+    if (tiles && tiles.length > 0) {
+      zoom = this.map.scene.globe._surface._tilesToRender[0].level;
+    }
+    return zoom;
+  }
 
   init(options) {
+    let self = this;
 
-      var self = this;
+    self.options = options;
 
-      self.options = options;
+    this.initDataRange(options);
 
-      this.initDataRange(options);
+    this.context = self.options.context || "2d";
 
-      this.context = self.options.context || '2d';
+    if (self.options.zIndex) {
+      this.canvasLayer && this.canvasLayer.setZIndex(self.options.zIndex);
+    }
 
-      if (self.options.zIndex) {
-          this.canvasLayer && this.canvasLayer.setZIndex(self.options.zIndex);
-      }
-
-      this.initAnimator();
+    this.initAnimator();
   }
 
-  _canvasUpdate(time) {
-      var map = this.map;
-      var scene = this.scene;
-      if (!this.canvasLayer || this.stopAniamation) {
-          return;
-      }
-      var self = this;
-
-      var animationOptions = self.options.animation;
-
-      var context = self.getContext();
-
-      if (self.isEnabledTime()) {
-          if (time === undefined) {
-              this.clear(context);
-              return;
-          }
-          if (this.context === '2d') {
-              context.save();
-              context.globalCompositeOperation = 'destination-out';
-              context.fillStyle = 'rgba(0, 0, 0, .1)';
-              context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-              context.restore();
+  // 经纬度左边转换为墨卡托坐标
+  transferToMercator(dataSet) {
+    if (!dataSet) {
+      dataSet = this.dataSet;
+    }
+    let lnglat2Mkt = poi => {
+      let mercator = {};
+      let earthRad = 6378137.0;
+      mercator.x = ((poi.lng * Math.PI) / 180) * earthRad;
+      let a = (poi.lat * Math.PI) / 180;
+      mercator.y =
+        (earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
+      return mercator;
+    };
+
+    let map = this.map;
+    if (this.options.coordType !== "bd09mc") {
+      let data = dataSet.get();
+      data = dataSet.transferCoordinate(
+        data,
+        function(coordinates) {
+          if (
+            coordinates[0] < -180 ||
+            coordinates[0] > 180 ||
+            coordinates[1] < -90 ||
+            coordinates[1] > 90
+          ) {
+            return coordinates;
+          } else {
+            let pixel = lnglat2Mkt({
+              lng: coordinates[0],
+              lat: coordinates[1]
+            });
+            return [pixel.x, pixel.y];
           }
-      } else {
-          this.clear(context);
+        },
+        "coordinates",
+        "coordinates_mercator"
+      );
+      dataSet._set(data);
+    }
+  }
+
+  dataOptions() {
+    const self = this;
+    return {
+      transferCoordinate: function(coordinate) {
+        let pointSphere = Cesium.Cartesian3.fromDegrees(
+          coordinate[0],
+          coordinate[1]
+        );
+        let position = self.map.camera.position;
+        let cameraHeight = self.map.scene.globe.ellipsoid.cartesianToCartographic(
+          position
+        ).height;
+        cameraHeight += self.map.scene.globe.ellipsoid.maximumRadius * 1.2;
+        let distance = Cesium.Cartesian3.distance(position, pointSphere);
+        if (distance > cameraHeight) {
+          return undefined;
+          // return [-50, -50];a
+        }
+
+        let car3 = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);
+        let point = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+          self.map.scene,
+          car3
+        );
+        if (!point) return [0, 0];
+
+        if (self.options.draw === "cluster") {
+          return [
+            point.x * self.devicePixelRatio,
+            point.y * self.devicePixelRatio
+          ];
+        }
+        return [point.x, point.y];
       }
+    };
+  }
 
-      if (this.context === '2d') {
-          for (var key in self.options) {
-              context[key] = self.options[key];
-          }
+  changeCluster() {
+    const self = this;
+    let zoom = this.getZoom();
+    let dataGetOptions = this.dataOptions();
+    let rect = this.map.scene.camera.computeViewRectangle();
+    const south = Cesium.Math.toDegrees(rect.south);
+    const north = Cesium.Math.toDegrees(rect.north);
+    const east = Cesium.Math.toDegrees(rect.east);
+    const west = Cesium.Math.toDegrees(rect.west);
+
+    let clusterData = this.supercluster.getClusters(
+      [west, south, east, north],
+      zoom
+    );
+    this.pointCountMax = this.supercluster.trees[zoom].max;
+    this.pointCountMin = this.supercluster.trees[zoom].min;
+    let intensity = {};
+    let color = null;
+    let size = null;
+    if (this.pointCountMax === this.pointCountMin) {
+      color = this.options.fillStyle;
+      size = this.options.minSize || 8;
+    } else {
+      intensity = new Intensity({
+        min: this.pointCountMin,
+        max: this.pointCountMax,
+        minSize: this.options.minSize || 8,
+        maxSize: this.options.maxSize || 30,
+        gradient: this.options.gradient
+      });
+    }
+    for (let i = 0; i < clusterData.length; i++) {
+      let item = clusterData[i];
+      if (item.properties && item.properties.cluster_id) {
+        clusterData[i].size =
+          size || intensity.getSize(item.properties.point_count);
+        clusterData[i].fillStyle =
+          color || intensity.getColor(item.properties.point_count);
       } else {
-          context.clear(context.COLOR_BUFFER_BIT);
+        clusterData[i].size = self.options.size;
       }
+    }
+    this.clusterDataSet.set(clusterData);
+    this.transferToMercator(self.clusterDataSet);
+    let data = self.clusterDataSet.get(dataGetOptions);
+    return data;
+  }
 
-      var dataGetOptions = {
-          transferCoordinate: function (coordinate) {
-              var pointSphere = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);  
-              var position = self.map.camera.position;
-              var cameraHeight = self.map.scene.globe.ellipsoid.cartesianToCartographic(position).height;
-              cameraHeight += self.map.scene.globe.ellipsoid.maximumRadius * 1.2;
-              var distance = Cesium.Cartesian3.distance(position, pointSphere);
-              if(distance>cameraHeight){
-                  return undefined;    
-                  // return [-50, -50];
-              }
-
-              var position = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1]);
-              var point = Cesium.SceneTransforms.wgs84ToWindowCoordinates(self.map.scene, position);
-              if (!point) return [0, 0];
-              return [point.x, point.y];
-          }
-      };
+  refreshCluster(options) {
+    options = options || this.options;
+    this.supercluster = new Supercluster({
+        maxZoom: options.maxZoom || 19,
+        radius: options.clusterRadius || 100,
+        minPoints: options.minPoints || 2,
+        extent: options.extent || 512
+    });
+
+    this.supercluster.load(this.dataSet.get());
+    // 拿到每个级别下的最大值最小值
+    this.supercluster.trees.forEach(item => {
+        let max = 0;
+        let min = Infinity;
+        item.points.forEach(point => {
+            max = Math.max(point.numPoints || 0, max);
+            min = Math.min(point.numPoints || Infinity, min);
+        });
+        item.max = max;
+        item.min = min;
+    });
+    this.clusterDataSet = new DataSet();
+}
 
-      if (time !== undefined) {
-          dataGetOptions.filter = function (item) {
-              var trails = animationOptions.trails || 10;
-              if (time && item.time > (time - trails) && item.time < time) {
-                  return true;
-              } else {
-                  return false;
-              }
-          }
-      }
+  _canvasUpdate(time) {
+    let map = this.map;
+    let scene = this.scene;
+    if (!this.canvasLayer || this.stopAniamation) {
+      return;
+    }
+    let self = this;
 
-      var data = self.dataSet.get(dataGetOptions);
+    let animationOptions = self.options.animation;
 
-      this.processData(data);
+    let context = self.getContext();
 
-      if (self.options.unit == 'm' && self.options.size) {
-          //self.options._size = self.options.size / zoomUnit;
-          self.options._size = self.options.size;
-      } else {
-          self.options._size = self.options.size;
+    if (self.isEnabledTime()) {
+      if (time === undefined) {
+        this.clear(context);
+        return;
       }
+      if (this.context === "2d") {
+        context.save();
+        context.globalCompositeOperation = "destination-out";
+        context.fillStyle = "rgba(0, 0, 0, .1)";
+        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+        context.restore();
+      }
+    } else {
+      this.clear(context);
+    }
 
-      var pixel = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, Cesium.Cartesian3.fromDegrees(0, 0));
-      if (!pixel) pixel = [0, 0];
-      this.drawContext(context, new DataSet(data), self.options, pixel);
-
-      self.options.updateCallback && self.options.updateCallback(time);
+    if (this.context === "2d") {
+      for (let key in self.options) {
+        context[key] = self.options[key];
+      }
+    } else {
+      context.clear(context.COLOR_BUFFER_BIT);
+    }
+
+    if (
+      (self.options.minZoom && self.getZoom() < self.options.minZoom) ||
+      (self.options.maxZoom && self.getZoom() > self.options.maxZoom)
+    ) {
+      return;
+    }
+
+    let dataGetOptions = this.dataOptions();
+
+    if (time !== undefined) {
+      dataGetOptions.filter = function(item) {
+        let trails = animationOptions.trails || 10;
+        if (time && item.time > time - trails && item.time < time) {
+          return true;
+        } else {
+          return false;
+        }
+      };
+    }
+
+    let data;
+    let zoom = this.getZoom();
+    if (
+      this.options.draw === "cluster" &&
+      (!this.options.maxClusterZoom || this.options.maxClusterZoom >= zoom)
+    ) {
+      data = this.changeCluster();
+    } else {
+      data = self.dataSet.get(dataGetOptions);
+    }
+
+    this.processData(data);
+
+    if (self.options.unit == "m" && self.options.size) {
+      //self.options._size = self.options.size / zoomUnit;
+      self.options._size = self.options.size;
+    } else {
+      self.options._size = self.options.size;
+    }
+
+    let pixel = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+      scene,
+      Cesium.Cartesian3.fromDegrees(0, 0)
+    );
+    if (!pixel) pixel = [0, 0];
+    this.drawContext(context, new DataSet(data), self.options, pixel);
+
+    self.options.updateCallback && self.options.updateCallback(time);
   }
 
   updateData(data, options) {
-      var _data = data;
-      if (_data && _data.get) {
-          _data = _data.get();
-      }
-      if (_data != undefined) {
-          this.dataSet.set(_data);
+    let _data = data;
+    if (_data && _data.get) {
+      _data = _data.get();
+    }
+    if (_data != undefined) {
+      let zoom = this.getZoom();  
+      if (
+        this.options.draw === "cluster" &&
+        (!this.options.maxClusterZoom || this.options.maxClusterZoom >= zoom)
+      ) {
+        this.dataSet = data;
+        this.refreshCluster(this.options);
+        _data = this.changeCluster();
+        this.dataSet.set(_data);
+      } else {
+        this.dataSet.set(_data);
       }
+    }
 
-      super.update({
-          options: options
-      });
-
+    super.update({
+      options: options
+    });
   }
 
   addData(data, options) {
-      var _data = data;
-      if (data && data.get) {
-          _data = data.get();
-      }
-      this.dataSet.add(_data);
-      this.update({
-          options: options
-      });
+    let _data = data;
+    if (data && data.get) {
+      _data = data.get();
+    }
+    this.dataSet.add(_data);
+    this.update({
+      options: options
+    });
   }
 
   getData() {
-      return this.dataSet;
+    return this.dataSet;
   }
 
   removeData(filter) {
-      if (!this.dataSet) {
-          return;
+    if (!this.dataSet) {
+      return;
+    }
+    let newData = this.dataSet.get({
+      filter: function(data) {
+        return filter != null && typeof filter === "function"
+          ? !filter(data)
+          : true;
       }
-      var newData = this.dataSet.get({
-          filter: function (data) {
-              return (filter != null && typeof filter === "function") ? !filter(data) : true;
-          }
-      });
-      this.dataSet.set(newData);
-      this.stopAniamation = true;
-      /* this.update({
+    });
+    this.dataSet.set(newData);
+    this.stopAniamation = true;
+    /* this.update({
           options: null
       }); */
   }
 
   clearData() {
-      this.dataSet && this.dataSet.clear();
-      this.stopAniamation = true;
-      /* this.update({
+    this.dataSet && this.dataSet.clear();
+    this.stopAniamation = true;
+    /* this.update({
           options: null
       }); */
   }
 
   draw() {
-      this.canvasLayer.draw();
+    this.canvasLayer.draw();
   }
 
   //该函数从mapv/canvas/clear中提取
   clear(context) {
-      context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+    context &&
+      context.clearRect &&
+      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   }
-
-}
+}