Merge branch 'dev' into 'master'

Dev See merge request !1
2018-11-20 15:06:04 +08:00 · 2018-11-20 15:06:04 +08:00 · b88ea86164
parent e75f215625 43ecfd9d6d
commit b88ea86164
149 changed files with 2941 additions and 2572 deletions
--- a/.babelrc
+++ b/.babelrc
@ -3,12 +3,6 @@
    "transform-remove-strict-mode"
  ],
  "presets": [
-    [
+    "@babel/preset-env"
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
 }
--- a/.eslintignore
+++ b/.eslintignore
@ -6,3 +6,4 @@ mocks/
 node_modules/
 demos/assets/
 demos/index.html
 demos/*
--- a/.torch.compile.opts.js
+++ b/.torch.compile.opts.js
@ -1,16 +1,18 @@
 const path = require('path');
 module.exports = {
  babelrc: {
    presets: [
-      'es2015',
+      "@babel/preset-env"
-      'stage-0'
+    ]
    ],
    sourceMaps: 'inline'
  },
  extensions: ['.js'],
  include: [
-    'node_modules/**/src/gl-matrix/**/*.js '
+    'src/**/*.js',
    'test/**/*.js',
    'node_modules/three/**/*.js'
  ],
  exclude: [
-    'bower_components/**/*.js',
+    'node_modules/@babel/**/*.js'
  ]
 }
--- a/demos/01_point_circle.html
+++ b/demos/01_point_circle.html
@ -6,6 +6,7 @@
  <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%; }
@ -14,40 +15,95 @@
 <body>
 <div id="map"></div>
 <div class='info-panel top-right'>
 <h4>杭州市微博签到数据</h4>
 <p>
 <label>min</label><input name="minaqi" type="range" step="1" min="0" max="30000" value=500> <label>500</label>
 </p>
  <p>
 <label>max</label><input name="maxaqi" type="range" step="1" min="0" max="30000" value=30000><label>30000</label>
 </p>
 <p><label>color</label><select>
  <option value ="blue">blue</option>
  <option value ="red">red</option>
  <option value="orange">orange</option>
  <option value="green">green</option>
   <option value="yellow">yellow</option>
    <option value="purple">purple</option>
 </select> </p>
 <p><label>shape</label><select>
  <option value ="circle">circle</option>
  <option value ="triangle">triangle</option>
  <option value="hexagon">hexagon</option>
  <option value="square">square</option>
 </select> </p>
 <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 color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'light', // 样式URL
  center: [ 120.19382669582967, 30.258134 ],
  pitch: 0,
-  zoom: 12.6
+  zoom: 11.6
 });
 window.scene = scene;
-scene.on('load', () => {
+scene.on('loaded', () => {
  $.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', data => {
-    scene.PointLayer({
+    const circleLayer = scene.PointLayer({
      zIndex: 2
    })
-    .source(data)
+    .source(data,{
      scale:{
        min:0,
        max:1000,
        type:'linear'
      }
    })
    .shape('2d:circle')
-    .size('value', [ 8, 80 ]) // default 1
+     .size('value', [ 0, 60]) // default 1
     //.size('value', [ 10, 300]) // default 1
    .active(true)
     .filter('value', field_8 => {
      return field_8 * 1 > 500;
     })
-    .color('type', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
+    .color('type', colorObj.red)
    .style({
      stroke: 'rgb(255,255,255)',
      strokeWidth: 1,
      opacity: 0.9
    })
     .render();
     $('.info-panel input').change(function(){
        $(this).next().text($(this).val());
        const min = $('.info-panel input').val();
        const max = $($('.info-panel input')[1]).val();
        circleLayer.filter('value',(value)=>{
           return (value>=min && value<=max) 
        }).render();
      })
     $('.info-panel select').change(function(){
        const color = $(this).val();
        console.time('color');
        circleLayer.color('type',colorObj[color]).render();
         console.timeEnd('color')
      })
  });
 });
 </script>
--- a/demos/01_point_column.html
+++ b/demos/01_point_column.html
@ -0,0 +1,54 @@
 <!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.037828998113099, 30.086317611850635 ],
  pitch: 36.002858,
  zoom: 5.44
 });
 window.scene = scene;
 scene.on('loaded', () => {
  $.get('./data/rainfall.json', data => {
    scene.PointLayer({
      zIndex: 2
    })
    .source(data.list, {
      type: 'array',
      x: 'j',
      y: 'w',
    })
    .shape('3d:circle')
    .size('t',(level)=> {
      return [4,4,(level+40)];
    }) 
    .active(true)
    .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
     .render();
  });
 });
 </script>
 </body>
 </html>
--- a/demos/01_point_distribute.html
+++ b/demos/01_point_distribute.html
@ -19,18 +19,17 @@
 <script src="./assets/dat.gui.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'dark', // 样式URL
  center: [ 121.51222019389274, 31.23572578718841 ],
  pitch: 0,
  zoom: 11
 });
 window.scene = scene;
-scene.on('load', () => {
+scene.on('loaded', () => {
-  $.get('https://gw.alipayobjects.com/os/rmsportal/mUQPWCYaxOfiSznuANvG.txt', data => {
+  // ./data/mUQPWCYaxOfiSznuANvG.txt
  $.get('./data/00.csv', data => {
    scene.PointLayer({
      zIndex: 2
    })
@ -39,33 +38,8 @@ scene.on('load', () => {
       y: 'lat',
       x: 'lng'
     })
-    .shape('2d:circle')
+    .size(1.0)
-    .size(2.0)
+   .color('#0D408C')
     /**
    .size('name*zoom', function(name, zoom) {
      if (zoom < 7) {
        return 1;
      } else if (zoom < 9) {
        return 10;
      } else if (zoom < 12) {
        return 15;
      }
      return 50;
    })
  .color('count', function(count) {
    if (count < 3) {
      return color1[0];
    } else if (count < 15) {
      return color1[1];
    }
    return color1[2];
  })
  **/
   .color('#0198BD')
    .style({
      stroke: 'rgb(255,255,255)',
      strokeWidth: 0,
--- a/demos/01_point_image.html
+++ b/demos/01_point_image.html
@ -0,0 +1,137 @@
 <!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_distribute</title>
  <style>
  body {
    margin:0px;
  }
 	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <div id="map"></div>
 <div class ='info'>
 <div class="input-card" style='width: 12rem;'>
        <div class="input-item">
          <input type="radio" name='func' checked=true value=0><span class="input-text">全部</span>
          <input type="radio" name='func'  value=0><span class="input-text">可用车</span>
          <input type="radio" name='func' value=1><span class="input-text">不可用</span>
        </div>
  </div>
 </div>
 <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
 <script src="https://unpkg.com/supercluster@4.1.1/dist/supercluster.min.js"></script>
 <script src="./assets/jquery-3.2.1.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const scene = new L7.Scene({
  id: 'map',
  mapStyle: 'light', // 样式URL
  center: [ 120.1243238, 30.27331571 ],
  pitch: 0,
  zoom: 14,
  minZoom: 9
 });
 window.scene = scene;
 scene.on('loaded', () => {
  $.get('./data/pointbike.json', data => {
    var extent = [ 110,29.2378,122.189,33.3173]
    var dataindex = supercluster({radius:80});
    dataindex.load(data.features);
    var clusterData = dataindex.getClusters(extent,13);
    scene.PointLayer({
      zIndex: 4,
      maxZoom:15.5
    })
    .source({
      "type": "FeatureCollection",
      "features":clusterData
      })
    .color('#6492E9')
    .size('point_count',[1,30])
    .shape('2d:circle')
    .style({
       opacity:0.8
     })
    .render();
     // 自行车数据
   scene.PointLayer({
      zIndex: 4,
      minZoom:15.5,
    })
    .source(data)
    .color('power',(v)=>{
      return  v > 5 ? '#4F93EA' :'#F5684A' 
    })
    .active({fill:'#91C25B'})
    .size(8)
    .shape('2d:circle')
    .style({
       opacity:1.0
     })
    .render();
  });
  $.get('./data/fence.json', data => {
    scene.LineLayer({
      zIndex: 5
    })
    .source(data)
    .shape('line')
    .size([2,0])
    .color('#2F54EB')
     .style({
       opacity:1.0,
     })
     .render();
      scene.PolygonLayer({
      zIndex: 0
    })
    .source(data)
    .shape('fill')
    .size([2,0])
    .color('#2F54EB')
    .style({
       opacity:0.05,
     })
    .render();
  });
  $.getJSON('./data/pointZone.json', data => {
    const fenceLayer = scene.LineLayer({
      zIndex: 1,
      minZoom:16,
    })
    .source(data)
    .size([1.5,0])
    .shape('line')
    .color("#2F54EB")
    .style({
       opacity:1.0,
     })
     .render();
  });
 });
 </script>
 </body>
 </html>
--- a/demos/02_arc_line.html
+++ b/demos/02_arc_line.html
@ -17,34 +17,34 @@
 <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="./assets/geotiff.browserify.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'dark', // 样式URL
-  center: [ 116.2825, 39.9 ],
+  center: [ 102.615023, 23.107799],
-  pitch: 0,
+  pitch: 15,
-  zoom: 3
+  zoom: 14,
 });
-scene.on('load', () => {
+scene.on('loaded', () => {
-  $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
+  $.get('./data/contour.geojson', data => {
   // data.features = data.features.slice(0,1);
    scene.LineLayer({
      zIndex: 2
    })
-     .source(data, { // lng1,lat1,lng2,lat2
+    .source(data)
-       type: 'csv',
+    .size('ELEV',(value)=>{
-       x: 'lng1',
+        return [1,(value-1000)*7];
       y: 'lat1',
       x1: 'lng2',
       y1: 'lat2'
    })
-    .shape('arc')
+    .active(true)
-    .size(2.0)
+    .shape('line')      
-    .color('value', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
+    .color('ELEV',["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse())
    .render();
  });
 });
 </script>
--- a/demos/02_oneBletoneRoad.html
+++ b/demos/02_oneBletoneRoad.html
@ -0,0 +1,107 @@
 <!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>one belt one road </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: 'light', // 样式URL
  center: [ 120.3672, 36.0968 ],
  pitch: 0,
  zoom: 3
 });
 scene.on('loaded', () => {
 scene.image.addImage('marker', './data/onebelt/marker.png');
 scene.image.addImage('local', './image/local.png');
 $.getJSON('./data/onebelt/regions.json', region => {
  const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
  var points = region.features.map((feature)=>{
       return feature.properties;
  })
  const layer = scene.PolygonLayer({
      zIndex:1,
  })
    .source(region)
    .color('cname',(value)=>{
        return (value =='中国' ? 'rgba(46,149,169,0.45)': 'rgba(227,244,244,0.1)');
    })
    .shape('fill')
    .render();
 });
 $.getJSON('./data/onebelt/seaway.geojson', contourData => {
        const layer = scene.LineLayer({
            zIndex:2}
           )
            .source(contourData)
            .color('rgb(79,147,234)')
            .size([ 1.5, 0 ])
            .shape('line')
            .style({
                'lineType':'solid'
            })
            .render();
 });
 $.getJSON('./data/onebelt/landway.json', contourData => {
        const landlayer = scene.LineLayer(
            {zIndex:2}
         )
            .source(contourData)
            .color('rgb(11,94,69)')
            .size([ 1.5, 0 ])
            .shape('line')
            .style({
               // 'lineType':'solid'
            })
            .render();
 });
 $.getJSON('./data/onebelt/city.geojson', city => {
    var makerLayer = scene.PointLayer({
      zIndex: 4
    })
    .source(city)
    .size(20.0)
    .shape('image:local')
    .color('#0D408C')
    .render();
    var makerText = scene.PointLayer({
      zIndex: 8,
      minZoom:5,
    })
    .source(city)
    .size(14.0)
    .shape('name', 'text')
    .color('rgba(0,0,0,0.85)')
    .style({
        textOffset:[-20,22],
         stroke: '#fff',
         strokeWidth: 4,
    })
    .render();
 })
 })
 </script>
 </body>
 </html>
--- a/demos/03_1_extrude_polygon.html
+++ b/demos/03_1_extrude_polygon.html
@ -21,34 +21,41 @@
 <script src="./assets/dat.gui.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const gui = new dat.GUI({ autoPlace: false });
 const customContainer = document.getElementById('gui');
 customContainer.appendChild(gui.domElement);
 const province = { 全国: '00', 新疆维吾尔自治区: '65', 西藏自治区: '54', 内蒙古自治区: '15', 青海省: '63', 四川省: '51', 黑龙江省: '23', 甘肃省: '62', 云南省: '53', 广西壮族自治区: '45', 湖南省: '43', 陕西省: '61', 广东省: '44', 吉林省: '22', 河北省: '13', 湖北省: '42', 贵州省: '52', 山东省: '37', 江西省: '36', 河南省: '41', 辽宁省: '21', 山西省: '14', 安徽省: '34', 福建省: '35', 浙江省: '33', 江苏省: '32', 重庆市: '50', 宁夏回族自治区: '64', 海南省: '46', 台湾省: '71', 北京市: '11', 天津市: '12', 上海市: '31', 香港特别行政区: '81', 澳门特别行政区: '82' };
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'dark', // 样式URL
  center: [ 120.4047, 30.0679 ],
  pitch: 35,
  zoom: 4
 });
 window.scene = scene;
-scene.on('load', () => {
+scene.on('loaded', () => {
-  $.getJSON('https://gw.alipayobjects.com/os/rmsportal/oOzMjBOaxFROWLBYeqTB.json', city => {
+  $.getJSON('./data/chinandvohexagon.geojson', city => {
    citylayer = scene.PolygonLayer()
    .source(city)
-    .color('gdp', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
+    .color('sum', ["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"])
    .shape('extrude')
-    .filter('gdp', gdp => {
+  
-      return gdp > 0;
+    .size('max',(value)=>{
       return value * 1000;
    })
-    .size('gdp', [ 1000, 5000000 ])
+    .active(true)
-   // .active({ fill: 'red' })
+    .style({
      opacity: 1.0
    })
    .render();
    const citylayer2 = scene.PolygonLayer()
      .source(city)
      .shape('line')
      .color('#fff')
      .style({
        opacity: 1
       })
      .render();
  });
 });
--- a/demos/03_choropleths_polygon.html
+++ b/demos/03_choropleths_polygon.html
@ -6,46 +6,82 @@
  <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 = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
 <div id="map"></div>
 <div  id ="info" class ="tooltip" style="display:none">
 </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 gui = new dat.GUI({ autoPlace: false });
+const colorObj ={
-const customContainer = document.getElementById('gui');
+  blue: ["#E8FCFF", "#CFF6FF", "#98E3FA", "#65CEF7", "#3CB4F0", "#2894E0", "#1A76C7", "#105CB3", "#0D408C", "#002466"],
-customContainer.appendChild(gui.domElement);
+  red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"],
-const province = { 全国: '00', 新疆维吾尔自治区: '65', 西藏自治区: '54', 内蒙古自治区: '15', 青海省: '63', 四川省: '51', 黑龙江省: '23', 甘肃省: '62', 云南省: '53', 广西壮族自治区: '45', 湖南省: '43', 陕西省: '61', 广东省: '44', 吉林省: '22', 河北省: '13', 湖北省: '42', 贵州省: '52', 山东省: '37', 江西省: '36', 河南省: '41', 辽宁省: '21', 山西省: '14', 安徽省: '34', 福建省: '35', 浙江省: '33', 江苏省: '32', 重庆市: '50', 宁夏回族自治区: '64', 海南省: '46', 台湾省: '71', 北京市: '11', 天津市: '12', 上海市: '31', 香港特别行政区: '81', 澳门特别行政区: '82' };
+  orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"],
  green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"],
  yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"],
  purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"],
 }
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'light', // 样式URL
  center: [ 120.4047, 30.0679 ],
  pitch: 0,
  zoom: 4
 });
 window.scene = scene;
-scene.on('load', () => {
+scene.on('loaded', () => {
-
+  var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
  $.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
-    citylayer = scene.PolygonLayer()
+    const citylayer = scene.PolygonLayer()
    .source(city)
-    .color('pm2_5_24h', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
+    //.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({ fill: 'red' })
+    .active(true)
    .style({
      opacity: 1
    })
    .render();
     const citylayer2 = scene.PolygonLayer()
      .source(city)
      .shape('line')
      .color('#fff')
      .style({
        opacity: 0.1
       })
      .render();
    citylayer.on('click',(e)=>{
      $("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
      $("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);
    })
  });
 });
--- a/demos/04_image.html
+++ b/demos/04_image.html
@ -14,30 +14,32 @@
 </head>
 <body>
 <div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
 <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 gui = new dat.GUI({ autoPlace: false });
 const customContainer = document.getElementById('gui');
 customContainer.appendChild(gui.domElement);
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true', // 样式URL
+  mapStyle: 'dark', // 样式URL
-  center: [ 120.4047, 30.0679 ],
+  center: [ 121.2680, 30.3628 ],
-  pitch: 45,
+  pitch: 0,
-  zoom: 4
+  zoom: 15,
  minZoom: 4,
  maxZoom: 18
 });
-scene.on('load', () => {
+scene.on('loaded', () => {
 // https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png
 // 
  const imageLayer = scene.ImageLayer().
-      source({
+      source('./image/hangzhoubay.jpg',{
-        url: 'https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png',
+       
-        extent: [ 73, 18, 136, 54 ]
+      extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
      })
      .style({
        opacity:1.0,
      })
      .render();
--- a/demos/05_raster_dem.html
+++ b/demos/05_raster_dem.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>dem demo</title>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
 <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/geotiff.browserify.min.js"></script>
 <script src="../build/L7.js"></script>
 <script>
 const scene = new L7.Scene({
  id: 'map',
  viewMode: '3D',
  mapStyle: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true', // 样式URL
  center: [ 110.770672, 34.159869 ],
  pitch: 0,
  zoom: 4
 });
 scene.on('loaded', () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', ' https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(e) {
    if (this.status === 200) {
    // get binary data as a response
      const blob = this.response;
      const tiff = GeoTIFF.parse(blob);
      const image = tiff.getImage();
      const values = image.readRasters()[0];
      const m = image.getHeight();
      const n = image.getWidth();
      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 ]
      })
       .style({
         rampColors: {
           colors: [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ],
           positions: [ 0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0 ]
         }
       })
      .render();
    }
  };
  xhr.send();
 });
 </script>
 </body>
 </html>
--- a/demos/02_normal_line.html
+++ b/demos/02_normal_line.html
@ -6,7 +6,7 @@
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="diagram">
  <link rel="stylesheet" href="./assets/common.css">
-  <title>hexagon demo</title>
+  <title>point_circle</title>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
@ -20,21 +20,28 @@
 <script src="../build/L7.js"></script>
 <script>
 const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
 const scene = new L7.Scene({
  id: 'map',
-  mapStyle: 'amap://styles/5a64d4f1af910091f9cc3367dfc4a1dc', // 样式URL
+  mapStyle: 'dark', // 样式URL
-  center: [ 116.2825, 39.9 ],
+  center: [ 120.19382669582967, 30.258134 ],
  pitch: 0,
  zoom: 3
 });
-scene.on('load', () => {
+window.scene = scene;
-  $.get('https://gw.alipayobjects.com/os/rmsportal/lZGtNaYGNHtAIkcjVvfp.json', data => {
+scene.on('loaded', () => {
-    scene.LineLayer({
+  $.get('./data/provincePoint.geojson', data => {
    scene.PointLayer({
      zIndex: 2
    })
    .source(data)
-    .color('#3CB4F0')
+    .shape('name', 'text')
    .size(10) // default 1
    .color('#fff')
    .style({
      stroke: '#999',
      strokeWidth: 2,
      opacity: 0.85
    })
     .render();
  });
 });
--- a/demos/07_city.html
+++ b/demos/07_city.html
@ -0,0 +1,84 @@
 <!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>city</title>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <div id="map">
 <div  id ="info" class ="tooltip" style="display:none">
 </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="../build/L7.js"></script>
 <script>
 const scene = new L7.Scene({
  id: 'map',
  mapStyle: 'light', // 样式URL
  center: [120.173104,  30.244072],
  pitch: 66.50572,
  zoom: 15.79,
  minZoom:10
 });
 window.scene = scene;
 scene.on('loaded', () => {
  $.get('./data/water.geojson', data => {
    scene.PolygonLayer({
      zIndex: 0
    })
    .source(data)
    .shape('fill')
    .color('rgb(79,174,234)')
    .render();
  });
  $.get('./data/land.geojson', data => {
    scene.PolygonLayer({
      zIndex: 0
    })
    .source(data)
    .shape('fill')
    .color('rgb(156,194,116)')
    .render();
  });
   $.get('./data/river.geojson', data => {
    scene.LineLayer({
      zIndex: 2
    })
    .source(data)
    .shape('line')
    .size([3,0])
    .color('rgb(79,174,234)')
    .render();
  });
   $.get('./data/build.geojson', data => {
    citylayer = scene.PolygonLayer({
      zIndex: 2
    })
    .source(data)
    .shape('extrude')
    .active({fill:'red'})
    .size('floor',[10,2000])
    .color('rgba(242,246,250,0.96)')
    .render();
    citylayer.on('click',(e)=>{
      $("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
      $("#info").html(`<p>楼高<span">${e.feature.properties.floor || 0}</span></p>`);
    })
  });
 });
 </script>
 </body>
 </html>
--- a/demos/08_arc_line.html
+++ b/demos/08_arc_line.html
@ -0,0 +1,79 @@
 <!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>hexagon demo</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='https://npmcdn.com/@turf/turf/turf.min.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 color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
 const scene = new L7.Scene({
  id: 'map',
  mapStyle: 'dark', // 样式URL
  center: [ 116.2825, 39.9 ],
  pitch: 0,
  zoom: 3
 });
 scene.on('loaded', () => {
  $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
    const rows = data.split('\n');
    var features =[];
    for(var i =1;i<rows.length-1;i++){
       var row = rows[i].split(',');
      var start = turf.point([row[4], row[5]]);
      var end = turf.point([row[6], row[7]]);
      var greatCircle = turf.greatCircle(start, end, {'npoints': 50});
      features.push(greatCircle);
    }
    var fc = turf.featureCollection(features);
    scene.LineLayer({
      zIndex: 2
    })
     .source(fc)
    .color('rgb(13,64,140)') 
    .style({
      opacity:0.6,
    })
   //.animate({enable:true})
    .render();
    /**
    scene.LineLayer({
      zIndex: 2
    })
     .source(data, { // lng1,lat1,lng2,lat2
       type: 'csv',
       x: 'lng1',
       y: 'lat1',
       x1: 'lng2',
       y1: 'lat2'
     })
    .shape('arc')
    .size(0.8)
    .color('rgb(13,64,140)') 
    .style({
      opacity:0.6,
    })
   //.animate({enable:true})
    .render();
    **/
  });
 });
 </script>
 </body>
 </html>
--- a/demos/08_point_shape.html
+++ b/demos/08_point_shape.html
@ -0,0 +1,63 @@
 <!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.037828998113099, 30.086317611850635 ],
  pitch: 0,
  zoom: 5.44
 });
 window.scene = scene;
 var colorObj={
    '黄色':'yellow',
    '蓝色':'blue',
    '橙色':'orange'
 }
 scene.on('loaded', () => {
  $.get('./data/waringData.json', data => {
    scene.PointLayer({
      zIndex: 2
    })
    .source(data, {
      type: 'array',
      x: 'lon',
      y: 'lat',
    })
    .shape('2d:radar')
    .size(80 ) 
    .active(false)
    .color('signallevel',(v)=>{
       return colorObj[v];
    })
    .style({
        shape:'radar'
    })
    .render();
  });
 });
 </script>
 </body>
 </html>
--- a/demos/assets/03_choropleths_polygon.png
+++ b/demos/assets/03_choropleths_polygon.png
--- a/demos/assets/info.css
+++ b/demos/assets/info.css
@ -0,0 +1,159 @@
 .top-right{
    right: 10px;
    position:absolute;
 }
 .bottom-right{
    right: 0;
    bottom: 10px;
    position:absolute;
 }
 .info-panel {
    width: 250px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    margin: 24px;
    padding: 12px 24px;
    outline: none;
    z-index: 10;
 }
 .info-panel p {
  margin: 0px;
 }
 .info-panel h4 {
    font-size: 1em;
    font-weight: 500;
    margin: 8px 0;
 }
 .info-panel label {
    display: inline-block;
    width: 30px;
    margin-right: 10%;
    color: #5a666d;
    margin-bottom: 4px;
 }
 .tooltip {
    position:absolute;
    pointer-events: none;
    transition: opacity .2s;
    padding: 4px;
    background: rgba(0,0,0,.8);
    color: #fff;
    max-width: 300px;
    font-size: 10px;
    z-index: 9;
 }
 .tooltip p {
 padding: 0;
 margin: 0;
 }
 .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
  }
  .input-item:last-child {
    margin-bottom: 0;
  }
  .input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
  }
  .input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
  }
  .input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
  }
  .input-item-prepend {
    margin-right: -1px;
  }
  .input-item-text, input[type=text],input[type=date], select {
    height: calc(2.2rem + 2px);
  }
  .input-item-text {
    width: 6rem;
    text-align: justify;
    padding: 0.4rem 0.7rem;
    display: inline-block;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .input-item-text input[type=checkbox], .input-item-text input[type=radio] {
    margin-top: 0
  }
 .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    width: 10rem;
    border-width: 0;
    position: fixed;
    top: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.1rem 0.6rem;
  }
  .info hr {
    margin-right: 0;
    margin-left: 0;
    border-top-color: grey;
  }
  .info {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    position: fixed;
    top: 1rem;
    background-color: white;
    width: auto;
    border-width: 0;
    right: 1rem;
    z-index: 10;
  }
--- a/demos/assets/screenshots/01_point_circle.png
+++ b/demos/assets/screenshots/01_point_circle.png
--- a/demos/assets/screenshots/01_point_column.png
+++ b/demos/assets/screenshots/01_point_column.png
--- a/demos/assets/screenshots/01_point_distribute.png
+++ b/demos/assets/screenshots/01_point_distribute.png
--- a/demos/assets/screenshots/01_point_image.png
+++ b/demos/assets/screenshots/01_point_image.png
--- a/demos/assets/screenshots/01_point_shape.png
+++ b/demos/assets/screenshots/01_point_shape.png
--- a/demos/assets/screenshots/02_arc_line.png
+++ b/demos/assets/screenshots/02_arc_line.png
--- a/demos/assets/screenshots/02_contour.png
+++ b/demos/assets/screenshots/02_contour.png
--- a/demos/assets/screenshots/02_normal_line.png
+++ b/demos/assets/screenshots/02_normal_line.png
--- a/demos/assets/screenshots/02_oneBletoneRoad.png
+++ b/demos/assets/screenshots/02_oneBletoneRoad.png
--- a/demos/assets/screenshots/03_1_extrude_polygon.png
+++ b/demos/assets/screenshots/03_1_extrude_polygon.png
--- a/demos/assets/screenshots/03_choropleths_polygon.png
+++ b/demos/assets/screenshots/03_choropleths_polygon.png
--- a/demos/assets/screenshots/04_image.png
+++ b/demos/assets/screenshots/04_image.png
--- a/demos/assets/screenshots/05_raster_dem.png
+++ b/demos/assets/screenshots/05_raster_dem.png
--- a/demos/assets/screenshots/06_text.png
+++ b/demos/assets/screenshots/06_text.png
--- a/demos/assets/screenshots/07_city.png
+++ b/demos/assets/screenshots/07_city.png
--- a/demos/assets/screenshots/arc-line.png
+++ b/demos/assets/screenshots/arc-line.png
--- a/demos/assets/screenshots/build.png
+++ b/demos/assets/screenshots/build.png
--- a/demos/assets/screenshots/city.png
+++ b/demos/assets/screenshots/city.png
--- a/demos/assets/screenshots/county.png
+++ b/demos/assets/screenshots/county.png
--- a/demos/assets/screenshots/countyPoint.png
+++ b/demos/assets/screenshots/countyPoint.png
--- a/demos/assets/screenshots/csv.png
+++ b/demos/assets/screenshots/csv.png
--- a/demos/assets/screenshots/hexagon.png
+++ b/demos/assets/screenshots/hexagon.png
--- a/demos/assets/screenshots/line.png
+++ b/demos/assets/screenshots/line.png
--- a/demos/assets/screenshots/model.png
+++ b/demos/assets/screenshots/model.png
--- a/demos/assets/screenshots/point.png
+++ b/demos/assets/screenshots/point.png
--- a/demos/meshline.html
+++ b/demos/meshline.html
@ -0,0 +1,43 @@
 <!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>line demo</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.3672, 36.0968 ],
  pitch: 0,
  zoom: 13
 });
 scene.on('loaded', () => {
 $.getJSON('./data/contour.json', contourData => {
  const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
 //contourData.features = contourData.features.slice(0,1);
  const layer = scene.LineLayer()
                       .source(contourData)
                       .color('ELEV', color)
                       .size([ 1, 0 ])
                       .shape('meshLine')
                       .render();
 });
 })
 </script>
 </body>
 </html>
--- a/demos/taxi.html
+++ b/demos/taxi.html
@ -0,0 +1,107 @@
 <!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>city demo</title>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
 <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 gui = new dat.GUI({ autoPlace: false });
 const customContainer = document.getElementById('gui');
 customContainer.appendChild(gui.domElement);
 var palette = {
  baseColor: '#3CB4F0', // CSS string
  windowColor: '#65CEF7', // RGB array
  brightColor: '#98E3FA', // RGB with alpha
 };
 gui.addColor(palette, 'baseColor').onChange(()=>{
  changeStyle();
 });
 gui.addColor(palette, 'windowColor').onChange(()=>{
  changeStyle();
 });
 gui.addColor(palette, 'brightColor').onChange(()=>{
  changeStyle();
 });
 var buildLayer =null;
 const scene = new L7.Scene({
  id: 'map',
  mapStyle: 'dark', // 样式URL
  center: [ 121.507674, 31.223043 ],
  pitch: 65.59312320916906,
  zoom: 16.4,
  minZoom: 15,
  maxZoom: 18
 });
 scene.on('loaded', () => {
  $.get('./data/cityPoint.json', data => {
    scene.PointLayer({
      zIndex: 10
    })
    .source(data)
    .shape('2d:warn')
    .size(90)
    .color('#F00')
    .style({
      shape:'warn'
    })
    .render();
  });
  $.get('./data/road.json', data => {
    scene.LineLayer({
      zIndex: 2
    })
    .source(data)
    .color('#F08D41')
    .animate({enable:true})
    .render();
  });
   $.get('./data/2.geojson', data => {
   buildLayer =  scene.PolygonLayer({
      zIndex: 2
    })
    .source(data)
    .shape('extrude')
    .size('floor',[0,2000])
    .color('rgba(242,246,250,1.0)')
     .animate({enable:true})
     .style({
       opacity:1.0,
       baseColor:'rgb(25,25,165)',
       windowColor:'rgb(30,60,89)',
       brightColor:'rgb(155,217,255)',
     })
    .render();
  });
 });
 function changeStyle(e){
  buildLayer.style({
       opacity:0.8,
       baseColor:palette.baseColor,
       windowColor:palette.windowColor,
       brightColor:palette.brightColor,
  }
  ).render();
 }
 </script>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
-  "name": "@ali/l7",
+  "name": "@antv/l7",
-  "version": "0.1.1",
+  "version": "1.0.0",
-  "description": "the Grammar of Graphics in Javascript",
+  "description": "Large-scale WebGL-powered Geospatial Data Visualization",
  "main": "build/l7.js",
  "browser": "build/l7.js",
  "module": "lib/index.js",
@ -15,16 +15,17 @@
  },
  "keywords": [
    "l7",
-    "chart"
+    "gis",
    "geometry"
  ],
  "author": "https://github.com/orgs/antvis/people",
  "license": "MIT",
  "devDependencies": {
-    "@antv/util": "~1.2.5",
+    "@babel/cli": "~7.0.0",
-    "babel-cli": "~6.26.0",
+    "@babel/core": "~7.0.0",
-    "babel-core": "~6.26.0",
+    "@babel/preset-env": "~7.1.0",
    "babel-eslint": "~8.0.3",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "~8.0.0",
    "babel-plugin-transform-remove-strict-mode": "~0.0.2",
    "babel-preset-env": "~1.6.1",
    "body-parser": "^1.18.2",
@ -33,7 +34,7 @@
    "connect": "^3.6.6",
    "d3-queue": "~3.0.7",
    "debug": "~3.1.0",
-    "electron": "^1.8.4",
+    "electron": "~2.0.2",
    "eslint": "~3.19.0",
    "eslint-config-airbnb": "~15.0.1",
    "eslint-config-egg": "~4.2.0",
@ -50,7 +51,7 @@
    "serve-static": "^1.13.2",
    "shelljs": "~0.7.8",
    "string-replace-loader": "~1.3.0",
-    "torchjs": "~1.0.4",
+    "torchjs": "~2.1.0",
    "uglify-js": "~3.1.10",
    "webpack": "~3.10.0"
  },
@ -76,11 +77,11 @@
    "prepublishOnly": "npm run build-lib && npm run dist",
    "screenshot": "node ./bin/screenshot.js",
    "start": "npm run dev",
-    "test": "torch --compile --renderer --recursive ./test/unit",
+    "test": "torch --compile --renderer --recursive test/unit",
    "test-all": "npm run test && npm run test-bugs",
-    "test-bugs": "torch --compile --renderer --recursive ./test/bugs",
+    "test-bugs": "torch --compile --renderer --recursive test/bugs",
-    "test-bugs-live": "torch --compile --interactive --watch --recursive ./test/bugs",
+    "test-bugs-live": "torch --compile --interactive --watch --recursive test/bugs",
-    "test-live": "torch --compile --interactive --watch --recursive ./test/unit",
+    "test-live": "torch --compile --interactive --watch --recursive test/unit",
    "watch": "webpack --config webpack-dev.config.js",
    "win-dev": "node ./bin/win-dev.js"
  },
@ -96,6 +97,7 @@
  },
  "dependencies": {
    "@antv/g": "^3.1.3",
    "@antv/util": "~1.2.5",
    "@mapbox/tiny-sdf": "^1.1.0",
    "@turf/bbox": "^6.0.1",
    "@turf/clean-coords": "^6.0.1",
@ -106,6 +108,7 @@
    "fecha": "^2.3.3",
    "gl-matrix": "^2.4.1",
    "lodash": "^4.17.5",
    "polyline-normals": "^2.0.2",
    "rbush": "^2.0.2",
    "three": "^0.96.0",
    "venn.js": "^0.2.20",
--- a/src/attr/colorscales.js
+++ b/src/attr/colorscales.js
@ -97,3 +97,4 @@ export const colorScales = {
  magma: new Uint8Array([ 0, 0, 4, 255, 1, 0, 5, 255, 1, 1, 6, 255, 1, 1, 8, 255, 2, 1, 9, 255, 2, 2, 11, 255, 2, 2, 13, 255, 3, 3, 15, 255, 3, 3, 18, 255, 4, 4, 20, 255, 5, 4, 22, 255, 6, 5, 24, 255, 6, 5, 26, 255, 7, 6, 28, 255, 8, 7, 30, 255, 9, 7, 32, 255, 10, 8, 34, 255, 11, 9, 36, 255, 12, 9, 38, 255, 13, 10, 41, 255, 14, 11, 43, 255, 16, 11, 45, 255, 17, 12, 47, 255, 18, 13, 49, 255, 19, 13, 52, 255, 20, 14, 54, 255, 21, 14, 56, 255, 22, 15, 59, 255, 24, 15, 61, 255, 25, 16, 63, 255, 26, 16, 66, 255, 28, 16, 68, 255, 29, 17, 71, 255, 30, 17, 73, 255, 32, 17, 75, 255, 33, 17, 78, 255, 34, 17, 80, 255, 36, 18, 83, 255, 37, 18, 85, 255, 39, 18, 88, 255, 41, 17, 90, 255, 42, 17, 92, 255, 44, 17, 95, 255, 45, 17, 97, 255, 47, 17, 99, 255, 49, 17, 101, 255, 51, 16, 103, 255, 52, 16, 105, 255, 54, 16, 107, 255, 56, 16, 108, 255, 57, 15, 110, 255, 59, 15, 112, 255, 61, 15, 113, 255, 63, 15, 114, 255, 64, 15, 116, 255, 66, 15, 117, 255, 68, 15, 118, 255, 69, 16, 119, 255, 71, 16, 120, 255, 73, 16, 120, 255, 74, 16, 121, 255, 76, 17, 122, 255, 78, 17, 123, 255, 79, 18, 123, 255, 81, 18, 124, 255, 82, 19, 124, 255, 84, 19, 125, 255, 86, 20, 125, 255, 87, 21, 126, 255, 89, 21, 126, 255, 90, 22, 126, 255, 92, 22, 127, 255, 93, 23, 127, 255, 95, 24, 127, 255, 96, 24, 128, 255, 98, 25, 128, 255, 100, 26, 128, 255, 101, 26, 128, 255, 103, 27, 128, 255, 104, 28, 129, 255, 106, 28, 129, 255, 107, 29, 129, 255, 109, 29, 129, 255, 110, 30, 129, 255, 112, 31, 129, 255, 114, 31, 129, 255, 115, 32, 129, 255, 117, 33, 129, 255, 118, 33, 129, 255, 120, 34, 129, 255, 121, 34, 130, 255, 123, 35, 130, 255, 124, 35, 130, 255, 126, 36, 130, 255, 128, 37, 130, 255, 129, 37, 129, 255, 131, 38, 129, 255, 132, 38, 129, 255, 134, 39, 129, 255, 136, 39, 129, 255, 137, 40, 129, 255, 139, 41, 129, 255, 140, 41, 129, 255, 142, 42, 129, 255, 144, 42, 129, 255, 145, 43, 129, 255, 147, 43, 128, 255, 148, 44, 128, 255, 150, 44, 128, 255, 152, 45, 128, 255, 153, 45, 128, 255, 155, 46, 127, 255, 156, 46, 127, 255, 158, 47, 127, 255, 160, 47, 127, 255, 161, 48, 126, 255, 163, 48, 126, 255, 165, 49, 126, 255, 166, 49, 125, 255, 168, 50, 125, 255, 170, 51, 125, 255, 171, 51, 124, 255, 173, 52, 124, 255, 174, 52, 123, 255, 176, 53, 123, 255, 178, 53, 123, 255, 179, 54, 122, 255, 181, 54, 122, 255, 183, 55, 121, 255, 184, 55, 121, 255, 186, 56, 120, 255, 188, 57, 120, 255, 189, 57, 119, 255, 191, 58, 119, 255, 192, 58, 118, 255, 194, 59, 117, 255, 196, 60, 117, 255, 197, 60, 116, 255, 199, 61, 115, 255, 200, 62, 115, 255, 202, 62, 114, 255, 204, 63, 113, 255, 205, 64, 113, 255, 207, 64, 112, 255, 208, 65, 111, 255, 210, 66, 111, 255, 211, 67, 110, 255, 213, 68, 109, 255, 214, 69, 108, 255, 216, 69, 108, 255, 217, 70, 107, 255, 219, 71, 106, 255, 220, 72, 105, 255, 222, 73, 104, 255, 223, 74, 104, 255, 224, 76, 103, 255, 226, 77, 102, 255, 227, 78, 101, 255, 228, 79, 100, 255, 229, 80, 100, 255, 231, 82, 99, 255, 232, 83, 98, 255, 233, 84, 98, 255, 234, 86, 97, 255, 235, 87, 96, 255, 236, 88, 96, 255, 237, 90, 95, 255, 238, 91, 94, 255, 239, 93, 94, 255, 240, 95, 94, 255, 241, 96, 93, 255, 242, 98, 93, 255, 242, 100, 92, 255, 243, 101, 92, 255, 244, 103, 92, 255, 244, 105, 92, 255, 245, 107, 92, 255, 246, 108, 92, 255, 246, 110, 92, 255, 247, 112, 92, 255, 247, 114, 92, 255, 248, 116, 92, 255, 248, 118, 92, 255, 249, 120, 93, 255, 249, 121, 93, 255, 249, 123, 93, 255, 250, 125, 94, 255, 250, 127, 94, 255, 250, 129, 95, 255, 251, 131, 95, 255, 251, 133, 96, 255, 251, 135, 97, 255, 252, 137, 97, 255, 252, 138, 98, 255, 252, 140, 99, 255, 252, 142, 100, 255, 252, 144, 101, 255, 253, 146, 102, 255, 253, 148, 103, 255, 253, 150, 104, 255, 253, 152, 105, 255, 253, 154, 106, 255, 253, 155, 107, 255, 254, 157, 108, 255, 254, 159, 109, 255, 254, 161, 110, 255, 254, 163, 111, 255, 254, 165, 113, 255, 254, 167, 114, 255, 254, 169, 115, 255, 254, 170, 116, 255, 254, 172, 118, 255, 254, 174, 119, 255, 254, 176, 120, 255, 254, 178, 122, 255, 254, 180, 123, 255, 254, 182, 124, 255, 254, 183, 126, 255, 254, 185, 127, 255, 254, 187, 129, 255, 254, 189, 130, 255, 254, 191, 132, 255, 254, 193, 133, 255, 254, 194, 135, 255, 254, 196, 136, 255, 254, 198, 138, 255, 254, 200, 140, 255, 254, 202, 141, 255, 254, 204, 143, 255, 254, 205, 144, 255, 254, 207, 146, 255, 254, 209, 148, 255, 254, 211, 149, 255, 254, 213, 151, 255, 254, 215, 153, 255, 254, 216, 154, 255, 253, 218, 156, 255, 253, 220, 158, 255, 253, 222, 160, 255, 253, 224, 161, 255, 253, 226, 163, 255, 253, 227, 165, 255, 253, 229, 167, 255, 253, 231, 169, 255, 253, 233, 170, 255, 253, 235, 172, 255, 252, 236, 174, 255, 252, 238, 176, 255, 252, 240, 178, 255, 252, 242, 180, 255, 252, 244, 182, 255, 252, 246, 184, 255, 252, 247, 185, 255, 252, 249, 187, 255, 252, 251, 189, 255, 252, 253, 191, 255 ]),
  plasma: new Uint8Array([ 13, 8, 135, 255, 16, 7, 136, 255, 19, 7, 137, 255, 22, 7, 138, 255, 25, 6, 140, 255, 27, 6, 141, 255, 29, 6, 142, 255, 32, 6, 143, 255, 34, 6, 144, 255, 36, 6, 145, 255, 38, 5, 145, 255, 40, 5, 146, 255, 42, 5, 147, 255, 44, 5, 148, 255, 46, 5, 149, 255, 47, 5, 150, 255, 49, 5, 151, 255, 51, 5, 151, 255, 53, 4, 152, 255, 55, 4, 153, 255, 56, 4, 154, 255, 58, 4, 154, 255, 60, 4, 155, 255, 62, 4, 156, 255, 63, 4, 156, 255, 65, 4, 157, 255, 67, 3, 158, 255, 68, 3, 158, 255, 70, 3, 159, 255, 72, 3, 159, 255, 73, 3, 160, 255, 75, 3, 161, 255, 76, 2, 161, 255, 78, 2, 162, 255, 80, 2, 162, 255, 81, 2, 163, 255, 83, 2, 163, 255, 85, 2, 164, 255, 86, 1, 164, 255, 88, 1, 164, 255, 89, 1, 165, 255, 91, 1, 165, 255, 92, 1, 166, 255, 94, 1, 166, 255, 96, 1, 166, 255, 97, 0, 167, 255, 99, 0, 167, 255, 100, 0, 167, 255, 102, 0, 167, 255, 103, 0, 168, 255, 105, 0, 168, 255, 106, 0, 168, 255, 108, 0, 168, 255, 110, 0, 168, 255, 111, 0, 168, 255, 113, 0, 168, 255, 114, 1, 168, 255, 116, 1, 168, 255, 117, 1, 168, 255, 119, 1, 168, 255, 120, 1, 168, 255, 122, 2, 168, 255, 123, 2, 168, 255, 125, 3, 168, 255, 126, 3, 168, 255, 128, 4, 168, 255, 129, 4, 167, 255, 131, 5, 167, 255, 132, 5, 167, 255, 134, 6, 166, 255, 135, 7, 166, 255, 136, 8, 166, 255, 138, 9, 165, 255, 139, 10, 165, 255, 141, 11, 165, 255, 142, 12, 164, 255, 143, 13, 164, 255, 145, 14, 163, 255, 146, 15, 163, 255, 148, 16, 162, 255, 149, 17, 161, 255, 150, 19, 161, 255, 152, 20, 160, 255, 153, 21, 159, 255, 154, 22, 159, 255, 156, 23, 158, 255, 157, 24, 157, 255, 158, 25, 157, 255, 160, 26, 156, 255, 161, 27, 155, 255, 162, 29, 154, 255, 163, 30, 154, 255, 165, 31, 153, 255, 166, 32, 152, 255, 167, 33, 151, 255, 168, 34, 150, 255, 170, 35, 149, 255, 171, 36, 148, 255, 172, 38, 148, 255, 173, 39, 147, 255, 174, 40, 146, 255, 176, 41, 145, 255, 177, 42, 144, 255, 178, 43, 143, 255, 179, 44, 142, 255, 180, 46, 141, 255, 181, 47, 140, 255, 182, 48, 139, 255, 183, 49, 138, 255, 184, 50, 137, 255, 186, 51, 136, 255, 187, 52, 136, 255, 188, 53, 135, 255, 189, 55, 134, 255, 190, 56, 133, 255, 191, 57, 132, 255, 192, 58, 131, 255, 193, 59, 130, 255, 194, 60, 129, 255, 195, 61, 128, 255, 196, 62, 127, 255, 197, 64, 126, 255, 198, 65, 125, 255, 199, 66, 124, 255, 200, 67, 123, 255, 201, 68, 122, 255, 202, 69, 122, 255, 203, 70, 121, 255, 204, 71, 120, 255, 204, 73, 119, 255, 205, 74, 118, 255, 206, 75, 117, 255, 207, 76, 116, 255, 208, 77, 115, 255, 209, 78, 114, 255, 210, 79, 113, 255, 211, 81, 113, 255, 212, 82, 112, 255, 213, 83, 111, 255, 213, 84, 110, 255, 214, 85, 109, 255, 215, 86, 108, 255, 216, 87, 107, 255, 217, 88, 106, 255, 218, 90, 106, 255, 218, 91, 105, 255, 219, 92, 104, 255, 220, 93, 103, 255, 221, 94, 102, 255, 222, 95, 101, 255, 222, 97, 100, 255, 223, 98, 99, 255, 224, 99, 99, 255, 225, 100, 98, 255, 226, 101, 97, 255, 226, 102, 96, 255, 227, 104, 95, 255, 228, 105, 94, 255, 229, 106, 93, 255, 229, 107, 93, 255, 230, 108, 92, 255, 231, 110, 91, 255, 231, 111, 90, 255, 232, 112, 89, 255, 233, 113, 88, 255, 233, 114, 87, 255, 234, 116, 87, 255, 235, 117, 86, 255, 235, 118, 85, 255, 236, 119, 84, 255, 237, 121, 83, 255, 237, 122, 82, 255, 238, 123, 81, 255, 239, 124, 81, 255, 239, 126, 80, 255, 240, 127, 79, 255, 240, 128, 78, 255, 241, 129, 77, 255, 241, 131, 76, 255, 242, 132, 75, 255, 243, 133, 75, 255, 243, 135, 74, 255, 244, 136, 73, 255, 244, 137, 72, 255, 245, 139, 71, 255, 245, 140, 70, 255, 246, 141, 69, 255, 246, 143, 68, 255, 247, 144, 68, 255, 247, 145, 67, 255, 247, 147, 66, 255, 248, 148, 65, 255, 248, 149, 64, 255, 249, 151, 63, 255, 249, 152, 62, 255, 249, 154, 62, 255, 250, 155, 61, 255, 250, 156, 60, 255, 250, 158, 59, 255, 251, 159, 58, 255, 251, 161, 57, 255, 251, 162, 56, 255, 252, 163, 56, 255, 252, 165, 55, 255, 252, 166, 54, 255, 252, 168, 53, 255, 252, 169, 52, 255, 253, 171, 51, 255, 253, 172, 51, 255, 253, 174, 50, 255, 253, 175, 49, 255, 253, 177, 48, 255, 253, 178, 47, 255, 253, 180, 47, 255, 253, 181, 46, 255, 254, 183, 45, 255, 254, 184, 44, 255, 254, 186, 44, 255, 254, 187, 43, 255, 254, 189, 42, 255, 254, 190, 42, 255, 254, 192, 41, 255, 253, 194, 41, 255, 253, 195, 40, 255, 253, 197, 39, 255, 253, 198, 39, 255, 253, 200, 39, 255, 253, 202, 38, 255, 253, 203, 38, 255, 252, 205, 37, 255, 252, 206, 37, 255, 252, 208, 37, 255, 252, 210, 37, 255, 251, 211, 36, 255, 251, 213, 36, 255, 251, 215, 36, 255, 250, 216, 36, 255, 250, 218, 36, 255, 249, 220, 36, 255, 249, 221, 37, 255, 248, 223, 37, 255, 248, 225, 37, 255, 247, 226, 37, 255, 247, 228, 37, 255, 246, 230, 38, 255, 246, 232, 38, 255, 245, 233, 38, 255, 245, 235, 39, 255, 244, 237, 39, 255, 243, 238, 39, 255, 243, 240, 39, 255, 242, 242, 39, 255, 241, 244, 38, 255, 241, 245, 37, 255, 240, 247, 36, 255, 240, 249, 33, 255 ])
 };
 // module.exports = colorScales;
--- a/src/core/base.js
+++ b/src/core/base.js
@ -3,8 +3,8 @@
 * @author dxq613@gmail.com
 */
-const EventEmitter = require('wolfy87-eventemitter');
+import EventEmitter from 'wolfy87-eventemitter';
-const Util = require('../util');
+import Util from '../util';
 class Base extends EventEmitter {
@ -29,16 +29,6 @@ class Base extends EventEmitter {
  set(name, value) {
    this._attrs[name] = value;
  }
  /**
   * @protected
   * @param {Boolean} visible 是否可见
   * 显示、隐藏
   */
  changeVisible(/* visible */) {
  }
  destroy() {
    this._attrs = {};
    this.removeAllListeners();
@ -46,4 +36,4 @@ class Base extends EventEmitter {
  }
 }
-module.exports = Base;
+export default Base;
--- a/src/core/engine/geometry.js
+++ b/src/core/engine/geometry.js
@ -1,11 +0,0 @@
 class Geometry extends BufferGeometry {
  constructor() {
    super();
  }
  updateAttribute(name, startIndex, size, value) {
    const attribute = this.attributes[name];
    for (let i = 0; i < size; i++) {
      attribute.array[startIndex + i] = value[i];
    }
  }
 }
--- a/src/core/engine/index.js
+++ b/src/core/engine/index.js
@ -1,4 +1,5 @@
 import EventEmitter from 'wolfy87-eventemitter';
 import * as THREE from '../three';
 import Scene from './scene';
 import Camera from './camera';
 import Renderer from './renderer';
@ -11,8 +12,7 @@ export default class Engine extends EventEmitter {
    this._renderer = new Renderer(container).renderer;
    this._world = world;
    this._picking = Picking(this._world, this._renderer, this._camera, this._scene);
-    this._renderer.context.getExtension('OES_texture_float');
+    this.clock = new THREE.Clock();
    this._renderer.context.getExtension('OES_texture_float_linear');
  }
  _initPostProcessing() {
@ -26,10 +26,9 @@ export default class Engine extends EventEmitter {
  }
  run() {
-    this.engineID = requestAnimationFrame(() => {
+
    this.update();
    this.engineID = requestAnimationFrame(this.run.bind(this));
    });
  }
  stop() {
    cancelAnimationFrame(this.engineID);
--- a/src/core/engine/picking/picking.js
+++ b/src/core/engine/picking/picking.js
@ -1,20 +1,5 @@
 import PickingScene from './pickingScene';
 import * as THREE from '../../three';
 // TODO: Look into a way of setting this up without passing in a renderer and
 // camera from the engine
 // TODO: Add a basic indicator on or around the mouse pointer when it is over
 // something pickable / clickable
 //
 // A simple transparent disc or ring at the mouse point should work to start, or
 // even just changing the cursor to the CSS 'pointer' style
 //
 // Probably want this on mousemove with a throttled update as not to spam the
 // picking method
 //
 // Relies upon the picking method not redrawing the scene every call due to
 // the way TileLayer invalidates the picking scene
 let nextId = 1;
 class Picking {
@ -24,6 +9,7 @@ class Picking {
    this._camera = camera;
    this._raycaster = new THREE.Raycaster();
    this.scene = scene;
    this._envents = [];
    // TODO: Match this with the line width used in the picking layers
    this._raycaster.linePrecision = 3;
@ -52,15 +38,15 @@ class Picking {
    this._mouseUpHandler = this._onMouseUp.bind(this);
    this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
-
+    this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
-    // this._world.on('move', this._onWorldMove, this);
+    this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
  }
  _onMouseUp(event) {
    // Only react to main button click
-    if (event.button !== 0) {
+    // if (event.button !== 0) {
-      return;
+    //   return;
-    }
+    // }
    const point = { x: event.clientX, y: event.clientY };
    const normalisedPoint = { x: 0, y: 0 };
@ -71,6 +57,7 @@ class Picking {
  }
  _onWorldMove() {
    this._needUpdate = true;
  }
@ -86,26 +73,31 @@ class Picking {
    this._needUpdate = true;
  }
  // TODO: Make this only re-draw the scene if both an update is needed and the
  // camera has moved since the last update
  //
  // Otherwise it re-draws the scene on every click due to the way LOD updates
  // work in TileLayer – spamming this.add() and this.remove()
  //
  // TODO: Pause updates during map move / orbit / zoom as this is unlikely to
  // be a point in time where the user cares for picking functionality
  _update(point) {
    // if (this._needUpdate) {
    const texture = this._pickingTexture;
    this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);//  this._pickingTexture this._pickingScene
      // Read the rendering texture
    const texture = this._pickingTexture;
    if (this._needUpdate) {
      this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
      this._needUpdate = false;
    }
    this.pixelBuffer = new Uint8Array(4);
    this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
-      // this._needUpdate = false;
+
-    // }
+  }
  // 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up
  on(type) {
    this._mouseUpHandler = this._onMouseUp.bind(this);
    this._world._container.addEventListener(type, this._mouseUpHandler, false);
    this._envents.push([ type, this._mouseUpHandler ]);
  }
  off(type, hander) {
    this._world._container.removeEventListener(type, this._mouseUpHandler, false);
    this._envents = this._envents.filter(item => {
      return item[0] === 'type' && hander === item[1];
    });
  }
  _updateRender() {
    this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
@ -116,7 +108,7 @@ class Picking {
    // Interpret the pixel as an ID
    const id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]);
    // Skip if ID is 16646655 (white) as the background returns this
-    if (id === 16646655) {
+    if (id === 16646655 || this.pixelBuffer[3] === 0) {
      return;
    }
@ -139,7 +131,7 @@ class Picking {
    //
    // TODO: Look into the leak potential for passing so much by reference here
    const item = {
-      featureId: id,
+      featureId: id - 1,
      point2d: _point2d,
      point3d: _point3d,
      intersects
@ -171,7 +163,9 @@ class Picking {
    // TODO: Find a way to properly remove these listeners as they stay
    // active at the moment
    window.removeEventListener('resize', this._resizeHandler, false);
-    this._world._container.removeEventListener('mouseup', this._mouseUpHandler, false);
+    this._envents.forEach(event => {
      this._world._container.removeEventListener(event[0], event[1], false);
    });
    this._world.off('move', this._onWorldMove);
--- a/src/core/engine/picking/pickingMaterial.js
+++ b/src/core/engine/picking/pickingMaterial.js
@ -1,37 +1,15 @@
-import * as THREE from '../../three';
+import Material from '../../../geom/material/material';
 import picking_frag from './picking_frag.glsl';
 import picking_vert from './picking_vert.glsl';
-// FROM: https://github.com/brianxu/GPUPicker/blob/master/GPUPicker.js
+export default function PickingMaterial(options) {
-const PickingMaterial = function() {
+  const material = new Material({
  THREE.ShaderMaterial.call(this, {
    uniforms: {
-      size: {
+      u_zoom: { value: options.u_zoom || 1 }
        type: 'f',
        value: 0.01
      },
      scale: {
        type: 'f',
        value: 400
      }
    },
    vertexShader: picking_vert,
-    fragmentShader: picking_frag
+    fragmentShader: picking_frag,
    transparent: false
  });
-
+  return material;
-  this.linePadding = 2;
+}
 };
 PickingMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype);
 PickingMaterial.prototype.constructor = PickingMaterial;
 PickingMaterial.prototype.setPointSize = function(size) {
  this.uniforms.size.value = size;
 };
 PickingMaterial.prototype.setPointScale = function(scale) {
  this.uniforms.scale.value = scale;
 };
 export default PickingMaterial;
--- a/src/core/engine/picking/picking_frag.glsl
+++ b/src/core/engine/picking/picking_frag.glsl
@ -1,7 +1,10 @@
-#ifdef GL_ES
+
 precision highp float;
 #endif
 varying vec4 worldId;
 void main() {
    if(worldId.x == 0. &&worldId.y == 0. && worldId.z==0.){
        discard;
        return;
    }
    gl_FragColor = worldId;
 }
--- a/src/core/engine/picking/picking_vert.glsl
+++ b/src/core/engine/picking/picking_vert.glsl
@ -1,11 +1,28 @@
 attribute float pickingId;
 #ifdef polyline
 attribute float a_size;
 attribute float a_miter;
 #endif 
 #ifdef point
 attribute vec3 a_size;
 attribute vec3 a_shape;
 #endif
 uniform float u_zoom;
 varying vec4 worldId;
 void main() {
    mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
-    vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * pickingId);
+    float scale = pow(2.0,(20.0 - u_zoom));
    vec3 newposition =  position;
    #ifdef point 
        newposition =position + a_size * scale * a_shape;
    #endif
    #ifdef polyline
      newposition = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
     #endif 
    float id = step(0.,pickingId) * pickingId;
    vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
    a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
    worldId = vec4(a,1);
-    gl_PointSize = a_size;
+    //gl_PointSize = a_size;
-    gl_Position = matModelViewProjection * vec4( position, 1.0 );
+    gl_Position = matModelViewProjection * vec4( newposition, 1.0 );
 }
--- a/src/core/engine/renderpass.js
+++ b/src/core/engine/renderpass.js
@ -10,7 +10,7 @@ export class RenderPass {
    this._init(cfg);
  }
-  _init(cfg) {
+  _init() {
    this.scene = new THREE.Scene();
    const parameters = { minFilter: THREE.NearestFilter,
      magFilter: THREE.NearestFilter,
@ -19,7 +19,7 @@ export class RenderPass {
      depthBuffer: false
    };
    const size = this.renderer.getSize();
-    this.pass = new THREE.WebGLRenderTarget(512, 512, parameters);
+    this.pass = new THREE.WebGLRenderTarget(size.width, size.height, parameters);
    this.originClearColor = this.renderer.getClearColor();
    this.originClearAlpha = this.renderer.getClearAlpha();
    this.texture = this.pass.texture;
--- a/src/core/extend/windframebuffer/drawMaterial.js
+++ b/src/core/extend/windframebuffer/drawMaterial.js
@ -1,23 +0,0 @@
 import Material from '../../../geom/material/material';
 import draw_vert from './draw_vert.glsl';
 import draw_frag from './draw_frag.glsl';
 export default function DrawMaterial(options) {
  const material = new Material({
    uniforms: {
      u_color_ramp: { value: options.u_color_ramp },
      u_wind_max: { value: options.u_wind_max },
      u_particles_res: { value: options.u_particles_res },
      u_wind_min: { value: options.u_wind_min },
      u_opacity: { value: options.u_opacity },
      u_wind: { value: options.u_wind },
      u_particles: { value: options.u_particles },
      u_bbox: { value: options.u_bbox }
    },
    vertexShader: draw_vert,
    fragmentShader: draw_frag,
    transparent: true
  });
 // material.blending = THREE.AdditiveBlending
  return material;
 }
--- a/src/core/extend/windframebuffer/draw_frag.glsl
+++ b/src/core/extend/windframebuffer/draw_frag.glsl
@ -1,19 +0,0 @@
 precision mediump float;
 uniform sampler2D u_wind;
 uniform vec2 u_wind_min;
 uniform vec2 u_wind_max;
 uniform sampler2D u_color_ramp;
 uniform float u_opacity;
 varying vec2 v_particle_pos;
 void main() {
    vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);
    float speed_t = length(velocity) / length(u_wind_max);
    // color ramp is encoded in a 16x16 texture
    vec2 ramp_pos = vec2(
        fract(16.0 * speed_t),
        floor(16.0 * speed_t) / 16.0);
    gl_FragColor = texture2D(u_color_ramp, ramp_pos);
 }
--- a/src/core/extend/windframebuffer/draw_geometry.js
+++ b/src/core/extend/windframebuffer/draw_geometry.js
@ -1,34 +0,0 @@
 import { DataType, DrawMode } from '@ali/r3-base';
 import { BufferGeometry } from '@ali/r3-geometry';
 /**
 * 创建点图层几何体
 */
 export default class DrawGeometry extends BufferGeometry {
  constructor(opts) {
    super(opts.name);
    this._index = opts.index;
    this.mode = DrawMode.POINTS;
    this.primitive.indexType = DataType.UNSIGNED_INT;
    this.initialize();
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    super.initialize([
        { semantic: 'INDEX', size: 1, type: DataType.FLOAT, normalized: false }
    ], this._index.length);
    this._index.forEach((vert, j) => {
      this.setVertexValues(j, {
        INDEX: [ vert ]
      });
    });
  }
 }
--- a/src/core/extend/windframebuffer/draw_vert.glsl
+++ b/src/core/extend/windframebuffer/draw_vert.glsl
@ -1,26 +0,0 @@
 precision mediump float;
 attribute float a_index;
 uniform sampler2D u_particles;
 uniform vec4 u_bbox;
 uniform float u_particles_res;
 varying vec2 v_particle_pos;
 void main() {
    mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
    vec4 color = texture2D(u_particles, vec2(
        fract(a_index / u_particles_res),
        1.0 - floor(a_index / u_particles_res) / u_particles_res));
    // decode current particle position from the pixel's RGBA value
    v_particle_pos = vec2(
        color.r / 255.0 + color.b,
        1.0 - (color.g / 255.0 + color.a));
    vec2 xyrange = u_bbox.zw - u_bbox.xy;
    float x = u_bbox.x + v_particle_pos.x * xyrange.x;
    float y = u_bbox.w - v_particle_pos.y * xyrange.y;
    gl_PointSize = 1.0;
    //gl_Position =  matModelViewProjection * vec4(v_particle_pos, 0.0, 1.0);
    gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);
 }
--- a/src/core/extend/windframebuffer/geoRenderPass.js
+++ b/src/core/extend/windframebuffer/geoRenderPass.js
@ -1,39 +0,0 @@
 import { RenderPass } from '@ali/r3-renderer-basic';
 import { TextureFilter } from '@ali/r3-base';
 export class GeoRenderPass extends RenderPass {
  constructor(name, priority, renderTarget, mask, Material, id, done) {
    renderTarget.texture.setFilter(TextureFilter.NEAREST, TextureFilter.NEAREST);
    super(name, priority, renderTarget, Material, mask);
    typeof (id) === 'string' || typeof (id) === 'number' && (id = [ id ]);
    this.id = id;
    this.renderPassFlags = [];
    this.done = done;
  }
    /* eslint-disable */
  preRender(camera, opaquaQueue, transparentQueue) {
    /* eslint-disable */
      opaquaQueue.items.forEach(item => {
        const nodeAbility = item.nodeAbility;
        this.renderPassFlags.push(nodeAbility.renderPassFlag);
        this.id.indexOf(nodeAbility.id) > -1 ? nodeAbility.renderPassFlag = 0 : nodeAbility.renderPassFlag = 1;
      });
  }
  postRender(camera, opaquaQueue, transparentQueue) {
      opaquaQueue.items.forEach((item, index) => {
        const nodeAbility = item.nodeAbility;
        nodeAbility.renderPassFlag = this.renderPassFlags[index];
      });
      this.renderPassFlags.length = 0;
      if(this.done) {
        this.done();
      }
  }
 }
 export { ColorRenderPass };
--- a/src/core/extend/windframebuffer/quad.vert.glsl
+++ b/src/core/extend/windframebuffer/quad.vert.glsl
@ -1,7 +0,0 @@
 precision highp float;
 varying vec2 v_texCoord;
 void main() {
   v_texCoord = uv;
   gl_Position =  vec4(1.0 - 2.0 * vec2(position), 0., 1.0);
 }
--- a/src/core/extend/windframebuffer/screen_frag.glsl
+++ b/src/core/extend/windframebuffer/screen_frag.glsl
@ -1,12 +0,0 @@
 precision mediump float;
 uniform sampler2D u_texture;
 uniform float u_opacity;
 varying vec2 v_texCoord;
 void main() {
  if(u_opacity == 0.0)
    discard;
  gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity;
  // gl_FragColor.w =u_opacity;
 }
--- a/src/core/extend/windframebuffer/updateMaterial.js
+++ b/src/core/extend/windframebuffer/updateMaterial.js
@ -1,26 +0,0 @@
 import Material from '../../../geom/material/material';
 import quad_vert from './quad.vert.glsl';
 import update_frag from './update_frag.glsl';
 export default function UpdateMaterial(options) {
  const material = new Material({
    uniforms: {
      u_wind_max: { value: options.u_wind_max },
      u_particles_res: { value: options.u_particles_res },
      u_wind_min: { value: options.u_wind_min },
      u_opacity: { value: options.u_opacity },
      u_wind: { value: options.u_wind },
      u_particles: { value: options.u_particles },
      u_drop_rate_bump: { value: options.u_drop_rate_bump },
      u_drop_rate: { value: options.u_drop_rate },
      u_speed_factor: { value: options.u_speed_factor },
      u_rand_seed: { value: options.u_rand_seed },
      u_extent: { value: options.u_extent },
      u_wind_res: { value: options.u_wind_res }
    },
    vertexShader: quad_vert,
    fragmentShader: update_frag,
    transparent: true
  });
 // material.blending = THREE.AdditiveBlending
  return material;
 }
--- a/src/core/extend/windframebuffer/update_frag.glsl
+++ b/src/core/extend/windframebuffer/update_frag.glsl
@ -1,76 +0,0 @@
 precision highp float;
 uniform sampler2D u_particles;
 uniform sampler2D u_wind;
 uniform vec2 u_wind_res;
 uniform vec2 u_wind_min;
 uniform vec2 u_wind_max;
 uniform float u_rand_seed;
 uniform float u_speed_factor;
 uniform float u_drop_rate;
 uniform float u_drop_rate_bump;
 uniform vec4 u_extent;     
 uniform float  u_particles_res;
 varying vec2 v_texCoord;
 // pseudo-random generator
 const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
 float rand(const vec2 co) {
    float t = dot(rand_constants.xy, co);
    return fract(sin(t) * (rand_constants.z + t));
 }
 // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation
 vec2 lookup_wind(const vec2 uv) {
    // return texture2D(u_wind, uv).rg; // lower-res hardware filtering
    vec2 px = 1.0 / u_wind_res;
    vec2 vc = (floor(uv * u_wind_res)) * px;
    vec2 f = fract(uv * u_wind_res);
    vec2 tl = texture2D(u_wind, vc).rg;
    vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;
    vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;
    vec2 br = texture2D(u_wind, vc + px).rg;
    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
 }
 void main() {
    vec4 color = texture2D(u_particles, v_texCoord);
    vec2 pos = vec2(
        color.r / 255.0 + color.b,
        color.g / 255.0 + color.a); // decode particle position from pixel RGBA
     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));
     float speed_t = length(velocity) / length(u_wind_max);
    //  pos = pos + vec2(0.001,0.001);
    // take EPSG:4236 distortion into account for calculating where the particle moved
    // float y = u_extent.w - pos.y * (u_extent.w - u_extent.y);
    // float distortion = cos(radians(y));
    // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
       // take EPSG:4236 distortion into account for calculating where the particle moved
    float distortion = cos(radians(pos.y * 180.0 - 90.0));
    vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
    // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
    // update particle position, wrapping around the date line
    pos = fract(1.0 + pos + offset);
    // // a random seed to use for the particle drop
    vec2 seed = (pos + v_texCoord) * u_rand_seed;
    // drop rate is a chance a particle will restart at random position, to avoid degeneration
    float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;
    float drop = step(1.0 - drop_rate, rand(seed));
    vec2 random_pos = vec2(
        rand(seed + 1.3),
        rand(seed + 2.1));
    pos = mix(pos, random_pos, drop);
    // encode the new particle position back into RGBA
    gl_FragColor = vec4(
        fract(pos * 255.0),
        floor(pos * 255.0) / 255.0);
 }
--- a/src/core/extend/windframebuffer/windMaterial.js
+++ b/src/core/extend/windframebuffer/windMaterial.js
@ -1,17 +0,0 @@
 import image_vert from './wind_vert.glsl';
 import image_frag from './wind_frag.glsl';
 import Material from '../../../geom/material/material';
 export default function WindMaterial(options) {
  const material = new Material({
    uniforms: {
      u_texture: { value: options.u_texture },
      u_opacity: { value: options.u_opacity }
    },
    vertexShader: image_vert,
    fragmentShader: image_frag,
    transparent: true
  });
 // material.blending = THREE.AdditiveBlending
  return material;
 }
--- a/src/core/extend/windframebuffer/wind_frag.glsl
+++ b/src/core/extend/windframebuffer/wind_frag.glsl
@ -1,11 +0,0 @@
 precision mediump float;
 uniform sampler2D u_texture;
 uniform float u_opacity;
 varying vec2 v_texCoord;
 void main() {
  if(u_opacity == 0.0)
    discard;
  gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity;
 }
--- a/src/core/extend/windframebuffer/wind_vert.glsl
+++ b/src/core/extend/windframebuffer/wind_vert.glsl
@ -1,6 +0,0 @@
 precision highp float;
 varying vec2 v_texCoord;
 void main() {
   v_texCoord = uv;
   gl_Position =  vec4(1.0 - 2.0 * vec2(position), 0., 1.0);
 }
--- a/src/core/image.js
+++ b/src/core/image.js
@ -1,15 +1,20 @@
 import * as THREE from './three';
 import EventEmitter from 'wolfy87-eventemitter';
 import { getImage } from '../util/ajax';
-export default class LoadImage {
+// 将图片标注绘制在512*512的画布上，每个大小 64*64 支持 64种图片
 export default class LoadImage extends EventEmitter {
  constructor() {
-
+    super();
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.imageWidth = 64;
    this.canvas = document.createElement('canvas');
    this.canvas.style.cssText += 'height: 512px;width: 512px;';
    this.canvas.width = this.imageWidth * 8;
    this.canvas.height = this.imageWidth * 8;
    this.ctx = this.canvas.getContext('2d');
    this.images = [];
-    this.imagesCount = -1;
+    this.imagesCount = 0;
    this.imagePos = {};
  }
  addImage(id, opt) {
@ -17,18 +22,21 @@ export default class LoadImage {
    const imageCount = this.imagesCount;
    const x = imageCount % 8 * 64;
    const y = parseInt(imageCount / 8) * 64;
-
+    this.imagePos[id] = { x: x / 512, y: y / 512 };
    this.texture = new THREE.Texture(this.canvas);
    if (typeof opt === 'string') {
      getImage({ url: opt }, (err, img) => {
        img.id = id;
        this.images.push(img);
        this.ctx.drawImage(img, x, y, 64, 64);
-        const texture = new THREE.Texture(this.canvas);
+
-        texture.magFilter = THREE.LinearFilter;
+        this.texture.magFilter = THREE.LinearFilter;
-        texture.minFilter = THREE.LinearFilter;
+        this.texture.minFilter = THREE.LinearFilter;
-        texture.needsUpdate = true;
+        this.texture.needsUpdate = true;
-        this.texture = texture;
+
-        this.imagePos[id] = { x: x / 512, y: y / 512 };
+        if (this.images.length === this.imagesCount) {
          this.emit('imageLoaded');
        }
      });
    } else {
      const { width, height, channels } = opt;
@ -40,8 +48,11 @@ export default class LoadImage {
      image.id = id;
      this.images.push(image);
      this.ctx.drawImage(image, x, y, 64, 64);
-      this.texture = new CanvasTexture(this.canvas);
+      this.texture = new THREE.CanvasTexture(this.canvas);
      this.imagePos[id] = { x: x >> 9, y: y >> 9 };
      if (this.images.length === this.imagesCount) {
        this.emit('imageLoaded');
      }
    }
  }
--- a/src/core/layer.js
+++ b/src/core/layer.js
@ -6,7 +6,6 @@ import Base from './base';
 import * as THREE from './three';
 import ColorUtil from '../attr/color-util';
 import * as source from '../source/index';
 import * as turfMeta from '@turf/meta';
 import PickingMaterial from '../core/engine/picking/pickingMaterial';
 import Attr from '../attr/index';
 import Util from '../util';
@ -37,15 +36,18 @@ export default class Layer extends Base {
      attrs: {},
      // 样式配置项
      styleOptions: {
-        stroke: 'rgb(255,255,255)',
+        stroke: [ 1.0, 1.0, 1.0, 1.0 ],
        strokeWidth: 1.0,
-        opacity: 1.0
+        opacity: 1.0,
        texture: false
      },
      // 选中时的配置项
      selectedOptions: null,
      // active 时的配置项
      activedOptions: null,
-      animateOptions: null
+      animateOptions: {
        enable: false
      }
    };
  }
  constructor(scene, cfg) {
@ -59,23 +61,37 @@ export default class Layer extends Base {
    const layerId = this._getUniqueId();
    this.layerId = layerId;
    this._activeIds = null;
    // todo 用户参数
    this._object3D.position.z = layerId * 1000;
    scene._engine._scene.add(this._object3D);
    this.layerMesh = null;
  }
  /**
   * 将图层添加加到 Object
-   * @param {*} object
+   * @param {*} object three 物体
   */
  add(object) {
    this.layerMesh = object;
    this._visibleWithZoom();
    this.scene.on('zoomchange', () => {
      this._visibleWithZoom();
    });
    this.layerMesh.onBeforeRender = () => {
      const zoom = this.scene.getZoom();
      this.layerMesh.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime());
      this.layerMesh.material.setUniformsValue('u_zoom', zoom);
    };
    // 更新
    if (this._needUpdateFilter) {
      this._updateFilter();
    }
    this._object3D.add(object);
    this._addPickMesh(object);
  }
  remove(object) {
    this._object3D.remove(object);
  }
  _getUniqueId() {
    return id++;
@ -89,11 +105,13 @@ export default class Layer extends Base {
    const { type = dataType } = cfg;
    cfg.data = data;
    cfg.mapType = this.get('mapType');
    this.layerSource = new source[type](cfg);
    return this;
  }
  color(field, values) {
    this._needUpdateColor = true;// 标识颜色是否需要更新
    this._createAttrOption('color', field, values, Global.colors);
    return this;
  }
@ -136,7 +154,7 @@ export default class Layer extends Base {
  }
  style(field, cfg) {
-    const colorItem = [ 'fill', 'stroke' ];
+    const colorItem = [ 'fill', 'stroke', 'color', 'baseColor', 'brightColor', 'windowColor' ];
    let styleOptions = this.get('styleOptions');
    if (!styleOptions) {
      styleOptions = {};
@ -153,7 +171,7 @@ export default class Layer extends Base {
    styleOptions.fields = fields;
    Util.assign(styleOptions, cfg);
    for (const item in cfg) {
-      if (colorItem.indexOf(item) != -1) {
+      if (colorItem.indexOf(item) !== -1) {
        styleOptions[item] = ColorUtil.color2RGBA(styleOptions[item]);
      }
      styleOptions[item] = styleOptions[item];
@ -162,11 +180,27 @@ export default class Layer extends Base {
    return this;
  }
  filter(field, values) {
    this._needUpdateFilter = true;
    this._createAttrOption('filter', field, values, true);
    return this;
  }
-  animate(callback) {
+  animate(field, cfg) {
-    this.set('animateOptions', callback);
+    let animateOptions = this.get('animateOptions');
    if (!animateOptions) {
      animateOptions = {};
      this.set('animateOptions', animateOptions);
    }
    if (Util.isObject(field)) {
      cfg = field;
      field = null;
    }
    let fields;
    if (field) {
      fields = parseFields(field);
    }
    animateOptions.fields = fields;
    Util.assign(animateOptions, cfg);
    this.set('animateOptions', animateOptions);
    return this;
  }
  texture() {
@ -211,10 +245,12 @@ export default class Layer extends Base {
    }
    this._setAttrOptions(attrName, attrCfg);
  }
  // 初始化图层
  init() {
    this._initAttrs();
    this._scaleByZoom();
    this._mapping();
    const activeHander = this._addActiveFeature.bind(this);
    if (this.get('allowActive')) {
@ -227,35 +263,30 @@ export default class Layer extends Base {
  _addActiveFeature(e) {
    const { featureId } = e;
    const activeStyle = this.get('activedOptions');
-    const data = this.layerSource.get('data');
+    const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId);
    const selectFeatureIds = [];
    let featureStyleId = 0;
    /* eslint-disable */
    turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => {
    /* eslint-disable */
      if (featureIndex === featureId) {
        selectFeatureIds.push(featureStyleId);
      }
      featureStyleId++;
      if (featureIndex > featureId) {
        return;
      }
    });
    if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; }
    const style = Util.assign({}, this.StyleData[featureId]);
    style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
-    this.updateStyle(selectFeatureIds, style);
+    this.updateStyle([ featureId ], style);
  }
  _initAttrs() {
    const self = this;
    const attrs = this.get('attrs');
    const attrOptions = this.get('attrOptions');
    for (const type in attrOptions) {
      if (attrOptions.hasOwnProperty(type)) {
        this._updateAttr(type);
      }
    }
  }
  _updateAttr(type) {
    const self = this;
    const attrs = this.get('attrs');
    const attrOptions = this.get('attrOptions');
    const option = attrOptions[type];
    option.neadUpdate = true;
    const className = Util.upperFirst(type);
    const fields = parseFields(option.field);
    const scales = [];
@ -272,8 +303,6 @@ export default class Layer extends Base {
    const attr = new Attr[className](option);
    attrs[type] = attr;
  }
    }
  }
  _updateSize(zoom) {
    const sizeOption = this.get('attrOptions').size;
    const fields = parseFields(sizeOption.field);
@ -303,6 +332,7 @@ export default class Layer extends Base {
      for (const k in attrs) {
        if (attrs.hasOwnProperty(k)) {
          const attr = attrs[k];
          attr.needUpdate = false;
          const names = attr.names;
          const values = self._getAttrValues(attr, record);
          if (names.length > 1) { // position 之类的生成多个字段的属性
@ -323,14 +353,16 @@ export default class Layer extends Base {
    this.StyleData = mappedData;
    return mappedData;
  }
-  _updateMap(attrName) {
+  // 更新地图映射
  _updateMaping() {
    const self = this;
    const attrs = self.get('attrs');
    const data = this.layerSource.propertiesData;
    for (let i = 0; i < data.length; i++) {
      const record = data[i];
-      if (attrs.hasOwnProperty(attrName)) {
+      for (const attrName in attrs) {
        if (attrs.hasOwnProperty(attrName) && attrs[attrName].neadUpdate) {
          const attr = attrs[attrName];
          const names = attr.names;
          const values = self._getAttrValues(attr, record);
@ -344,6 +376,8 @@ export default class Layer extends Base {
            this.StyleData[i][names[0]] = values.length === 1 ? values[0] : values;
          }
          attr.neadUpdate = true;
        }
      }
    }
  }
@ -405,9 +439,22 @@ export default class Layer extends Base {
  }
  _addPickMesh(mesh) {
    this._pickingMesh = new THREE.Object3D();
    this._visibleWithZoom();
    this.scene.on('zoomchange', () => {
      this._visibleWithZoom();
    });
    this.addToPicking(this._pickingMesh);
-    const pickmaterial = new PickingMaterial();
+    const pickmaterial = new PickingMaterial({
      u_zoom: this.scene.getZoom()
    });
    const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
    pickmaterial.setDefinesvalue(this.type, true);
    pickingMesh.onBeforeRender = () => {
      const zoom = this.scene.getZoom();
      pickingMesh.material.setUniformsValue('u_zoom', zoom);
    };
    this._pickingMesh.add(pickingMesh);
  }
  _setPickingId() {
@ -415,9 +462,20 @@ export default class Layer extends Base {
  }
  _addPickingEvents() {
    // TODO: Find a way to properly remove this listener on destroy
-    this.scene.on('pick', (point2d, point3d, intersects) => {
+    this.scene.on('pick', e => {
      // Re-emit click event from the layer
-      this.emit('click', this, point2d, point3d, intersects);
+      const { featureId, point2d, point3d, intersects } = e;
      if (intersects.length === 0) { return; }
      const source = this.layerSource.get('data');
      const feature = source.features[featureId];
      const lnglat = this.scene.containerToLngLat(point2d);
      const target = {
        feature,
        pixel: point2d,
        lnglat: { lng: lnglat.lng, lat: lnglat.lat }
      };
      this.emit('click', target);
      // this.emit('move', target);
    });
  }
  /**
@ -426,113 +484,110 @@ export default class Layer extends Base {
   * @param {*} style  更新的要素样式
   */
  updateStyle(featureStyleId, style) {
    const {indices} = this.buffer.bufferStruct;
    if (this._activeIds) {
      this.resetStyle();
    }
    this._activeIds = featureStyleId;
-    
+    const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
    const id = featureStyleId[0];
    let dataIndex = 0;
    if(indices){ 
      // 面图层和
        for (let i = 0; i < id; i++) {
          dataIndex += indices[i].length;
        }
     } else {
      dataIndex = id;
     }
    featureStyleId.forEach((index,value) => {
      let vertindex =[value]
      if(indices)
        vertindex = indices[index];
    const color = style.color;
    const colorAttr = this.layerMesh.geometry.attributes.a_color;
-      colorAttr.dynamic =true;
+    const firstId = pickingId.indexOf(featureStyleId[0] + 1);
-      vertindex.forEach(() => {
+    for (let i = firstId; i < pickingId.length; i++) {
-        colorAttr.array[dataIndex*4+0]=color[0];
+      if (pickingId[i] == featureStyleId[0] + 1) {
-        colorAttr.array[dataIndex*4+1]=color[1];
+        colorAttr.array[i * 4 + 0] = color[0];
-        colorAttr.array[dataIndex*4+2]=color[2];
+        colorAttr.array[i * 4 + 1] = color[1];
-        colorAttr.array[dataIndex*4+3]=color[3];
+        colorAttr.array[i * 4 + 2] = color[2];
-        dataIndex++;
+        colorAttr.array[i * 4 + 3] = color[3];
-      });
+      } else {
-      colorAttr.needsUpdate =true
+        break;
-    });
+      }
    }
    colorAttr.needsUpdate = true;
    return;
  }
  _updateColor() {
    this._updateMaping();
  }
   /**
   * 用于过滤数据
   * @param {*} filterData  数据过滤标识符
   */
-  updateFilter(filterData) {
+  _updateFilter() {
    this._updateMaping();
    const filterData = this.StyleData;
    this._activeIds = null; // 清空选中元素
    let dataIndex = 0;
    const colorAttr = this.layerMesh.geometry.attributes.a_color;
-    if(this.layerMesh.type =='Points'){ //点图层更新
+    const pickAttr = this.layerMesh.geometry.attributes.pickingId;
-      filterData.forEach((item,index)=>{
+    pickAttr.array.forEach((id, index) => {
-        const color = [ ...this.StyleData[index].color ];
+      id = Math.abs(id);
      const color = [ ...this.StyleData[id - 1].color ];
      id = Math.abs(id);
      const item = filterData[id - 1];
      if (item.hasOwnProperty('filter') && item.filter === false) {
-          color[3] = 0;
+        colorAttr.array[index * 4 + 0] = 0;
-        }
+        colorAttr.array[index * 4 + 1] = 0;
        colorAttr.array[index * 4 + 2] = 0;
        colorAttr.array[index * 4 + 3] = 0;
        pickAttr.array[index] = -id;
      } else {
        colorAttr.array[index * 4 + 0] = color[0];
        colorAttr.array[index * 4 + 1] = color[1];
        colorAttr.array[index * 4 + 2] = color[2];
        colorAttr.array[index * 4 + 3] = color[3];
-      })
+        pickAttr.array[index] = id;
      colorAttr.needsUpdate =true;
      return;
      }
    const {indices} = this.buffer.bufferStruct;
     indices.forEach((vertIndexs, i) => {
      const color = [ ...this.StyleData[i].color ];
      if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
        color[3] = 0;
      }
      vertIndexs.forEach(() => {
        colorAttr.array[dataIndex*4+0]=color[0];
        colorAttr.array[dataIndex*4+1]=color[1];
        colorAttr.array[dataIndex*4+2]=color[2];
        colorAttr.array[dataIndex*4+3]=color[3];
        dataIndex++;
    });
    colorAttr.needsUpdate = true;
-    });
+    pickAttr.needsUpdate = true;
    this._needUpdateFilter = false;
    this._needUpdateColor = false;
  }
  _visibleWithZoom() {
    const zoom = this.scene.getZoom();
    const minZoom = this.get('minZoom');
    const maxZoom = this.get('maxZoom');
    // z-fighting
    let offset = 0;
    if (this.type === 'point') {
      offset = 5;
    } else if (this.type === 'polyline') {
      offset = 2;
    }
   this._object3D.position.z = offset * Math.pow(2, 20 - zoom);
    if (zoom < minZoom || zoom > maxZoom) {
      this._object3D.visible = false;
    } else if (this.get('visible')) {
      this._object3D.visible = true;
    }
  }
  /**
   * 重置高亮要素
   */
  resetStyle() {
-    const {indices} = this.buffer.bufferStruct;
+    const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
    const colorAttr = this.layerMesh.geometry.attributes.a_color;
    let dataIndex = 0;
    const id = this._activeIds[0];
    if(indices){
      for (let i = 0; i < id; i++) {
        dataIndex += indices[i].length;
      }
    } else {
      dataIndex = id;
    }
    this._activeIds.forEach((index, value) => {
      const color = this.StyleData[index].color;
-      let vertindex = [value];
+      const firstId = pickingId.indexOf(index + 1);
-      if(indices){
+      for (let i = firstId; i < pickingId.length; i++) {
-       vertindex = indices[index];
+        if (pickingId[i] == index + 1) {
          colorAttr.array[i * 4 + 0] = color[0];
          colorAttr.array[i * 4 + 1] = color[1];
          colorAttr.array[i * 4 + 2] = color[2];
          colorAttr.array[i * 4 + 3] = color[3];
        }
      vertindex.forEach(() => {
        colorAttr.array[dataIndex*4+0]=color[0];
        colorAttr.array[dataIndex*4+1]=color[1];
        colorAttr.array[dataIndex*4+2]=color[2];
        colorAttr.array[dataIndex*4+3]=color[3];
        dataIndex++;
      });
      colorAttr.needsUpdate =true
    });
      }
-  destroy() {
+    });
    colorAttr.needsUpdate = true;
  }
  /**
   * 销毁Layer对象
   */
  despose() {
    this.destroy();
    if (this._object3D && this._object3D.children) {
      let child;
      for (let i = 0; i < this._object3D.children.length; i++) {
--- a/src/core/scene.js
+++ b/src/core/scene.js
@ -3,10 +3,8 @@ import * as THREE from './three';
 import * as layers from '../layer';
 import Base from './base';
 import LoadImage from './image';
 import Utils from '../util';
 import { MapProvider } from '../map/provider';
-import { MapBox } from '../map/mapbox';
+import GaodeMap from '../map/gaodeMap';
 import AMap from '../map/AMap';
 import Global from '../global';
 export default class Scene extends Base {
  getDefaultCfg() {
@ -15,6 +13,7 @@ export default class Scene extends Base {
  constructor(cfg) {
    super(cfg);
    this._initMap();
    this._initAttribution();
    this.addImage();
    this._layers = [];
  }
@ -28,26 +27,20 @@ export default class Scene extends Base {
    this._engine._picking.add(object);
  }
  _initMap() {
    const mapType = this.mapType = this.get('mapType');
    this.mapContainer = this.get('id');
    this._container = document.getElementById(this.mapContainer);
-    let Map = null;
+    const Map = new MapProvider(this.mapContainer, this._attrs);
    if (mapType === 'mapbox') {
      Map = new MapBox(this.mapContainer, this.get('map'));
    } else {
      Map = new MapProvider(this.mapContainer, this._attrs);
    }
    Map.on('mapLoad', () => {
      this._initEngine(Map.renderDom);
-      const sceneMap = new AMap(Map.map);
+      const sceneMap = new GaodeMap(Map.map);
-      Utils.assign(this.__proto__, sceneMap.__proto__);
+      // eslint-disable-next-line
      Object.getOwnPropertyNames(sceneMap.__proto__).forEach((key)=>{
        if ('key' !== 'constructor') { this.__proto__[key] = sceneMap.__proto__[key]; }
      });
      this.map = Map.map;
      Map.asyncCamera(this._engine);
            // this._addLight();
      this.initLayer();
-        //   this.zoomAsync();
+      this.emit('loaded');
      this.emit('load');
    });
  }
@ -61,11 +54,26 @@ export default class Scene extends Base {
      };
    }
  }
  on(type, hander) {
    if (this.map) { this.map.on(type, hander); }
    super.on(type, hander);
  }
  _initAttribution() {
    const message = '<a href="http://antv.alipay.com/zh-cn/index.html title="Large-scale WebGL-powered Geospatial Data Visualization">AntV | L7  </a>';
    const element = document.createElement('div');
    element.innerHTML = message;
    element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0px;';
    this._container.appendChild(element);
  }
  addImage() {
    this.image = new LoadImage();
  }
  _initEvent() {
  }
  getLayers() {
    return this._layers;
  }
  _addLight() {
    const scene = this._engine._scene;
--- a/src/core/scene_bak.js
+++ b/src/core/scene_bak.js
@ -1,101 +0,0 @@
 import Engine from './engine';
 import * as layers from '../layer';
 import Base from './base';
 import ImageData from './image';
 import ModelData from './model';
 import { MapProvider } from '../map/provider';
 import { MapBox } from '../map/mapbox';
 /**
 *  const scene = new L7.Scene({
 *      container:'',
 *
 *      map:{
 *      }
 *    })
 */
 export default class Scene extends Base {
  getDefaultCfg() {
    return {
      mapType: 'AMAP'
    };
  }
  constructor(cfg) {
    super(cfg);
    this.mapContainer = this.get('id');
    this.layers = [];
    this.render = new Render();
    this._engine = new Engine(this.mapContainer);
    this.initMap();
    this.addImage();
    this.addModel(this.render);
  }
  initMap() {
    const mapType = this.mapType = this.get('mapType');
    let Map = null;
    if (mapType === 'mapbox') {
      Map = new MapBox(this.mapContainer, this.get('map'));
    } else {
      Map = new MapProvider(this.mapContainer, this.get('map'));
    }
    Map.on('mapLoad', () => {
      this.renderCanvas = Map.canvas;
      this.map = Map.map;
      this.render.initScene(this.renderCanvas);
      this.addModel();
      Map.asyncCamera(this.render.camera, this.render.cameraNode, this.render.layerNode);
      this.initLayer();
      this.zoomAsync();
      this.emit('load');
    });
  }
  initLayer() {
    for (const methodName in layers) {
      this[methodName] = cfg => {
        cfg ? cfg.mapType = this.mapType : cfg = { mapType: this.mapType };
        const layer = new layers[methodName](this, cfg);
        this.layers.push(layer);
        return layer;
      };
    }
  }
  removeLayer(layer) {
    layer.layerNode.destroy();
    this.layers = this.layers.filter(item => {
      return item.layerId != layer.layerId;
    });
  }
  getLayers() {
    return this.layers;
  }
  getLayer() {
  }
  addImage() {
    this.image = new ImageData();
  }
  addModel() {
    this.Model = new ModelData(this.render);
  }
  zoomAsync() {
    this.map.on('zoomend', () => {
      this.layers.forEach(layer => {
        const id = layer.layerId;
        const layerNode = this.render.layerNode.findChildByName(id);
        const zoom = this.map.getZoom();
        const minZoom = layer.get('minZoom');
        const maxZoom = layer.get('maxZoom');
        if (zoom < minZoom || zoom > maxZoom) {
          layerNode.isActive = false;
        } else {
          layerNode.isActive = true;
        }
      });
    });
  }
 }
--- a/src/core/source.js
+++ b/src/core/source.js
@ -2,12 +2,11 @@
 * @Author: ThinkGIS
 * @Date: 2018-06-08 11:19:06
 * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2018-10-23 16:20:56
+ * @Last Modified time: 2018-11-01 11:50:43
 */
-const Base = require('./base');
+import Base from './base';
 const Controller = require('./controller/index');
 import { aProjectFlat } from '../geo/project';
 const MAXZOOM = 0;
 export default class Source extends Base {
  getDefaultCfg() {
    return {
@ -83,14 +82,9 @@ export default class Source extends Base {
    });
  }
  _coorConvert(geo) {
-    const maptype = this.get('mapType');
+
    if (maptype === 'AMAP') {
    const ll = aProjectFlat(geo);
    return [ ll.x, -ll.y, geo[2] || 0 ];
    }
    // const ll = projectFlat(geo, Math.pow(2, MAXZOOM));
    // return [ ll[0], -ll[1], geo[2] || 0 ];
  }
--- a/src/core/three.js
+++ b/src/core/three.js
@ -4,6 +4,7 @@ export { Scene } from 'three/src/scenes/Scene.js';
 export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
 export { CanvasTexture } from 'three/src/textures/CanvasTexture.js';
 export { Object3D } from 'three/src/core/Object3D.js';
 export { Clock } from 'three/src/core/Clock';
 export { Points } from 'three/src/objects/Points.js';
 export { LineSegments } from 'three/src/objects/LineSegments.js';
 export { Mesh } from 'three/src/objects/Mesh.js';
@ -39,3 +40,5 @@ export {
 	Int8BufferAttribute,
 	BufferAttribute
 } from 'three/src/core/BufferAttribute.js';
 // export * from '../../build/Three.js';
--- a/src/geo/project.js
+++ b/src/geo/project.js
@ -15,4 +15,3 @@ export function aProjectFlat(lnglat) {
  y = scale * (c * y + d) - 106744817;
  return { x, y };
 }
--- a/src/geom/buffer/bufferBase.js
+++ b/src/geom/buffer/bufferBase.js
@ -69,24 +69,12 @@ export default class BufferBase extends Base {
    const normals = new Float32Array(indexCount * 3);
    const colors = new Float32Array(indexCount * 4);
    const pickingIds = new Float32Array(indexCount);
   // TODO:拾取
   // const pickingIds;
   // if (polygon.pickingId) {
   //   // One component per vertex per face (1 x 3 = 3)
   //   pickingIds = new Float32Array(polygon.facesCount * 3);
   // }
    const pA = new THREE.Vector3();
    const pB = new THREE.Vector3();
    const pC = new THREE.Vector3();
    const cb = new THREE.Vector3();
    const ab = new THREE.Vector3();
    let index;
    let lastIndex = 0;
    indices.forEach((indice, pIndex) => {
      for (let i = 0; i < indice.length / 3; i++) {
@ -96,24 +84,15 @@ export default class BufferBase extends Base {
        const ax = position[pIndex][index][0];
        const ay = position[pIndex][index][1];
        const az = position[pIndex][index][2];
        index = indice[i * 3 + 1];
        const bx = position[pIndex][index][0];
        const by = position[pIndex][index][1];
        const bz = position[pIndex][index][2];
        index = indice[i * 3 + 2];
        const cx = position[pIndex][index][0];
        const cy = position[pIndex][index][1];
        const cz = position[pIndex][index][2];
         // Flat face normals
         // From: http://threejs.org/examples/webgl_buffergeometry.html
        pA.set(ax, ay, az);
        pB.set(bx, by, bz);
        pC.set(cx, cy, cz);
@ -181,6 +160,142 @@ export default class BufferBase extends Base {
      normals,
      colors,
      pickingIds,
      faceUv: new Float32Array(polygon.faceUv),
      sizes: new Float32Array(polygon.sizes)
    };
    return attributes;
  }
  _toPointShapeAttributes(polygon) {
    // Three components per vertex per face (3 x 3 = 9)
    const { style, indices, position, indexCount, shapes, sizes } = polygon;
    const vertices = new Float32Array(indexCount * 3);
    const shapePositions = new Float32Array(indexCount * 3);
    const a_size = new Float32Array(indexCount * 3);
    const normals = new Float32Array(indexCount * 3);
    const colors = new Float32Array(indexCount * 4);
    const pickingIds = new Float32Array(indexCount);
    const pA = new THREE.Vector3();
    const pB = new THREE.Vector3();
    const pC = new THREE.Vector3();
    const cb = new THREE.Vector3();
    const ab = new THREE.Vector3();
    let lastIndex = 0;
    indices.forEach((indice, pIndex) => {
      for (let i = 0; i < indice.length / 3; i++) {
        let index = indice[i * 3];
        const color = style[pIndex].color;
        const coor1 = position[pIndex];
        const size = sizes[pIndex];
        const _pickingId = style[pIndex].id;
        const ax = shapes[pIndex][index][0];
        const ay = shapes[pIndex][index][1];
        const az = shapes[pIndex][index][2];
        index = indice[i * 3 + 1];
        const bx = shapes[pIndex][index][0];
        const by = shapes[pIndex][index][1];
        const bz = shapes[pIndex][index][2];
        index = indice[i * 3 + 2];
        const cx = shapes[pIndex][index][0];
        const cy = shapes[pIndex][index][1];
        const cz = shapes[pIndex][index][2];
        pA.set(ax, ay, az);
        pB.set(bx, by, bz);
        pC.set(cx, cy, cz);
        cb.subVectors(pC, pB);
        ab.subVectors(pA, pB);
        cb.cross(ab);
        cb.normalize();
        const nx = cb.x;
        const ny = cb.y;
        const nz = cb.z;
        vertices[lastIndex * 9 + 0] = coor1[0];
        vertices[lastIndex * 9 + 1] = coor1[1];
        vertices[lastIndex * 9 + 2] = coor1[2];
        shapePositions[lastIndex * 9 + 0] = ax;
        shapePositions[lastIndex * 9 + 1] = ay;
        shapePositions[lastIndex * 9 + 2] = az;
        a_size[lastIndex * 9 + 0] = size[0];
        a_size[lastIndex * 9 + 1] = size[1];
        a_size[lastIndex * 9 + 2] = size[2];
        normals[lastIndex * 9 + 0] = nx;
        normals[lastIndex * 9 + 1] = ny;
        normals[lastIndex * 9 + 2] = nz;
        colors[lastIndex * 12 + 0] = color[0];
        colors[lastIndex * 12 + 1] = color[1];
        colors[lastIndex * 12 + 2] = color[2];
        colors[lastIndex * 12 + 3] = color[3];
        vertices[lastIndex * 9 + 3] = coor1[0];
        vertices[lastIndex * 9 + 4] = coor1[1];
        vertices[lastIndex * 9 + 5] = coor1[2];
        shapePositions[lastIndex * 9 + 3] = bx;
        shapePositions[lastIndex * 9 + 4] = by;
        shapePositions[lastIndex * 9 + 5] = bz;
        a_size[lastIndex * 9 + 3] = size[0];
        a_size[lastIndex * 9 + 4] = size[1];
        a_size[lastIndex * 9 + 5] = size[2];
        normals[lastIndex * 9 + 3] = nx;
        normals[lastIndex * 9 + 4] = ny;
        normals[lastIndex * 9 + 5] = nz;
        colors[lastIndex * 12 + 4] = color[0];
        colors[lastIndex * 12 + 5] = color[1];
        colors[lastIndex * 12 + 6] = color[2];
        colors[lastIndex * 12 + 7] = color[3];
        vertices[lastIndex * 9 + 6] = coor1[0];
        vertices[lastIndex * 9 + 7] = coor1[1];
        vertices[lastIndex * 9 + 8] = coor1[2];
        a_size[lastIndex * 9 + 6] = size[0];
        a_size[lastIndex * 9 + 7] = size[1];
        a_size[lastIndex * 9 + 8] = size[2];
        shapePositions[lastIndex * 9 + 6] = cx;
        shapePositions[lastIndex * 9 + 7] = cy;
        shapePositions[lastIndex * 9 + 8] = cz;
        normals[lastIndex * 9 + 6] = nx;
        normals[lastIndex * 9 + 7] = ny;
        normals[lastIndex * 9 + 8] = nz;
        colors[lastIndex * 12 + 8] = color[0];
        colors[lastIndex * 12 + 9] = color[1];
        colors[lastIndex * 12 + 10] = color[2];
        colors[lastIndex * 12 + 11] = color[3];
        pickingIds[lastIndex * 3 + 0] = _pickingId;
        pickingIds[lastIndex * 3 + 1] = _pickingId;
        pickingIds[lastIndex * 3 + 2] = _pickingId;
        lastIndex++;
      }
    });
    const attributes = {
      vertices,
      normals,
      colors,
      pickingIds,
      shapePositions,
      a_size,
      faceUv: new Float32Array(polygon.faceUv)
    };
@ -188,7 +303,6 @@ export default class BufferBase extends Base {
    return attributes;
  }
  _toPolygonLineAttributes(polygonline) {
    console.log(polygonline);
    const { style, indices, position, indexCount } = polygonline;
    const vertices = new Float32Array(indexCount * 3);
    const colors = new Float32Array(indexCount * 4);
@ -236,7 +350,7 @@ export default class BufferBase extends Base {
      colors[index * 4 + 2] = style[index].color[2];
      colors[index * 4 + 3] = style[index].color[3];
      pickingIds[index] = style[index].id;
-      sizes[index] = style[index].size;
+      sizes[index] = style[index].size * window.devicePixelRatio;
      if (style[index].shape) { shapes[index] = style[index].shape; }
    });
    const attributes = {
@ -266,7 +380,8 @@ export default class BufferBase extends Base {
        context.fillRect(x, y, 2, 4);
      }
    }
-
+    context.fillStyle = '#105CB3';
    context.fillRect(0, 60, 32, 64);
    // build a bigger canvas and copy the small one in it
    // This is a trick to upscale the texture without filtering
    const canvas2 = document.createElement('canvas');
--- a/src/geom/buffer/image.js
+++ b/src/geom/buffer/image.js
@ -32,7 +32,7 @@ export default class ImageBuffer extends BufferBase {
    this.texture = texture;
  }
-  _getTexture(name, image) {
+  _getTexture(image) {
    const texture = new THREE.Texture(image);
    texture.magFilter = THREE.LinearFilter;
    texture.minFilter = THREE.LinearFilter;
--- a/src/geom/buffer/line.js
+++ b/src/geom/buffer/line.js
@ -3,51 +3,120 @@ import { lineShape } from '../shape';
 export default class LineBuffer extends BufferBase {
  geometryBuffer() {
-    const self = this;
+    const coordinates = this.get('coordinates');
-    const coordinates = self.get('coordinates');
+    const properties = this.get('properties');
-    const properties = self.get('properties');
+    const shapeType = this.shapeType = this.get('shapeType');
    const propertiesData = self.get('propertiesData');
    const positions = [];
    const positionsIndex = [];
    const instances = [];
    if (shapeType === 'line') {
      this.attributes = this._getMeshLineAttributes();
      return;
    } else if (shapeType === 'arc') {
      this.attributes = this._getArcLineAttributes();
      return;
    }
    coordinates.forEach((geo, index) => {
      const props = properties[index];
-      const attrData = self._getShape(geo, props, index);
+      const attrData = this._getShape(geo, props, index);
      positions.push(...attrData.positions);
      positionsIndex.push(...attrData.indexes);
      if (attrData.hasOwnProperty('instances')) {
        instances.push(...attrData.instances);
      }
    });
-    self.bufferStruct.style = properties;
+    this.bufferStruct.style = properties;
-    self.bufferStruct.verts = positions;
+    this.bufferStruct.verts = positions;
-    self.bufferStruct.indexs = positionsIndex;
+    this.bufferStruct.indexs = positionsIndex;
    self.shape = properties[0].shape || 'default';
    if (instances.length > 0) {
-      self.bufferStruct.instances = instances;
+      this.bufferStruct.instances = instances;
    }
-    self.attributes = this._toAttributes(self.bufferStruct, propertiesData);
+    this.attributes = this._toAttributes(this.bufferStruct);
  }
  _getShape(geo, props, index) {
-    if (!props.hasOwnProperty('shape')) {
+    if (!this.shapeType) {
      return lineShape.defaultLine(geo, index);
    }
-    const shape = props.shape;
+    const shape = this.shapeType;
    if (shape === 'meshLine') {
      return lineShape[shape](geo, props, index);
    } else if (shape === 'tubeLine') {
      return lineShape[shape](geo, props, index);
    } else if (shape === 'arc') {
-      return lineShape[shape](geo, index);
+      return lineShape[shape](geo, props, index);
    }
    return lineShape.Line(geo, props, index);
  }
-  _toAttributes(bufferStruct, propertiesData) {
+  _getArcLineAttributes() {
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
    const positions = [];
    const colors = [];
    const indexArray = [];
    const sizes = [];
    const instances = [];
    coordinates.forEach((geo, index) => {
      const props = properties[index];
      const positionCount = positions.length / 3;
      const attrData = this._getShape(geo, props, positionCount);
      positions.push(...attrData.positions);
      colors.push(...attrData.colors);
      indexArray.push(...attrData.indexArray);
      instances.push(...attrData.instances);
      sizes.push(...attrData.sizes);
    });
    return {
      positions,
      colors,
      indexArray,
      sizes,
      instances
    };
  }
  _getMeshLineAttributes() {
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
    const { lineType } = this.get('style');
    const positions = [];
    const pickingIds = [];
    const normal = [];
    const miter = [];
    const colors = [];
    const indexArray = [];
    const sizes = [];
    const attrDistance = [];
    coordinates.forEach((geo, index) => {
      const props = properties[index];
      const positionCount = positions.length / 3;
      const attr = lineShape.Line(geo, props, positionCount, (lineType !== 'soild'));
      positions.push(...attr.positions);
      normal.push(...attr.normal);
      miter.push(...attr.miter);
      colors.push(...attr.colors);
      indexArray.push(...attr.indexArray);
      sizes.push(...attr.sizes);
      attrDistance.push(...attr.attrDistance);
      pickingIds.push(...attr.pickingIds);
    });
    return {
      positions,
      normal,
      miter,
      colors,
      indexArray,
      pickingIds,
      sizes,
      attrDistance
    };
  }
  _toAttributes(bufferStruct) {
    const vertCount = bufferStruct.verts.length;
    const vertices = new Float32Array(vertCount * 3);
    const inposs = new Float32Array(vertCount * 4);
    const colors = new Float32Array(vertCount * 4);
    const times = new Float32Array(vertCount);
    for (let i = 0; i < vertCount; i++) {
      const index = bufferStruct.indexs[i];
      const color = bufferStruct.style[index].color;
@ -58,22 +127,18 @@ export default class LineBuffer extends BufferBase {
      colors[i * 4 + 1] = color[1];
      colors[i * 4 + 2] = color[2];
      colors[i * 4 + 3] = color[3];
-      if (bufferStruct.instances) {
+      if (bufferStruct.instances) { // 弧线
        inposs[i * 4] = bufferStruct.instances[i][0];
        inposs[i * 4 + 1] = bufferStruct.instances[i][1];
        inposs[i * 4 + 2] = bufferStruct.instances[i][2];
        inposs[i * 4 + 3] = bufferStruct.instances[i][3];
      }
-      if (propertiesData) {
+
        const time = propertiesData[index].time;
        times[i] = time;
      }
    }
    return {
      vertices,
      colors,
-      inposs,
+      inposs
      times
    };
  }
 }
--- a/src/geom/buffer/point.js
+++ b/src/geom/buffer/point.js
@ -1,28 +1,21 @@
 import BufferBase from './bufferBase';
 import { regularShape } from '../shape/index';
 import Util from '../../util';
 import * as THREE from '../../core/three';
 const shapeObj = {
  circle: 30,
  square: 4,
  triangle: 3,
  hexagon: 6
 };
 export default class PointBuffer extends BufferBase {
  geometryBuffer() {
    const type = this.get('type');
    switch (type) {
      case 'image' : this._imageBuffer();
        break;
-      case '2d': this._2dRegularBuffer();
+      case '2d': this._3dRegularBuffer();
        break;
      case '3d': this._3dRegularBuffer();
        break;
      case 'Model':this._ModelBuffer();
        break;
      default:
-        this._3dRegularBuffer();
+        this._sdfRegularBuffer();
    }
  }
@ -31,7 +24,6 @@ export default class PointBuffer extends BufferBase {
    const properties = this.get('properties');
    const imagePos = this.get('imagePos');
    const uv = new Float32Array(properties.length * 2);
    for (let i = 0; i < properties.length; i++) {
      const { x, y } = imagePos[properties[i].shape];
      uv[i * 2] = x;
@ -44,56 +36,52 @@ export default class PointBuffer extends BufferBase {
    this.attributes = this._toPointsAttributes(this.bufferStruct);
    this.attributes.uvs = uv;
  }
-  _2dRegularBuffer() {
+  _sdfRegularBuffer() {
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
    const shapes = [];
    for (let i = 0; i < properties.length; i++) {
      const shape = shapeObj[properties[i].shape];
      properties[i].shape = shape;
    }
    this.bufferStruct.position = coordinates;
    properties.shapes = shapes;
    this.bufferStruct.style = properties;
    this.attributes = this._toPointsAttributes(this.bufferStruct);
  }
  _3dRegularBuffer() {
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
    const type = this.get('type');
    const positions = [];
    const shapes = [];
    const sizes = [];
    const uvs = [];
    const positionsIndex = [];
    let indexCount = 0;
    this.bufferStruct.style = properties;
    coordinates.forEach((geo, index) => {
-      const m1 = new THREE.Matrix4();
+      let { size, shape } = properties[index];
-      const { size, shape } = properties[index];
+      let shapeType = 'extrude';
      const vert = regularShape[shape]('extrude');
      m1.setPosition(new THREE.Vector3(...geo));
      size[2] += Math.random() * 1000;
      m1.scale(new THREE.Vector3(...size));
      vert.positions = vert.positions.map(coor => {
        const vector = new THREE.Vector4(...coor, 1);
        vector.applyMatrix4(m1);
        return vector.toArray();
      });// 旋转矩阵
      positions.push(vert.positions);
      if (type === '2d' || (type === '3d' && size[2] === 0)) {
        shapeType = 'fill';
        Util.isArray(size) || (size = [ size, size, 0 ]);
      } else {
        Util.isArray(size) || (size = [ size, size, size ]);
      }
      if (regularShape[shape] == null) {
        uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0);
        shape = 'square';
      }
      const vert = regularShape[shape](shapeType);
      shapes.push(vert.positions);
      positions.push(geo);
      sizes.push(size);
      positionsIndex.push(vert.positionsIndex);
      indexCount += vert.positionsIndex.length;
    });
    this.bufferStruct.indices = positionsIndex;
    this.bufferStruct.position = positions;
    this.bufferStruct.indexCount = indexCount;
-    this.attributes = this._toPolygonAttributes(this.bufferStruct);
+    this.bufferStruct.shapes = shapes;
-
+    this.bufferStruct.sizes = sizes;
-  }
+    this.bufferStruct.faceUv = uvs;
-  _ModelBuffer() {
+    this.attributes = this._toPointShapeAttributes(this.bufferStruct);
  }
  _textBuffer() {
  }
 }
--- a/src/geom/buffer/polygon.js
+++ b/src/geom/buffer/polygon.js
@ -8,6 +8,7 @@ export default class PolygonBuffer extends BufferBase {
    const shape = this.get('shape');
    const positions = [];
    const faceUv = [];
    const sizes = [];
    const positionsIndex = [];
    let indexCount = 0;
    this.bufferStruct.style = properties;
@ -24,7 +25,23 @@ export default class PolygonBuffer extends BufferBase {
        });
      }
      positions.push(extrudeData.positions);
-      faceUv.push(...extrudeData.faceUv);
+
      if (shape !== 'line') {
       // faceUv.push(...extrudeData.faceUv);
        const count = extrudeData.faceUv.length / 2;
        for (let i = 0; i < count; i++) {
          // uv 系数生成等大小的窗户
          let x = extrudeData.faceUv[i * 2];
          let y = extrudeData.faceUv[i * 2 + 1];
          if (x !== -1) {
            x = x * 0.1;
            y = y * heightValue / 2000;
          }
          faceUv.push(x, y);
          sizes.push((1.0 - extrudeData.faceUv[i * 2 + 1]) * heightValue);
        }
      }
      indexCount += extrudeData.positionsIndex.length;
      positionsIndex.push(extrudeData.positionsIndex);
    });
@ -33,6 +50,7 @@ export default class PolygonBuffer extends BufferBase {
    this.bufferStruct.indexCount = indexCount;
    this.bufferStruct.style = properties;
    this.bufferStruct.faceUv = faceUv;
    this.bufferStruct.sizes = sizes;
    if (shape !== 'line') {
      this.attributes = this._toPolygonAttributes(this.bufferStruct);
      this.faceTexture = this._generateTexture();
--- a/src/geom/buffer/rain.js
+++ b/src/geom/buffer/rain.js
@ -1,107 +0,0 @@
 import BufferBase from './bufferBase';
 import * as THREE from '../../core/three';
 import { colorScales } from '../../attr/colorscales';
 export class RainBuffer extends BufferBase {
  geometryBuffer() {
    const defaultRampColors = {
      0.0: '#3288bd',
      0.1: '#66c2a5',
      0.2: '#abdda4',
      0.3: '#e6f598',
      0.4: '#fee08b',
      0.5: '#fdae61',
      0.6: '#f46d43',
      1.0: '#d53e4f'
    };
    const coordinates = this.get('coordinates');
    const particleImage1 = this.get('particleImage1');
    const particleImage0 = this.get('particleImage0');
    const backgroundImage = this.get('backgroundImage');
    const extent = this.get('extent');
    const imgPos = [ ...extent[0],
      extent[1][0], extent[0][1], 0,
      ...extent[1],
      ...extent[0],
      ...extent[1],
      extent[0][0], extent[1][1], 0
    ];
    const imgPosUv = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0 ];
    const image = this.get('image');
    this.bufferStruct.particleStateTexture0 = this._getTexture(particleImage0, THREE.NearestFilter);
    this.bufferStruct.particleStateTexture1 = this._getTexture(particleImage1, THREE.NearestFilter);
    this.bufferStruct.backgroundTexture = this._getTexture(backgroundImage, THREE.NearestFilter);
    const texture = this._getTexture(image, THREE.NearestFilter);
    const colorImageData = this.getColorRamp('wind');
    const colorTexture = this._getTexture(colorImageData, THREE.LinearFilter);
    this.bufferStruct.position = coordinates;
    this.bufferStruct.imgPos = imgPos;
    this.bufferStruct.imgPosUv = imgPosUv;
    this.bufferStruct.u_wind = texture;// 风速 风向
    this.bufferStruct.colorTexture = colorTexture; // 颜色表‘=
    const attributes = {
      vertices: new Float32Array(imgPos),
      uvs: new Float32Array(imgPosUv)
    };
    this.attributes = attributes;
  }
  // //生成色带纹理
  // getColorRamp(colors) {
  //   const canvas = document.createElement('canvas');
  //   const ctx = canvas.getContext('2d');
  //   canvas.width = 256;
  //   canvas.height = 1;
  //   const gradient = ctx.createLinearGradient(0, 0, 256, 0);
  //   for (const stop in colors) {
  //     gradient.addColorStop(+stop, colors[stop]);
  //   }
  //   ctx.fillStyle = gradient;
  //   ctx.fillRect(0, 0, 256, 1);
  //   const data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
  //   return new ImageData(data, 16, 16);
  // }
  getColorRamp(name) {
    let colorscale = name;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 256;
    canvas.height = 1;
    const gradient = ctx.createLinearGradient(0, 0, 256, 0);
    let data = null;
    if (typeof (colorscale) === 'string') {
      colorscale = colorScales[name];
    }
    if (Object.prototype.toString.call(colorscale) === '[object Object]') {
      const min = colorscale.positions[0];
      const max = colorscale.positions[colorscale.positions.length - 1];
      for (let i = 0; i < colorscale.colors.length; ++i) {
        const value = (colorscale.positions[i] - min) / (max - min);
        gradient.addColorStop(value, colorscale.colors[i]);
      }
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 256, 1);
      data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
    }
    if (Object.prototype.toString.call(colorscale) === '[object Uint8Array]') {
      data = ctx.createImageData(256, 1);
    }
    return new ImageData(data, 16, 16);
  }
  // 生成纹理
  _getTexture(image, filter) {
    const texture = new THREE.Texture(image);
    texture.magFilter = filter;
    texture.minFilter = filter;
    texture.needsUpdate = true;
    return texture;
  }
 }
--- a/src/geom/buffer/raster.js
+++ b/src/geom/buffer/raster.js
@ -18,9 +18,8 @@ export class RasterBuffer extends BufferBase {
    const size = this.get('size');
    const texture = new THREE.DataTexture(new Float32Array(raster.data), raster.width, raster.height, THREE.LuminanceFormat, THREE.FloatType);
    texture.generateMipmaps = true;
    // texture.minFilter = THREE.NearestFilter;
    texture.needsUpdate = true;
-    const colors = this.get('rampColors') || defaultRampColors;
+    const colors = this.get('rampColors');
    const colorImageData = this.getColorRamp(colors);
    const colorTexture = this._getTexture(colorImageData);
    this.bufferStruct.position = positions;
@ -29,7 +28,7 @@ export class RasterBuffer extends BufferBase {
    this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
    this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘=
-    const triangles = this._buildTriangles(raster, size);
+    const triangles = this._buildTriangles(raster, size, this.bufferStruct.u_extent);
    const attributes = {
      vertices: new Float32Array(triangles.vertices),
      uvs: new Float32Array(triangles.uvs),
@ -79,39 +78,35 @@ export class RasterBuffer extends BufferBase {
    texture1.needsUpdate = true;
    return texture1;
  }
-  _buildTriangles(raster, size = 1) {
+  _buildTriangles(raster, size = 1, extent) {
    // const extent = [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
    const { width, height } = raster;
    const halfSize = size / 2;
    const indices = [];
    const vertices = [];
    const normals = [];
    const uvs = [];
    const gridX = Math.floor(width / size);
    const gridY = Math.floor(height / size);
    const gridX1 = gridX + 1;
    const gridY1 = gridY + 1;
    const stepX = (extent[2] - extent[0]) / gridX1;
    const stepY = (extent[3] - extent[1]) / gridY1;
    for (let i = 0; i < gridY1; i++) {
-      const y = i * size - halfSize;
+      const y = i * size;
      for (let j = 0; j < gridX1; j++) {
-        const x = j * size - halfSize;
+        const x = j * size;
-        vertices.push(x / gridX, -y / gridY, 0);
+        vertices.push(extent[0] + x * stepX, (height - y) * stepY + extent[1], 0);
        uvs.push(j / gridX);
        uvs.push(i / gridY);
      }
    }
    for (let iy = 0; iy < gridY; iy++) {
      for (let ix = 0; ix < gridX; ix++) {
        const a = ix + gridX1 * iy;
        const b = ix + gridX1 * (iy + 1);
        const c = (ix + 1) + gridX1 * (iy + 1);
        const d = (ix + 1) + gridX1 * iy;
        indices.push(a, b, d);
        indices.push(b, c, d);
      }
    }
--- a/src/geom/buffer/text.js
+++ b/src/geom/buffer/text.js
@ -1,7 +1,6 @@
 import BufferBase from './bufferBase';
 import { Texture2D } from '../../core/three';
 import { TextureFilter, TextureWrapMode } from '@ali/r3-base';
 import { getJSON, getImage } from '../../util/ajax';
 import * as THREE from '../../core/three';
 import Global from '../../global';
 const Space = 1;
 export default class TextBuffer extends BufferBase {
@ -14,13 +13,11 @@ export default class TextBuffer extends BufferBase {
    };
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
-    const style = this.get('style');
+    const { textOffset = [ 0, 0 ] } = this.get('style');
    const { size = 24 } = style;
    const chars = [];
    const positions = [];
    const uvs = [];
    properties.forEach(element => {
-      const text = element.shape;
+      let text = element.shape || '';
      text = text.toString();
      for (let j = 0; j < text.length; j++) {
        const code = text.charCodeAt(j);
        if (chars.indexOf(code) === -1) {
@ -28,38 +25,41 @@ export default class TextBuffer extends BufferBase {
        }
      }
    });
    this._loadTextInfo(chars);
    this.on('SourceLoaded', () => {
      let indexCount = 0;
      properties.forEach((element, index) => {
        const text = element.shape;
        const pos = coordinates[index];
        const dimensions = this._measureText(text, size);
        // const pen = { x: pos[0] - dimensions.advance / 2, y: pos[1] };
        const pen = { x: pos[0], y: pos[1] };
        const vertexElements = [];
      const textureElements = [];
      const colors = [];
      const originPoints = [];
      const textSizes = [];
      const textOffsets = [];
      properties.forEach((element, index) => {
        const size = element.size;
        const pos = coordinates[index];
        // const pen = { x: pos[0] - dimensions.advance / 2, y: pos[1] };
        const pen = { x: textOffset[0], y: textOffset[1] };
        let text = element.shape || '';
        text = text.toString();
        for (let i = 0; i < text.length; i++) {
          const chr = text.charCodeAt(i);
          const offset = dimensions.advance / text.length * i;
          this._drawGlyph(chr, pen, size, vertexElements, textureElements, offset);
        }
-        uvs.push(textureElements);
+          const color = element.color;
-        indexCount += vertexElements.length;
+          this._drawGlyph(pos, chr, pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color);
-        positions.push(vertexElements);
+        }
      });
      this.bufferStruct.uv = uvs;
      this.bufferStruct.position = positions;
      this.bufferStruct.style = properties;
-      this.bufferStruct.indexCount = indexCount;
+      this.attributes = {
        originPoints,
        textSizes,
        textOffsets,
        colors,
        textureElements
      };
      this.emit('completed');
    });
-    this._loadTextInfo(chars);
+
  }
  _loadTextInfo(chars) {
    getJSON({
      url: `${Global.sdfHomeUrl}/getsdfdata?chars=${chars.join('|')}`
    }, (e, info) => {
@ -75,19 +75,32 @@ export default class TextBuffer extends BufferBase {
      this.emit('SourceLoaded');
    });
  }
-  _drawGlyph(chr, pen, size, vertexElements, textureElements, offset) {
+  /**
   * 计算每个标注词语的位置
   * @param {*} pos 文字三维空间坐标
   * @param {*} chr 字符
   * @param {*} pen 字符在词语的偏移量
   * @param {*} size 字体大小
   * @param {*} colors 颜色
   * @param {*} textureElements  纹理坐标
   * @param {*} originPoints 初始位置数据
   * @param {*} textSizes 文字大小数组
   * @param {*} textOffsets 字体偏移量数据
   * @param {*} color 文字颜色
   */
  _drawGlyph(pos, chr, pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color) {
    const metrics = this.metrics;
    const metric = metrics.chars[chr];
    if (!metric) return;
    const scale = size / metrics.size;
    const factor = 1;
    let width = metric[0];
    let height = metric[1];
    const horiBearingX = metric[2];
    const horiBearingY = metric[3];
    const horiAdvance = metric[4];
    const posX = metric[5];
    const posY = metric[6];
@ -99,28 +112,58 @@ export default class TextBuffer extends BufferBase {
      height += buffer * 2;
    // Add a quad (= two triangles) per glyph.
-      const w1 = (horiBearingX - buffer) * scale + offset;
+      const originX = (horiBearingX - buffer + width / 2) * scale;
-      const w2 = (horiBearingX - buffer + width) * scale + offset;
+      const originY = -(height / 2 - horiBearingY) * scale;
-      const h1 = -horiBearingY * scale;
+      // const originY = (height / 2 - horiBearingY) * scale;
-      const h2 = (height - horiBearingY) * scale;
+      // const originY = 0;
-      vertexElements.push(
+      const offsetWidth = width / 2 * scale / (1.0 - horiBearingX * 1.5 / horiAdvance);
-                [ (factor * (pen.x + w1)), (factor * (pen.y + h1)), w1, h1 ],
+      const offsetHeight = (horiAdvance / 2) * scale;
                [ (factor * (pen.x + w2)), (factor * (pen.y + h1)), w2, h1 ],
                [ (factor * (pen.x + w1)), (factor * (pen.y + h2)), w1, h2 ],
-                [ (factor * (pen.x + w2)), (factor * (pen.y + h1)), w2, h1 ],
+      const offsetX = pen.x;
-                [ (factor * (pen.x + w1)), (factor * (pen.y + h2)), w1, h2 ],
+      const offsetY = pen.y;
-                [ (factor * (pen.x + w2)), (factor * (pen.y + h2)), w2, h2 ]
+      originPoints.push(
      pos[0] + originX, pos[1] + originY, 0,
      pos[0] + originX, pos[1] + originY, 0,
      pos[0] + originX, pos[1] + originY, 0,
      pos[0] + originX, pos[1] + originY, 0,
      pos[0] + originX, pos[1] + originY, 0,
      pos[0] + originX, pos[1] + originY, 0,
   );
-      textureElements.push(
+      textSizes.push(
-                [ posX, posY + height ],
+      offsetWidth, offsetHeight,
-                [ posX + width, posY + height ],
+      -offsetWidth, offsetHeight,
-                [ posX, posY ],
+      -offsetWidth, -offsetHeight,
      offsetWidth, offsetHeight,
      -offsetWidth, -offsetHeight,
      offsetWidth, -offsetHeight,
      );
      textOffsets.push(
      offsetX, offsetY,
      offsetX, offsetY,
      offsetX, offsetY,
      offsetX, offsetY,
      offsetX, offsetY,
      offsetX, offsetY,
    );
-                [ posX + width, posY + height ],
+      colors.push(
-                [ posX, posY ],
+      ...color,
-                [ posX + width, posY ]
+      ...color,
      ...color,
      ...color,
      ...color,
      ...color,
    );
      textureElements.push(
        posX + width, posY,
        posX, posY,
        posX, posY + height,
        posX + width, posY,
        posX, posY + height,
        posX + width, posY + height
      );
    }
@ -128,6 +171,7 @@ export default class TextBuffer extends BufferBase {
  }
  _measureText(text, size) {
    const dimensions = {
      advance: 0
@ -145,13 +189,10 @@ export default class TextBuffer extends BufferBase {
  }
  _creatTexture(image) {
    this.bufferStruct.textSize = [ image.width, image.height ];
-    const texture = new Texture2D('textTexure', image, {
+    const texture = new THREE.Texture(image);
-      magFilter: TextureFilter.LINEAR,
+    texture.minFilter = THREE.LinearFilter;
-      minFilter: TextureFilter.LINEAR,
+    texture.magFilter = THREE.LinearFilter;
-      wrapS: TextureWrapMode.CLAMP_TO_EDGE,
+    texture.needsUpdate = true;
      wrapT: TextureWrapMode.CLAMP_TO_EDGE
    });
    return texture;
  }
 }
--- a/src/geom/buffer/textBuffer.js
+++ b/src/geom/buffer/textBuffer.js
@ -1,78 +0,0 @@
 import Base from '../../core/base';
 import TinySDF from '@mapbox/tiny-sdf';
 import { Texture } from '../../core/three';
 export default class textBuffer extends Base {
  constructor(cfg) {
    super(cfg);
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.fontSize = 24;
    this.fontWeight = 400;
    this.sdfs = {};
    this.bufferStruct = {};
    this.chars = this.makeChars();
    this.updateSDF();
    this.geometryBuffer();
  }
  geometryBuffer() {
    const coordinates = this.get('coordinates');
    const properties = this.get('properties');
    const uvs = [];
    const texture = new Texture2D('charts', this.canvas);
    this.bufferStruct.style = properties;
    // this.bufferStruct.utexture = this.canvas;
    this.bufferStruct.utexture = texture;
    const positions = [];
    const textIndex = [];
    const index = 0;
    coordinates.forEach((coor, index) => {
      positions.push([[ coor[0], coor[1] ], [ coor[0], coor[1] ]]);
      textIndex.push([ 0, 1 ]);
      index++;
      const posX = this.sdfs[this.chars[index]].x; // pos in sprite x
      const posY = this.sdfs[this.chars[index]].y; // pos in sprite y
      uvs.push([[ posX / 2048, posY / 2048 ], [ posX / 2048, posY / 2048 ]]);
    });
    this.bufferStruct.position = positions;
    this.bufferStruct.uv = uvs;
    this.bufferStruct.textIndex = textIndex;
    this.bufferStruct.indexCount = this.bufferStruct.position.length * 2;
  }
  makeChars() {
    const properties = this.get('properties');
    const chars = [];
    properties.forEach(item => {
      const text = item.shape;
      text.forEach(char => {
        chars.push(char);
      });
    });
    return chars;
  }
  updateSDF() {
    this.canvas.width = 2048;
    this.canvas.height = 2048;
    const buffer = this.fontSize / 8;
    const radius = this.fontSize / 3;
    const sdf = new TinySDF(this.fontSize, buffer, radius, null, null, this.fontWeight);
    for (let y = 0, i = 0; y + sdf.size <= this.canvas.height && i < this.chars.length; y += sdf.size) {
      for (let x = 0; x + sdf.size <= this.canvas.width && i < this.chars.length; x += sdf.size) {
        this.ctx.putImageData(this.makeRGBAImageData(sdf.draw(this.chars[i]), sdf.size), x, y);
        this.sdfs[this.chars[i]] = { x, y };
        i++;
      }
    }
  }
  makeRGBAImageData(alphaChannel, size) {
    const imageData = this.ctx.createImageData(size, size);
    const data = imageData.data;
    for (let i = 0; i < alphaChannel.length; i++) {
      data[4 * i + 0] = alphaChannel[i];
      data[4 * i + 1] = alphaChannel[i];
      data[4 * i + 2] = alphaChannel[i];
      data[4 * i + 3] = 255;
    }
    return imageData;
  }
 }
--- a/src/geom/bufferGeometry/baseBufferGeometry.js
+++ b/src/geom/bufferGeometry/baseBufferGeometry.js
@ -1,118 +0,0 @@
 import { BufferGeometry, Float32BufferAttribute } from '../../core/three';
 /**
 * 基础几何体
 */
 export default class BaseBufferGeometry extends BufferGeometry {
 // indices, position, uv, normal
  constructor(opts) {
    super(opts.name);
    // 几何体顶点位置数据
    this._opts = opts;
    this._position = opts.position;
    // 三角形顶点序号数据
    this._indices = opts.indices;
    // this._colors = opts.colors;
    this._style = opts.style;
    // 法线数据
    this._normals = opts.normals;
    this._uv = opts.uv;
    this._activeIds = null;
    this._textIndex = opts.textIndex;
    this._indexCount = opts.indexCount;
    if (opts.DrawMode) {
      this.mode = DrawMode[opts.DrawMode];
    }
    if (this._indexCount > 65536) {
      this.primitive.indexType = DataType.UNSIGNED_INT;
    }
    this.initialize();
  }
  /**
   * 更新active操作
   * @param {*} featureStyleId 需要更新的要素Id
   * @param {*} style  更新的要素样式
   */
  updateStyle(featureStyleId, style) {
    if (this._activeIds) {
      this.resetStyle();
    }
    this._activeIds = featureStyleId;
    let dataIndex = 0;
    const id = featureStyleId[0];
    if (!this._indices) {
      const color = style.color;
      this.setVertexValues(id, {
        COLOR: color
      });
      return;
    }
    for (let i = 0; i < id; i++) {
      dataIndex += this._indices[i].length;
    }
    featureStyleId.forEach(index => {
      const indices = this._indices[index];
      const color = style.color;
      indices.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: color
        });
      });
    });
  }
  /**
   * 用于过滤数据
   * @param {*} filterData  数据过滤标识符
   */
  updateFilter(filterData) {
    let dataIndex = 0;
    this._indices.forEach((indices, i) => {
      const color = [ ...this._style[i].color ];
      if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
        color[3] = 0;
      }
      indices.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: color
        });
      });
    });
  }
  /**
   * 重置高亮要素
   */
  resetStyle() {
    let dataIndex = 0;
    const id = this._activeIds[0];
    if (!this._indices) {
      const color = this._style[id].color;
      this.setVertexValues(id, {
        COLOR: color
      });
      return;
    }
    for (let i = 0; i < id; i++) {
      dataIndex += this._indices[i].length;
    }
    this._activeIds.forEach(index => {
      const indices = this._indices[index];
      indices.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: this._style[index].color
        });
      });
    });
  }
 }
--- a/src/geom/bufferGeometry/image.js
+++ b/src/geom/bufferGeometry/image.js
@ -1,32 +0,0 @@
 import { DataType } from '@ali/r3-base';
 import BaseBufferGeometry from './baseBufferGeometry';
 /**
 * 创建Polygon几何体
 */
 export default class ImageGeometry extends BaseBufferGeometry {
  constructor(opts) {
    opts.DrawMode = 'TRIANGLES';
    super(opts);
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    super.initialize([
      { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
      { semantic: 'TEXCOORD_0', size: 2, type: DataType.FLOAT, normalized: false }
    ], this._position.length);
    this._position.forEach((vert, j) => {
      this.setVertexValues(j, {
        POSITION: vert,
        TEXCOORD_0: this._uv[j]
      });
    });
  }
 }
--- a/src/geom/bufferGeometry/index.js
+++ b/src/geom/bufferGeometry/index.js
@ -1,5 +0,0 @@
 export { default as MeshlineGeometry } from './line';
 export { default as PointGeometry } from './point';
 export { default as PolygonLine } from './polygon-line';
 export { default as PolygonGeometry } from './polygon';
--- a/src/geom/bufferGeometry/line.js
+++ b/src/geom/bufferGeometry/line.js
@ -1,66 +0,0 @@
 import { DataType, DrawMode } from '@ali/r3-base';
 import { BufferGeometry } from '@ali/r3-geometry';
 export class meshLineGeometry extends BufferGeometry {
  constructor(opts) {
    super();
    this._verts = opts.verts;
    this._style = opts.style;
    this._indexs = opts.indexs;
    this._initialize();
  }
  _initialize() {
    const self = this;
    super.initialize([
      { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
      { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false }
    ], self._verts.length);
    self.mode = DrawMode.TRIANGLES;
    for (let i = 0; i < self._verts.length; i++) {
      const index = self._indexs[i];
      const color = this._style[index].color;
      const values = {
        POSITION: self._verts[i],
        COLOR: color
      };
      self.setVertexValues(i, values);
    }
  }
 }
 export class arcGeometry extends BufferGeometry {
  constructor(opts) {
    super();
    // 顶点位置数据
    this._verts = opts.verts;
    this._style = opts.style;
    this._indexs = opts.indexs;
    this._instances = opts.instances;
    this._initialize();
  }
  _initialize() {
    const self = this;
    super.initialize([
      { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
      { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false },
      { semantic: 'INSPOS', size: 4, type: DataType.FLOAT, normalized: false }
    ], self._verts.length);
    self.mode = DrawMode.LINES;
    for (let i = 0; i < self._verts.length; i++) {
      const index = this._indexs[i];
      const color = this._style[index].color;
      const values = {
        POSITION: self._verts[i],
        COLOR: color,
        INSPOS: self._instances[i]
      };
      self.setVertexValues(i, values);
    }
  }
 }
--- a/src/geom/bufferGeometry/point.js
+++ b/src/geom/bufferGeometry/point.js
@ -1,55 +0,0 @@
 import { DataType, BufferUsage } from '@ali/r3-base';
 import BaseBufferGeometry from './baseBufferGeometry';
 /**
 * 创建点图层几何体
 */
 export default class PointGeometry extends BaseBufferGeometry {
  constructor(opts) {
    opts.DrawMode = 'POINTS';
    super(opts);
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    const attributesObj = {
      size: { semantic: 'SIZE', size: 1, type: DataType.FLOAT, normalized: false },
      id: { semantic: 'IDCOLOR', size: 4, type: DataType.FLOAT, normalized: false },
      uv: { semantic: 'TEXCOORD_0', size: 2, type: DataType.FLOAT, normalized: false },
      color: { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false },
      shape: { semantic: 'SHAPE', size: 1, type: DataType.FLOAT, normalized: false }
    };
    const keys = Object.keys(this._style[0]);
    const attributes = [{ semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false }];
    if (this._uv) attributes.push(attributesObj.uv);
    keys.forEach(key => { attributes.push(attributesObj[key]); });
    super.initialize(attributes, this._position.length, BufferUsage.DYNAMIC_DRAW);
    this._position.forEach((vert, i) => {
      const color = this._style[i].color;
      const attrData = {
        POSITION: vert,
        COLOR: color,
        SIZE: [ this._style[i].size ],
        IDCOLOR: this._style[i].id,
        SHAPE: [ this._style[i].shape ]
      };
      if (keys.indexOf('shape') !== -1) attrData.SHAPE = [ this._style[i].shape ];
      if (this._uv) attrData.TEXCOORD_0 = this._uv[i];
      this.setVertexValues(i, attrData);
    });
  }
  updateSize(data) {
    const pointCount = this._position.length;
    for (let i = 0; i < pointCount; i++) {
      this.setVertexValues(i, {
        SIZE: [ data[i] ]
      });
    }
  }
 }
--- a/src/geom/bufferGeometry/polygon-line.js
+++ b/src/geom/bufferGeometry/polygon-line.js
@ -1,56 +0,0 @@
 import { DataType, DrawMode } from '@ali/r3-base';
 import { IndexBufferGeometry } from '@ali/r3-geometry';
 // 创建立方体
 export default class PolygonLine extends IndexBufferGeometry {
  constructor(opts) {
    super();
    this._positions = opts.verts;
    this._positionsIndexs = opts.indexs;
    this._vertsCount = opts.vertsCount;
    this._style = opts.style;
    //
    if (this._positionsIndexs.length > 65536) {
      this.primitive.indexType = DataType.UNSIGNED_INT;
    }
    this.initialize();
  }
  initialize() {
    super.initialize([
      { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
      { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false }
    ], this._vertsCount, this._positionsIndexs);
    this.mode = DrawMode.LINES;
    const featureCount = this._positions.length;
    let indexCount = 0;
    for (let i = 0; i < featureCount; i++) {
      const pos = this._positions[i];
      for (let j = 0; j < pos.length; j++) {
        this.setVertexValues(indexCount, {
          POSITION: pos[j],
          COLOR: this._style[i].color
        });
        indexCount++;
      }
    }
  }
  updateFilter(filterData) {
    this._activeIds = null; // 清空选中元素
    const featureCount = this._positions.length;
    let indexCount = 0;
    for (let i = 0; i < featureCount; i++) {
      const pos = this._positions[i];
      const color = [ ...this._style[i].color ];
      if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
        color[3] = 0;
      }
      for (let j = 0; j < pos.length; j++) {
        this.setVertexValues(indexCount, {
          COLOR: color
        });
        indexCount++;
      }
    }
  }
 }
--- a/src/geom/bufferGeometry/polygon.js
+++ b/src/geom/bufferGeometry/polygon.js
@ -1,128 +0,0 @@
 import { DataType, DrawMode } from '@ali/r3-base';
 import { BufferGeometry } from '@ali/r3-geometry';
 /**
 * 创建Polygon几何体
 */
 export default class PolygonGeometry extends BufferGeometry {
  constructor(opts) {
    super(opts.name);
    // 几何体顶点位置数据
    this._verts = opts.position;
    // 三角形顶点序号数据
    this._indexs = opts.indices;
    this._style = opts.style;
    // 法线数据
    this._normals = opts.normals;
    this._indexCount = opts.indexCount;
    this._activeIds = null;
    this.initialize();
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    super.initialize([
      { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
      { semantic: 'NORMAL', size: 3, type: DataType.FLOAT, normalized: true },
      { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false },
      { semantic: 'IDCOLOR', size: 4, type: DataType.FLOAT, normalized: false }
    ], this._indexCount);
    this.mode = DrawMode.TRIANGLES;
    if (this._indexCount > 65536) {
      this.primitive.indexType = DataType.UNSIGNED_INT;
    }
    // camera.renderHardware
    let dataIndex = 0;
    this._indexs.forEach((vertIndexs, i) => {
      const color = [ ...this._style[i].color ];
      if (this._style[i].hasOwnProperty('filter') && !this._style[i].filter) {
        color[3] = 0;
      }
      vertIndexs.forEach((index, j) => {
        const vert = this._verts[i][index];
        const normalIndex = Math.floor(j / 3);
        this.setVertexValues(dataIndex++, {
          POSITION: vert,
          COLOR: color,
          IDCOLOR: this._style[i].id,
          NORMAL: this._normals[i][normalIndex]
        });
      });
    });
  }
  /**
   * 更新active操作
   * @param {*} featureStyleId 需要更新的要素Id
   * @param {*} style  更新的要素样式
   */
  updateStyle(featureStyleId, style) {
    if (this._activeIds) {
      this.resetStyle();
    }
    this._activeIds = featureStyleId;
    let dataIndex = 0;
    const id = featureStyleId[0];
    for (let i = 0; i < id; i++) {
      dataIndex += this._indexs[i].length;
    }
    featureStyleId.forEach(index => {
      const vertindex = this._indexs[index];
      const color = style.color;
      vertindex.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: color
        });
      });
    });
  }
   /**
   * 用于过滤数据
   * @param {*} filterData  数据过滤标识符
   */
  updateFilter(filterData) {
    this._activeIds = null; // 清空选中元素
    let dataIndex = 0;
    this._indexs.forEach((vertIndexs, i) => {
      const color = [ ...this._style[i].color ];
      if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
        color[3] = 0;
      }
      vertIndexs.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: color
        });
      });
    });
  }
  /**
   * 重置高亮要素
   */
  resetStyle() {
    let dataIndex = 0;
    const id = this._activeIds[0];
    for (let i = 0; i < id; i++) {
      dataIndex += this._indexs[i].length;
    }
    this._activeIds.forEach(index => {
      const vertindex = this._indexs[index];
      vertindex.forEach(() => {
        this.setVertexValues(dataIndex++, {
          COLOR: this._style[index].color
        });
      });
    });
  }
 }
--- a/src/geom/bufferGeometry/rain.js
+++ b/src/geom/bufferGeometry/rain.js
@ -1,32 +0,0 @@
 import { DataType } from '@ali/r3-base';
 import BaseBufferGeometry from './baseBufferGeometry';
 /**
 * 创建点图层几何体
 */
 export default class RainGeometry extends BaseBufferGeometry {
  constructor(opts) {
    opts.DrawMode = 'POINTS';
    super(opts);
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    super.initialize([
        { semantic: 'POSITION', size: 3, type: DataType.FLOAT, normalized: false },
        { semantic: 'TEXCOORD_0', size: 2, type: DataType.FLOAT, normalized: false }
    ], this._position.length);
    this._position.forEach((vert, j) => {
      this.setVertexValues(j, {
        POSITION: vert,
        TEXCOORD_0: this._uv[j]
      });
    });
  }
 }
--- a/src/geom/bufferGeometry/text.js
+++ b/src/geom/bufferGeometry/text.js
@ -1,41 +0,0 @@
 import { DataType, DrawMode } from '@ali/r3-base';
 import BaseBufferGeometry from './baseBufferGeometry';
 /**
 * 创建Polygon几何体
 */
 export default class TextGeometry extends BaseBufferGeometry {
  constructor(opts) {
    opts.DrawMode = opts.drawMode || 'TRIANGLES';
    super(opts);
  }
  /**
   * 构造多边形数据
   * @private
   */
  initialize() {
    super.initialize([
      { semantic: 'POSITION', size: 4, type: DataType.FLOAT, normalized: false },
      { semantic: 'COLOR', size: 4, type: DataType.FLOAT, normalized: false },
      { semantic: 'TEXCOORD_0', size: 2, type: DataType.FLOAT, normalized: false },
      { semantic: 'SIZE', size: 1, type: DataType.FLOAT, normalized: false }
    ], this._indexCount);
    let dataIndex = 0;
    this._position.forEach((pos, i) => {
      const color = this._style[i].color;
      const uv = this._uv[i];
      pos.forEach((p, j) => {
        this.setVertexValues(dataIndex++, {
          POSITION: p,
          COLOR: color,
          SIZE: [ this._style[i].size ],
          TEXCOORD_0: uv[j]
        });
      });
    });
  }
 }
--- a/src/geom/extrude.js
+++ b/src/geom/extrude.js
@ -22,9 +22,7 @@ export default function extrudePolygon(points, extrude) {
  const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
  cells = triangles;
-  triangles.forEach(() => {
+
    faceUv.push(-1, -1);
  });
  const pointCount = flattengeo.vertices.length / 3;
  const { vertices } = flattengeo;
  extrude ? full() : flat();
@ -32,11 +30,16 @@ export default function extrudePolygon(points, extrude) {
  function flat() {
    for (let i = 0; i < pointCount; i++) {
      positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);
    }
  }
  function full() {
      // 顶部纹理
    triangles.forEach(() => {
      faceUv.push(-1, -1);
    });
    // 顶部坐标
    for (let i = 0; i < pointCount; i++) {
      positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
    }
--- a/src/geom/material/imageMaterial.js
+++ b/src/geom/material/imageMaterial.js
@ -1,8 +1,8 @@
 import * as THREE from '../../core/three';
 import image_frag from '../shader/image_frag.glsl';
 import image_vert from '../shader/image_vert.glsl';
 import Material from './material';
 export default function ImageMaterial(options) {
-  const material = new THREE.ShaderMaterial({
+  const material = new Material({
    uniforms: {
      u_opacity: { value: options.u_opacity },
      u_texture: { value: options.u_texture }
@ -11,8 +11,5 @@ export default function ImageMaterial(options) {
    fragmentShader: image_frag,
    transparent: true
  });
    // material.roughness = 1;
    // material.metalness = 0.1;
    // material.envMapIntensity = 3;
  return material;
 }
--- a/src/geom/material/lineMaterial.js
+++ b/src/geom/material/lineMaterial.js
@ -1,13 +1,21 @@
 import * as THREE from '../../core/three';
 import Material from './material';
 import line_frag from '../shader/line_frag.glsl';
 import line_vert from '../shader/line_vert.glsl';
 import arcline_frag from '../shader/arcline_frag.glsl';
 import arcline_vert from '../shader/arcline_vert.glsl';
 import meshline_vert from '../shader/meshline_vert.glsl';
 import meshline_frag from '../shader/meshline_frag.glsl';
 import dashline_frag from '../shader/dashline_frag.glsl';
 import dashline_vert from '../shader/dashline_vert.glsl';
 export function LineMaterial(options) {
-  const material = new THREE.ShaderMaterial({
+  const material = new Material({
    uniforms: {
      u_opacity: { value: options.u_opacity || 1.0 },
-      currentTime: { value: options.u_time || 2500 }
+      u_time: { value: options.u_time || 0 },
      u_zoom: { value: options.u_zoom || 10 }
    },
    vertexShader: line_vert,
    fragmentShader: line_frag,
@ -17,13 +25,46 @@ export function LineMaterial(options) {
  return material;
 }
 export function ArcLineMaterial(options) {
-  const material = new THREE.ShaderMaterial({
+  const material = new Material({
    uniforms: {
      u_opacity: { value: options.u_opacity || 1.0 },
-      segmentNumber: { value: 50 }
+      segmentNumber: { value: 49 },
      u_time: { value: 0 },
      u_zoom: { value: options.u_zoom || 10 }
    },
    vertexShader: arcline_vert,
    fragmentShader: arcline_frag,
    transparent: true,
    blending: THREE.AdditiveBlending
  });
  return material;
 }
 export function MeshLineMaterial(options) {
  const material = new Material({
    uniforms: {
      u_opacity: { value: options.u_opacity || 1.0 },
      u_time: { value: options.u_time || 0 },
      u_zoom: { value: options.u_zoom }
    },
    vertexShader: meshline_vert,
    fragmentShader: meshline_frag,
    transparent: true
  });
  return material;
 }
 export function DashLineMaterial(options) {
  const material = new Material({
    uniforms: {
      u_opacity: { value: options.u_opacity || 1.0 },
      u_time: { value: options.u_time || 0 },
      u_zoom: { value: options.u_zoom },
      u_dashSteps: { value: options.u_dashSteps || 12 },
      u_dashSmooth: { value: options.u_dashSmooth || 0.01 },
      u_dashDistance: { value: options.u_dashDistance || 0.2 }
    },
    vertexShader: dashline_vert,
    fragmentShader: dashline_frag,
    transparent: true
  });
  return material;
--- a/src/geom/material/material.js
+++ b/src/geom/material/material.js
@ -1,11 +1,29 @@
 import * as THREE from '../../core/three';
 export default class Material extends THREE.ShaderMaterial {
-  constructor(opts) {
+  setUniformsValue(name, value) {
-    super(opts);
+    if (!this.uniforms[name]) { return; }
  }
  setValue(name, value) {
    this.uniforms[name].value = value;
    this.uniforms.needsUpdate = true;
  }
  setDefinesvalue(name, value) {
    this.defines[name] = value;
    this.needsUpdate = true;
  }
  setUniform(option) {
    const uniforms = {};
    for (const key in option) {
      if (key.substr(0, 2) === 'u_') {
        uniforms[key] = { value: option[key] };
      }
    }
    return uniforms;
  }
  upDateUninform(option) {
    for (const key in option) {
      if (key.substr(0, 2) === 'u_') {
        this.setUniformsValue(key, option[key]);
      }
    }
  }
 }
--- a/src/geom/material/pointMaterial.js
+++ b/src/geom/material/pointMaterial.js
@ -1,22 +1,37 @@
 import * as THREE from '../../core/three';
 import Material from './material';
 import point_frag from '../shader/point_frag.glsl';
 import point_vert from '../shader/point_vert.glsl';
-export default function PointMaterial(options) {
+
-  const material = new THREE.ShaderMaterial({
+export default class PointMaterial extends Material {
  getDefaultParameters() {
    return {
      uniforms: {
-      u_opacity: { value: options.u_opacity },
+        u_opacity: { value: 1 },
-      u_stroke: { value: options.u_stroke },
+        u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
-      u_strokeWidth: { value: options.u_strokeWidth },
+        u_strokeWidth: { value: 1 }
      u_texture: { value: options.u_texture }
      },
    vertexShader: point_vert,
    fragmentShader: point_frag,
    blending: THREE.NormalBlending,
    transparent: true,
      defines: {
-      SHAPE: true,
+        SHAPE: false,
-      TEXCOORD_0: !!options.u_texture
+        TEXCOORD_0: false
      }
-  });
+    };
-  return material;
+  }
  constructor(_uniforms, _defines, parameters) {
    super(parameters);
    const { uniforms, defines } = this.getDefaultParameters();
    this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
    this.defines = Object.assign(defines, _defines);
    this.type = 'PointMaterial';
    this.vertexShader = point_vert;
    this.fragmentShader = point_frag;
    this.transparent = true;
    if (!_uniforms.shape) { this.blending = THREE.AdditiveBlending; }
    if (_uniforms.u_texture) {
      this.defines.TEXCOORD_0 = true;
    }
  }
 }
--- a/src/geom/material/polygonMaterial.js
+++ b/src/geom/material/polygonMaterial.js
@ -1,11 +1,16 @@
 import * as THREE from '../../core/three';
 import polygon_frag from '../shader/polygon_frag.glsl';
 import polygon_vert from '../shader/polygon_vert.glsl';
 import Material from './material';
 export default function PolygonMaterial(options) {
-  const material = new THREE.ShaderMaterial({
+  const material = new Material({
    uniforms: {
-      u_opacity: { value: options.u_opacity },
+      u_opacity: { value: options.u_opacity || 1.0 },
-      u_texture: { value: options.u_texture }
+      u_texture: { value: options.u_texture },
      u_time: { value: options.u_time || 0 },
      u_zoom: { value: options.u_zoom || 0 },
      u_baseColor: { value: options.u_baseColor || [ 1.0, 0, 0, 1.0 ] },
      u_brightColor: { value: options.u_brightColor || [ 1.0, 0, 0, 1.0 ] },
      u_windowColor: { value: options.u_windowColor || [ 1.0, 0, 0, 1.0 ] }
    },
    vertexShader: polygon_vert,
    fragmentShader: polygon_frag,
@ -14,8 +19,5 @@ export default function PolygonMaterial(options) {
      TEXCOORD_0: !!options.u_texture
    }
  });
  material.roughness = 1;
  material.metalness = 0.1;
  material.envMapIntensity = 3;
  return material;
 }
--- a/src/geom/material/rasterMaterial.js
+++ b/src/geom/material/rasterMaterial.js
@ -1,5 +1,4 @@
 import Material from './material';
 import * as THREE from '../../core/three';
 import raster_frag from '../shader/raster_frag.glsl';
 import raster_vert from '../shader/raster_vert.glsl';
 export default function ImageMaterial(options) {
--- a/Show More
+++ b/Show More