Merge branch 'mvt' into 'master'

Mvt Vector 瓦片 See merge request !30
antvis · May 28, 2019 · 27f6f4d · 27f6f4d
2 parents 6c0992b + 1491a7b
commit 27f6f4d
Show file tree

Hide file tree

Showing 61 changed files with 1,537 additions and 395 deletions.
diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html
@@ -66,7 +66,7 @@
     .color('point_count',["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
     .style({
       stroke: 'rgb(255,255,255)',
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1
     })
      .render();
@@ -76,18 +76,18 @@
     })
     .source(circleLayer.layerSource)
     .shape('point_count', 'text')
-    .active(true)
+    .active(false)
     .filter('point_count',(p)=>{
       return p > 50
     })
     .size('point_count', [ 5, 20]) // default 1
     .color('#fff')
     .style({
       stroke: '#999',
-      strokeWidth: 0,
+      strokeWidth: 1,
       opacity: 1.0
     })
-     .render();
+    .render();
     console.log(layerText);
 
   });

diff --git a/demos/06_text.html b/demos/06_text.html
@@ -29,8 +29,7 @@
 });
 window.scene = scene;
 scene.on('loaded', () => {
-  $.get('./data/provincePoint.geojson', data => {
-   // data.features = data.features.slice(0,1);
+  $.get('./data/provincePoint.json', data => {
     scene.PointLayer({
       zIndex: 2
     })

diff --git a/demos/assets/color-hash.js b/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)
+  });
diff --git a/demos/taxi.html b/demos/taxi.html
@@ -39,7 +39,7 @@
     //.color('#F08D41')
     .color('#ff893a')
     .animate({enable:true})
-    .render();
+    //.render();
   });
    $.get('https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', data => {
    buildLayer =  scene.PolygonLayer({

diff --git a/demos/tile.html b/demos/tile.html
@@ -47,6 +47,7 @@
       }
     )
     .source(city)
+    .active(false)
      .color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"])
     .shape('fill')
     .style({

diff --git a/demos/vectorTile.html b/demos/vectorTile.html
@@ -0,0 +1,83 @@
+<!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:'point'
+  })
+  //.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/point2/{z}/{x}/{y}.pbf',{
+    parser:{
+      type: 'mvt',
+      sourceLayer:'layer',
+      //idField:'OBJECTID',   
+      maxZoom: 17,
+    }
+  })
+  .scale({
+    total:{
+      min:0,
+      max:1000000,
+      type:'log'
+    }
+  })
+  // cylinder
+  .shape('hexagon')
+  .size(2)
+  .active({fill:'red'})
+  .color('total',  ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse())
+  //.color('#0D408C')
+  .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>
+
diff --git a/demos/vectorTilepolygon.html b/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>
+