add mapbox demo

2019-02-19 13:58:48 +08:00 · 2019-02-19 13:58:48 +08:00 · 92c900e8ee
parent 3496c03233
commit 92c900e8ee
2 changed files with 93 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -69,7 +69,6 @@ lib

 *.sw*
 *.un~
-demos/mapbox.html
 demos/gd.html
 demos/data
 demos/image
--- 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>
+