perf(shader): 优化线动画效果

antvis · Aug 12, 2019 · 9b2a4ca · 9b2a4ca
1 parent c83f1c3
commit 9b2a4ca
Show file tree

Hide file tree

Showing 16 changed files with 275 additions and 59 deletions.
diff --git a/demos/01_circle.html b/demos/01_circle.html
@@ -13,7 +13,6 @@
 <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
 <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
 <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
-<link rel=stylesheet type=text/css href='../build/l7.css'>
 <script src="../build/l7.js"></script>
  <style>
 	#map { position:absolute; top:0; bottom:0; width:100%; }
@@ -24,6 +23,8 @@
     mapStyle: 'light', // 样式URL
     center: [120.19382669582967, 30.258134],
     pitch: 0,
+    minZoom:5,
+    maxZoom:15,
     zoom: 12
   });
   window.scene = scene;
@@ -45,6 +46,14 @@
           strokeWidth: 1,
           opacity: 0.9
         }).render();
+
+        const popup = new L7.Popup({anchor:'left'}).setText('hello world')
+        const marker = new L7.Marker({color:'blue'})
+        .setLnglat( [120.19382669582967, 30.258134])
+        .setPopup(popup)
+        .addTo(scene);
+
+
         layer.on('click',(e) => {
            const { lnglat, feature } = e;
          const popup = new L7.Popup()

diff --git a/demos/hz.html b/demos/hz.html
@@ -18,34 +18,114 @@
 <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="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.2.0-beta.1/build/l7.js"></script>
+<script src="../build/l7.js"></script>
 <script>
 var buildLayer =null;
 const scene = new L7.Scene({
   id: 'map',
   mapStyle: 'dark', // 样式URL
-  center: [120.173104,  30.244072],
-  pitch: 66.50572,
-  zoom: 15.79,
-  minZoom:10
+  center: [
+          120.15935897827148,
+          30.261736090037477
+        ],
+  pitch:0,
+  zoom: 5,
+  minZoom: 0,
+  maxZoom: 18
 });
 
+const lineData = {
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            117.02636718749999,
+            37.79676317682161
+          ],
+          [
+            117.20214843749999,
+            37.23032838760387
+          ],
+          [
+            117.31201171875001,
+            36.756490329505176
+          ],
+          [
+            117.43286132812499,
+            36.38591277287651
+          ],
+          [
+            117.586669921875,
+            35.871246850027966
+          ],
+          [
+            117.76245117187499,
+            35.25459097465022
+          ],
+          [
+            117.90527343750001,
+            34.732584206123626
+          ],
+          [
+            117.99316406249999,
+            33.8339199536547
+          ],
+          [
+            117.97119140625,
+            33.119150226768866
+          ],
+          [
+            117.48779296875,
+            32.80574473290688
+          ],
+          [
+            116.773681640625,
+            32.713355353177555
+          ],
+          [
+            115.67504882812501,
+            32.704111144407406
+          ],
+          [
+            114.510498046875,
+            32.85190345738802
+          ],
+          [
+            113.818359375,
+            33.61461929233378
+          ],
+          [
+            113.70849609375,
+            33.970697997361626
+          ]
+        ]
+      }
+    }
+  ]
+}
 scene.on('loaded', () => {
   $.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
     scene.LineLayer({
       zIndex: 2
     })
     .source(data)
     .size(1)
+    .shape('line')
     .color('#ff893a')
     .animate({
         enable:true,
-        interval:0.2,
-        duration:5,
-        trailLength:0.2
+        interval:0.4,
+        duration:1,
+        trailLength:0.8
         })
     .render();
   });
+
    $.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
    buildLayer =  scene.PolygonLayer({
       zIndex: 2
@@ -65,6 +145,7 @@
 
 
   });
+
 });
 
 </script>

diff --git a/demos/marker.html b/demos/marker.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+      <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
+    <title>气泡图</title>
+    <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
+    	#map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
+<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
+<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
+<script src="../build/l7.js"></script>
+ <style>
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+ </style>
+<script>
+  G2.Global.renderer = 'svg'
+  var scene = new L7.Scene({
+    id: 'map',
+    mapStyle: 'light', // 样式URL
+    center: [120.19382669582967, 30.258134],
+    pitch: 0,
+    minZoom:5,
+    maxZoom:15,
+    zoom: 3
+  });
+  window.scene = scene;
+  scene.on('loaded', function() {
+    $.getJSON('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json', function(data) {
+      console.log(data);
+        data.nodes.forEach(item=>{
+            const el = document.createElement('div');
+            const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
+
+            const size =Math.max(Math.min(parseInt(total / 20000), 150),40)
+            console.log(item.name, size);
+            var data = [{
+            item: 'Agriculture',
+            count: item.gdp.Agriculture,
+            percent: item.gdp.Agriculture / total
+          }, {
+            item: 'Industry',
+            count: item.gdp.Industry,
+            percent: item.gdp.Industry / total 
+          }, {
+            item: 'Service',
+            count: item.gdp.Service,
+            percent: item.gdp.Service / total
+          }];
+          var chart = new G2.Chart({
+            container: el,
+            width:size,
+            height:size,
+            render:'svg',
+            padding:5,
+          });
+          chart.source(data, {
+            percent: {
+              formatter: function formatter(val) {
+                val = val * 100 + '%';
+                return val;
+              }
+            }
+          });
+          chart.coord('theta', {
+            radius: 1.0
+          });
+          chart.legend(false);
+          chart.tooltip(false);
+          chart.intervalStack().position('percent').color('item').style({
+            lineWidth: 1,
+            stroke: '#fff'
+          });
+          chart.render();
+            const popup = new L7.Popup({anchor:'left'}).setText(item.name);
+            const marker = new L7.Marker({color:'blue', element:el})
+            .setLnglat( item.coordinates)
+            .setPopup(popup)
+            .addTo(scene);
+
+
+        })
+
+    })
+  });
+
+
+
+</script>
+</body>
+</html>
diff --git a/demos/vector2.html b/demos/vector2.html
@@ -25,7 +25,7 @@
 
 const scene = new L7.Scene({
   id: 'map',
-  mapStyle: 'light', // 样式URL
+  mapStyle: 'dark', // 样式URL
   center: [104.838088,34.075889 ],
   pitch: 0,
   hash:false,
@@ -42,7 +42,7 @@
   attributeCtr.addTo(scene);
 
   scene.addTileSource('test',{
-     url:'http://127.0.0.1:8080/{z}/{x}/{y}.pbf',
+     url:' https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf',
      type:'vector',
      minZoom: 0,
      maxZoom:9
@@ -54,8 +54,8 @@
   .source('test',{
     parser:{
       type: 'mvt',
-      sourceLayer:'boundaries_admin_3',
-      idField:'id'
+      sourceLayer:'CHN_Cities',
+      idField:'adcode'
     }
    })
   .shape('fill')
@@ -70,27 +70,29 @@
            const { lnglat, feature } = e;
          const popup = new L7.Popup()
           .setLnglat([lnglat.lng, lnglat.lat])
-          .setHTML(feature.properties.id).addTo(scene);
+          .setHTML(feature.properties.NAME_CHN.toString()).addTo(scene);
   }) 
- const layer2 = scene.PolygonLayer({
+
+ const layer2 = scene.LineLayer({
     zIndex:10,
   }) 
   .source('test',{
     parser:{
       type: 'mvt',
-      sourceLayer:'boundaries_admin_3',
-      idField:'id'
+      sourceLayer:'CHN_L',
+      idField:'adcode'
     }
    })
   .shape('line')
-  .size(1)
+  .size(2)
   .active(false)
   .color('#fff')
   .style({
     opacity:1.0
   })
   .render();
 
+/**
   const layer3 = scene.PointLayer({
     zIndex:10,
   }) 
@@ -109,13 +111,15 @@
     opacity:1.0
   })
   .render();
+  **/
   const overlayers = {
     "行政区划": layer,
-    "标注": layer3,
+    "行政区边界": layer2,
   };
+
  const layerContr =  new L7.Control.Layers({overlayers}).addTo(scene);
  const popup = new L7.Popup({anchor:'left'}).setText('hello world')
- const marker = new L7.Marker({color:'red'})
+ const marker = new L7.Marker({color:'blue'})
  .setLnglat([104.838088,34.075889 ])
  .setPopup(popup)
  .addTo(scene);

diff --git a/src/component/control/zoom.js b/src/component/control/zoom.js
@@ -12,23 +12,24 @@ export default class Zoom extends Control {
       ...cfg
     });
     bindAll([ '_updateDisabled', '_zoomIn', '_zoomOut' ], this);
+    this._disabled = false;
   }
-  onAdd() {
+  onAdd(scene) {
     const zoomName = 'l7-control-zoom';
     const container = DOM.create('div', zoomName + ' l7-bar');
 
     this._zoomInButton = this._createButton(this.get('zoomInText'), this.get('zoomInTitle'),
       zoomName + '-in', container, this._zoomIn);
     this._zoomOutButton = this._createButton(this.get('zoomOutText'), this.get('zoomOutTitle'),
       zoomName + '-out', container, this._zoomOut);
+    scene.on('zoomend', this._updateDisabled);
+    scene.on('zoomchange', this._updateDisabled);
     this._updateDisabled();
-    this._scene.on('zoomend', this._updateDisabled);
-    this._scene.on('zoomchange', this._updateDisabled);
     return container;
   }
-  onRemove() {
-    this._scene.off('zoomend', this._updateDisabled);
-    this._scene.off('zoomchange', this._updateDisabled);
+  onRemove(scene) {
+    scene.off('zoomend', this._updateDisabled);
+    scene.off('zoomchange', this._updateDisabled);
   }
   disable() {
     this._disabled = true;
@@ -63,11 +64,10 @@ export default class Zoom extends Control {
     const className = 'l7-disabled';
     DOM.removeClass(this._zoomInButton, className);
     DOM.removeClass(this._zoomOutButton, className);
-
-    if (this._disabled || scene.getZoom() === scene.get('minZoom')) {
+    if (this._disabled || scene.getZoom() <= scene.get('minZoom')) {
       DOM.addClass(this._zoomOutButton, className);
     }
-    if (this._disabled || scene._zoom === scene.get('maxZoom')) {
+    if (this._disabled || scene.getZoom() >= scene.get('maxZoom')) {
       DOM.addClass(this._zoomInButton, className);
     }
   }