Merge branch 'grid-heatMap' into 'master'

Grid heat map 增加mapbox 增加多边形热力图 See merge request !5
antvis · Feb 26, 2019 · bd12008 · bd12008
2 parents 6ba0818 + 8d07fac
commit bd12008
Show file tree

Hide file tree

Showing 68 changed files with 2,735 additions and 476 deletions.
diff --git a/.gitignore b/.gitignore
@@ -69,7 +69,6 @@ lib
 
 *.sw*
 *.un~
-demos/mapbox.html
 demos/gd.html
 demos/data
 demos/image

diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html
@@ -10,6 +10,9 @@
   <title>point_circle</title>
   <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
+  .amap-maps {
+     cursor: auto !important
+  }
   </style>
 </head>
 
@@ -55,15 +58,15 @@
     .shape('2d:circle')
      .size('value', [ 2, 80]) // default 1
      //.size('value', [ 10, 300]) // default 1
-    .active(false)
+    .active(true)
      .filter('value', field_8 => {
       return field_8 * 1 > 500;
      })
-    .color('type', colorObj.red)
+    .color('type', colorObj.blue)
     .style({
       stroke: 'rgb(255,255,255)',
       strokeWidth: 1,
-      opacity: 0.9
+      opacity: 1.
     })
      .render();
 

diff --git a/demos/01_point_column.html b/demos/01_point_column.html
@@ -34,9 +34,11 @@
       zIndex: 2
     })
     .source(data.list, {
-      type: 'array',
-      x: 'j',
-      y: 'w',
+      parser:{
+        type: 'json',
+        x: 'j',
+        y: 'w',
+      }
     })
     .shape('cylinder')
     .size('t',(level)=> {

diff --git a/demos/01_point_distribute.html b/demos/01_point_distribute.html
@@ -34,9 +34,11 @@
       zIndex: 2
     })
      .source(data, {
-       type: 'csv',
-       y: 'lat',
-       x: 'lng'
+       parser:{
+          type: 'csv',
+          y: 'lat',
+          x: 'lng'
+       }
      })
     .size(1.0)
    .color('#0D408C')

diff --git a/demos/02_point_circle.html b/demos/02_point_circle.html
@@ -0,0 +1,77 @@
+<!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>point_circle</title>
+  <style>
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+  .amap-maps {
+     cursor: auto !important
+  }
+  </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 colorObj ={
+  blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
+  red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
+  orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
+  green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
+  yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
+  purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
+}
+
+
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'light', // 样式URL
+  center: [ 120.19382669582967, 30.258134 ],
+  pitch: 0,
+  zoom: 4,
+  maxZoom:14,
+  minZoom:4,
+});
+window.scene = scene;
+scene.on('loaded', () => {
+  $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
+
+
+    const circleLayer = scene.PointLayer({
+      zIndex: 2
+    })
+    .source(data,{
+      type: 'csv',
+      x: 'lng',
+      y: 'lat',
+    })
+    .size(1.0)
+    .color('#0D408C')
+    .style({
+      stroke: 'rgb(255,255,255)',
+      strokeWidth: 1,
+      opacity: 1.
+    })
+     .render();
+
+    circleLayer.on('click',(e)=>{
+    console.log(e);
+  })
+  });
+
+});
+
+</script>
+</body>
+</html>
+
diff --git a/demos/04_image.html b/demos/04_image.html
@@ -33,8 +33,11 @@
 scene.on('loaded', () => {
   const imageLayer = scene.ImageLayer().
       source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
-
-      extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
+       parser:{
+            type:'image',
+            extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
+       }
+
       })
       .style({
         opacity:1.0,

diff --git a/demos/05_raster_dem.html b/demos/05_raster_dem.html
@@ -48,13 +48,14 @@
 
       const layer = scene.RasterLayer({ zIndex: 2 }).
       source(values, {
-        type: 'raster',
-        width: n,
-        height: m,
-        min: 0,
-        max: 8000,
-        extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
-
+        parser: {
+          type: 'raster',
+          width: n,
+          height: m,
+          min: 0,
+          max: 8000,
+          extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
+        }
       })
        .style({
          rampColors: {

diff --git a/demos/grid.html b/demos/grid.html
@@ -0,0 +1,74 @@
+<!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">
+  <title>point_circle</title>
+  <style>
+	#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: [120.132624,30.281774],
+  pitch: 0,
+  zoom: 3.88
+});
+scene.on('loaded', () => {
+  $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
+    var layer = scene.HeatMapLayer({
+      zIndex: 2
+    })
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+          type: 'map',
+          callback:function(item){
+            const [x, y] = item.coordinates;
+            item.lat = item.lat*1;
+            item.lng = item.lng*1;
+            item.v = item.v *1;
+            item.coordinates = [x*1,y*1];
+            return item;
+          }
+
+        },
+        {
+        type: 'grid',
+        size: 15000,
+        field:'v',
+        method:'sum'
+      }
+      ]
+    })
+    .shape('gird')
+    .style({
+      coverage: 0.8
+    })
+    .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+     .render();
+  console.log(layer);
+  });
+});
+</script>
+</body>
+</html>
+
diff --git a/demos/mapbox.html b/demos/mapbox.html
@@ -0,0 +1,93 @@
+<!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>point_circle</title>
+  <style>
+  body {
+    margin:0;
+    padding:0;
+  }
+	#map { position:absolute; top:0; bottom:0; width:100%; margin:0; }
+  </style>
+</head>
+
+<body>
+<div id="map"></div>
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
+<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 colorObj ={
+  blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
+  red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
+  orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
+  green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
+  yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
+  purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
+}
+
+
+const scene = new L7.Scene({
+  container: 'map',
+  mapType:'mapbox',
+  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
+  center: [ 120.19382669582967, 30.258134 ],
+  pitch: 0,
+  hash:true,
+  zoom: 1,
+});
+window.scene = scene;
+scene.on('loaded', () => {
+  var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
+  $.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
+    const citylayer = scene.PolygonLayer()
+    .source(city)
+    //.color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"])
+    .color('pm2_5_24h',(p)=>{
+        if(p>120){
+          return colors[5];
+        } else if(p>65){
+          return colors[4];
+        } else if(p>30) {
+          return colors[3];
+        } else if(p>15){
+          return colors[2];
+        } else if(p>8){
+          return colors[1];
+        }else {
+          return colors[0];
+        }
+    })
+    .shape('fill')
+    .active(true)
+    .style({
+      opacity: 1
+    })
+    .render();
+    console.log('success');
+  });
+   $.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
+    citylayer = scene.PolygonLayer({
+      zIndex: 2
+    })
+    .source(data)
+    .shape('extrude')
+    .active({fill:'red'})
+    .size('floor',[0.1,1])
+    .color('#aaa')
+    .render();
+   })
+});
+
+</script>
+</body>
+</html>
+
diff --git a/package.json b/package.json
@@ -101,12 +101,14 @@
     "@turf/invariant": "^6.1.2",
     "@turf/meta": "^6.0.2",
     "d3-dsv": "^1.0.10",
+    "d3-hexbin": "^0.2.2",
     "earcut": "^2.1.3",
     "fecha": "^2.3.3",
     "gl-matrix": "^2.4.1",
     "lodash": "^4.17.5",
     "polyline-normals": "^2.0.2",
     "rbush": "^2.0.2",
+    "simple-statistics": "^7.0.1",
     "three": "^0.96.0",
     "venn.js": "^0.2.20",
     "viewport-mercator-project": "^5.2.0",