fix(tile): vectorMap

demos/assets/color-hash.js

@@ -0,0 +1,173 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ColorHash = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+  /**
+   * BKDR Hash (modified version)
+   *
+   * @param {String} str string to hash
+   * @returns {Number}
+   */
+  var BKDRHash = function(str) {
+      var seed = 131;
+      var seed2 = 137;
+      var hash = 0;
+      // make hash more sensitive for short string like 'a', 'b', 'c'
+      str += 'x';
+      // Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
+      var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
+      for(var i = 0; i < str.length; i++) {
+          if(hash > MAX_SAFE_INTEGER) {
+              hash = parseInt(hash / seed2);
+          }
+          hash = hash * seed + str.charCodeAt(i);
+      }
+      return hash;
+  };
+  
+  module.exports = BKDRHash;
+  
+  },{}],2:[function(require,module,exports){
+  var BKDRHash = require('./bkdr-hash');
+  
+  /**
+   * Convert RGB Array to HEX
+   *
+   * @param {Array} RGBArray - [R, G, B]
+   * @returns {String} 6 digits hex starting with #
+   */
+  var RGB2HEX = function(RGBArray) {
+      var hex = '#';
+      RGBArray.forEach(function(value) {
+          if (value < 16) {
+              hex += 0;
+          }
+          hex += value.toString(16);
+      });
+      return hex;
+  };
+  
+  /**
+   * Convert HSL to RGB
+   *
+   * @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information.
+   * @param {Number} H Hue ∈ [0, 360)
+   * @param {Number} S Saturation ∈ [0, 1]
+   * @param {Number} L Lightness ∈ [0, 1]
+   * @returns {Array} R, G, B ∈ [0, 255]
+   */
+  var HSL2RGB = function(H, S, L) {
+      H /= 360;
+  
+      var q = L < 0.5 ? L * (1 + S) : L + S - L * S;
+      var p = 2 * L - q;
+  
+      return [H + 1/3, H, H - 1/3].map(function(color) {
+          if(color < 0) {
+              color++;
+          }
+          if(color > 1) {
+              color--;
+          }
+          if(color < 1/6) {
+              color = p + (q - p) * 6 * color;
+          } else if(color < 0.5) {
+              color = q;
+          } else if(color < 2/3) {
+              color = p + (q - p) * 6 * (2/3 - color);
+          } else {
+              color = p;
+          }
+          return Math.round(color * 255);
+      });
+  };
+  
+  function isArray(o) {
+      return Object.prototype.toString.call(o) === '[object Array]';
+  }
+  
+  /**
+   * Color Hash Class
+   *
+   * @class
+   */
+  var ColorHash = function(options) {
+      options = options || {};
+  
+      var LS = [options.lightness, options.saturation].map(function(param) {
+          param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
+          return isArray(param) ? param.concat() : [param];
+      });
+  
+      this.L = LS[0];
+      this.S = LS[1];
+  
+      if (typeof options.hue === 'number') {
+          options.hue = {min: options.hue, max: options.hue};
+      }
+      if (typeof options.hue === 'object' && !isArray(options.hue)) {
+          options.hue = [options.hue];
+      }
+      if (typeof options.hue === 'undefined') {
+          options.hue = [];
+      }
+      this.hueRanges = options.hue.map(function (range) {
+          return {
+              min: typeof range.min === 'undefined' ? 0 : range.min,
+              max: typeof range.max === 'undefined' ? 360: range.max
+          };
+      });
+  
+      this.hash = options.hash || BKDRHash;
+  };
+  
+  /**
+   * Returns the hash in [h, s, l].
+   * Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
+   *
+   * @param {String} str string to hash
+   * @returns {Array} [h, s, l]
+   */
+  ColorHash.prototype.hsl = function(str) {
+      var H, S, L;
+      var hash = this.hash(str);
+  
+      if (this.hueRanges.length) {
+          var range = this.hueRanges[hash % this.hueRanges.length];
+          var hueResolution = 727; // note that 727 is a prime
+          H = ((hash / this.hueRanges.length) % hueResolution) * (range.max - range.min) / hueResolution + range.min;
+      } else {
+          H = hash % 359; // note that 359 is a prime
+      }
+      hash = parseInt(hash / 360);
+      S = this.S[hash % this.S.length];
+      hash = parseInt(hash / this.S.length);
+      L = this.L[hash % this.L.length];
+  
+      return [H, S, L];
+  };
+  
+  /**
+   * Returns the hash in [r, g, b].
+   * Note that R, G, B ∈ [0, 255]
+   *
+   * @param {String} str string to hash
+   * @returns {Array} [r, g, b]
+   */
+  ColorHash.prototype.rgb = function(str) {
+      var hsl = this.hsl(str);
+      return HSL2RGB.apply(this, hsl);
+  };
+  
+  /**
+   * Returns the hash in hex
+   *
+   * @param {String} str string to hash
+   * @returns {String} hex with #
+   */
+  ColorHash.prototype.hex = function(str) {
+      var rgb = this.rgb(str);
+      return RGB2HEX(rgb);
+  };
+  
+  module.exports = ColorHash;
+  
+  },{"./bkdr-hash":1}]},{},[2])(2)
+  });

demos/vectorTilepolygon.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="geometry" content="diagram">
+  <link rel="stylesheet" href="./assets/common.css">
+  <link rel="stylesheet" href="./assets/info.css">
+
+  <title>hexagon demo</title>
+  <style>
+  body {margin: 0;}
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
+</head>
+
+<body>
+<div id="map"></div>
+ <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
+<script src="./assets/color-hash.js"></script>
+<script src="./assets/jquery-3.2.1.min.js"></script>
+<script src="./assets/dat.gui.min.js"></script>
+<script src="../build/L7.js"></script>
+<script>
+
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'dark', // 样式URL
+  center: [116.5909,39.9225 ],
+  pitch: 0,
+  hash:true,
+  zoom: 14,
+
+});
+window.scene = scene;
+var colorHash = new ColorHash();
+scene.on('loaded', () => {
+  const layer = scene.VectorTileLayer({
+    zIndex:0,
+    layerType:'polygon'
+  })
+  //.source('https://pre-lbs-show.taobao.com/gettile?x={x}&y={y}&z={z}&pipeId=pipe_vt_test')
+ 
+  // http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point/{z}/{x}/{y}.pbf
+  // https://mvt.amap.com/district/CHN2/8/203/105/4096?key=
+  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/{z}/{x}/{y}.pbf',{
+    parser:{
+      type: 'mvt',
+      sourceLayer:'layer',
+      idField:'adcode',   
+      maxZoom: 17,
+    }
+  })
+  //.scale()
+  // cylinder
+  .shape('fill')
+  .size(2)
+  .active({fill:'red'})
+  .color('name',name => {
+    //var colorHash = new ColorHash();
+    return colorHash.hex(name)
+  })
+  .style({
+    opacity:1.0
+  })
+  .render(
+  );
+  layer.on('mousemove',(feature)=>{
+   console.log(feature);
+  })
+   console.log(layer);
+  });
+//OBJECTID',(id)=>{
+    // const index = id % 8;
+     //return ['#9e0142','#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd','#5e4fa2'][index];
+  //}
+</script>
+</body>
+</html>
+

demos/vectorheatMap.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="geometry" content="diagram">
+  <link rel="stylesheet" href="./assets/common.css">
+  <link rel="stylesheet" href="./assets/info.css">
+
+  <title>hexagon demo</title>
+  <style>
+  body {margin: 0;}
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
+</head>
+
+<body>
+<div id="map"></div>
+ <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
+<script src="./assets/jquery-3.2.1.min.js"></script>
+<script src="./assets/dat.gui.min.js"></script>
+<script src="../build/L7.js"></script>
+<script>
+
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'dark', // 样式URL
+  center: [116.5909,39.9225 ],
+  pitch: 0,
+  hash:true,
+  zoom: 14,
+
+});
+window.scene = scene;
+scene.on('loaded', () => {
+  const layer = scene.VectorTileLayer({
+    zIndex:0,
+    layerType:'heatmap'
+  })
+  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point2/{z}/{x}/{y}.pbf',{
+    parser:{
+      type: 'mvt',
+      sourceLayer:'layer',
+      maxZoom: 17,
+    }
+  })
+  .scale({
+    total:{
+      min:0,
+      max:1000000,
+      type:'log'
+    }
+  })
+  .shape('heatmap')
+  .size('total',[ 0, 1])
+  .style({
+      intensity: 10,
+      radius: 10,
+      opacity:1,
+      rampColors: {
+        colors: [ '#ffda45ff', '#fde725ff', '#ffc934ff', '#ffb824ff', '#ffb824ff', '#fa8100ff' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.9, 1.0 ]
+      }
+    })
+  .render(
+  );
+  layer.on('mousemove',(feature)=>{
+   console.log(feature);
+  })
+   console.log(layer);
+  });
+//OBJECTID',(id)=>{
+    // const index = id % 8;
+     //return ['#9e0142','#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd','#5e4fa2'][index];
+  //}
+</script>
+</body>
+</html>
+

src/layer/tile/tileLayer.js

@@ -178,6 +178,12 @@ export default class TileLayer extends Layer {
         mesh.name = key;
         this._tileCache.setTile(tile, key);
         this._tileKeys.push(key);
+        if (mesh.type === 'composer') {
+          this.scene._engine.composerLayers.push(mesh);
+          this.scene._engine.update();
+          this._pruneTiles();
+          return;
+        }
         if (mesh.children.length !== 0) {
           this._tiles.add(tile.getMesh());
           this._addPickTile(tile.getMesh());
@@ -186,6 +192,12 @@ export default class TileLayer extends Layer {
         this._pruneTiles();
       });
     } else {
+      if (tile.getMesh().type === 'composer') {
+        this.scene._engine.composerLayers.push(tile.getMesh());
+        this.scene._engine.update();
+        this._pruneTiles();
+        return;
+      }
       this._tiles.add(tile.getMesh());
       t.active = true;
       this._addPickTile(tile.getMesh());
@@ -288,6 +300,11 @@ export default class TileLayer extends Layer {
           tileObj._abortRequest();
           this._tiles.remove(tileObj.getMesh());
         }
+        if (tileObj && tileObj.getMesh().type === 'composer') {
+          this.scene._engine.composerLayers = this.scene._engine.composerLayers.filter(obj => {
+            return obj.name !== tileObj.getMesh().name;
+          });
+        }
         delete this.tileList[key];
       }
     }

src/layer/tile/vectorTile.js

@@ -43,14 +43,19 @@ export default class VectorTile extends Tile {
       this.layer.shape = this.layer._getShape(this.layerData);
     }
     this.mesh = getRender(this.layer.get('layerType'), this.layer.shape)(this.layerData, this.layer);
-    this.mesh.onBeforeRender = renderer => {
+    if (this.mesh.type !== 'composer') { // 热力图的情况
-      this._renderMask(renderer);
+      this.mesh.onBeforeRender = renderer => {
-    };
+        this._renderMask(renderer);
-    this.mesh.onAfterRender = renderer => {
+      };
-      const context = renderer.context;
+      this.mesh.onAfterRender = renderer => {
-      context.disable(context.STENCIL_TEST);
+        const context = renderer.context;
-    };
+        context.disable(context.STENCIL_TEST);
-    this._object3D.add(this.mesh);
+      };
+      this._object3D.add(this.mesh);
+    } else {
+      this._object3D = this.mesh;
+    }
+
     this.emit('tileLoaded');
     return this._object3D;
   }