fix many bugs

imagelayer update when image loaded
map  style 支持空地图切换
文字样式更新 支持

bin/shader2js.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const Path = require('path');
+const dirpath = Path.join(__dirname, '../src/geom/shader/');
+// const shaderdir = fs.readdirSync(dirpath);
+readDirSync(dirpath);
+
+function readDirSync(path) {
+  const pa = fs.readdirSync(path);
+  let dir = '../lib/geom/shader/';
+  pa.forEach(function(ele) {
+    const info = fs.statSync(path + '/' + ele);
+    if (info.isDirectory()) {
+      dir += (ele + '/');
+      readDirSync(path + '/' + ele);
+    } else {
+      if (Path.extname(path + ele) === '.glsl') {
+        if (!fs.existsSync(Path.join(__dirname, dir + '/'))) {
+          fs.mkdirSync(Path.join(__dirname, dir + '/'));
+        }
+        const newpath = Path.join(__dirname, dir + '/' + ele + '.js');
+        const shaderContent = fs.readFileSync(path + '/' + ele).toString();
+        const res = `export default /* glsl */\` \n${shaderContent};\``;
+        fs.writeFileSync(newpath, res);
+
+      }
+
+    }
+  });
+}
+

demos/text.html

@@ -51,7 +51,7 @@ scene.on('loaded', () => {
     })
     .render();
 
-    scene.TextLayer({
+    scene.PointLayer({
       zIndex: 5
     })
    .source(data.list, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "1.3.3-beta.2",
+  "version": "1.3.3-beta.3",
   "description": "Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "build/L7.js",
   "homepage": "https://github.com/antvis/l7",

rollup.config.js

@@ -41,11 +41,9 @@ const config = [
       ),
       minified ? terser() : false,
       json(),
-      // css({ raw: './build/l7.css' }),
       postcss({
         plugins: [ url({ url: 'inline' }) ]
       }),
-      // url({ url: 'inline' }),
       buble({
         transforms: { dangerousForOf: true },
         objectAssign: 'Object.assign'

src/component/control/base.js

@@ -23,6 +23,7 @@ export default class Control extends Base {
   }
   addTo(scene) {
     this.remove();
+    this.isShow = true;
     this._scene = scene;
     const container = this._container = this.onAdd(scene);
     const pos = this.get('position');
@@ -36,6 +37,16 @@ export default class Control extends Base {
     }
     return this;
   }
+  hide() {
+    const container = this._container;
+    DOM.addClass(container, 'l7-control-hide');
+    this.isShow = false;
+  }
+  show() {
+    const container = this._container;
+    DOM.removeClass(container, 'l7-control-hide');
+    this.isShow = true;
+  }
   remove() {
     if (!this._scene) {
       return this;

src/component/css/l7.css

@@ -230,6 +230,9 @@
 .l7-control-container {
 	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
+.l7-control-hide {
+	display: none;
+}
 .l7-control {
 	position: relative;
 	z-index: 800;

src/core/scene.js

@@ -36,13 +36,17 @@ export default class Scene extends Base {
     const controlCtr = new Controller({ scene: this });
     this.set('controlController', controlCtr);
     if (this.get('zoomControl')) {
-      new Control.Zoom().addTo(this);
+      const zoomControl = new Control.Zoom().addTo(this);
+      this.set('zoomControl', zoomControl);
+
     }
     if (this.get('scaleControl')) {
-      new Control.Scale().addTo(this);
+      const scaleControl = new Control.Scale().addTo(this);
+      this.set('scaleControl', scaleControl);
     }
     if (this.get('attributionControl')) {
-      new Control.Attribution().addTo(this);
+      const attributionControl = new Control.Attribution().addTo(this);
+      this.set('attributionControl', attributionControl);
     }
   }
   // 为pickup场景添加 object 对象

src/geom/shader/text_frag.glsl

@@ -1,9 +1,9 @@
 uniform sampler2D u_sdf_map;
 uniform float u_gamma_scale : 0.5;
 uniform float u_font_size : 24;
-uniform float u_font_opacity : 1.0;
-uniform vec4 u_halo_color : [0, 0, 0, 1];
-uniform float u_halo_width : 2.0;
+uniform float u_opacity : 1.0;
+uniform vec4 u_strokeColor : [0, 0, 0, 1];
+uniform float u_strokeWidth : 2.0;
 uniform float u_halo_blur : 0.5;
 
 varying vec4 v_color;
@@ -16,13 +16,13 @@ void main() {
 
   float fontScale = u_font_size / 24.0;
 
-  lowp float buff = (6.0 - u_halo_width / fontScale) / SDF_PX;
+  lowp float buff = (6.0 - u_strokeWidth / fontScale) / SDF_PX;
   highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
   
   highp float gamma_scaled = gamma * v_gamma_scale;
 
   highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
 
-  gl_FragColor = mix(v_color * u_font_opacity, u_halo_color, smoothstep(0., 0.5, 1. - dist)) * alpha;
+  gl_FragColor = mix(v_color * u_opacity, u_strokeColor, smoothstep(0., 0.5, 1. - dist)) * alpha;
   #pragma include "pick"
 }

src/layer/image_layer.js

@@ -21,6 +21,7 @@ export default class imageLayer extends Layer {
       });
       const imageMesh = new THREE.Mesh(this.geometry, material);
       this.add(imageMesh);
+      this.scene._engine.update();
 
     });
     return this;

src/layer/render/text/drawText.js

@@ -34,10 +34,10 @@ export default function DrawText(layerData, layer) {
   const material = new TextMaterial({
     name: layer.layerId,
     u_sdf_map: texture,
-    u_halo_color: ColorUtil.toRGB(strokeColor).map(e => e / 255),
-    u_halo_width: strokeWidth,
+    u_strokeColor: ColorUtil.toRGB(strokeColor).map(e => e / 255),
+    u_strokeWidth: strokeWidth,
     u_halo_blur: 0.5,
-    u_font_opacity: opacity,
+    u_opacity: opacity,
     u_sdf_map_size: [ fontAtlas.width, fontAtlas.height ],
     u_viewport_size: [ width, height ],
     u_activeColor: activeOption.fill

src/map/AMap.js

@@ -3,7 +3,7 @@ import Global from '../global';
 import * as Theme from '../theme/index';
 import Util from '../util';
 const DEG2RAD = Math.PI / 180;
-const defaultMapFeatures = ['bg', 'point', 'road', 'building' ];
+const defaultMapFeatures = [ 'bg', 'point', 'road', 'building' ];
 export default class GaodeMap extends Base {
   getDefaultCfg() {
     return Util.assign(Global.scene, {
@@ -35,42 +35,33 @@ export default class GaodeMap extends Base {
 
   initMap() {
     const mapStyle = this.get('mapStyle');
-    if (mapStyle) {
-      switch (mapStyle) {
-        case 'dark':
-          this.set('mapStyle', Theme.DarkTheme.mapStyle);
-          break;
-        case 'light':
-          this.set('mapStyle', Theme.LightTheme.mapStyle);
-          break;
-        case 'blank':
-          this.set('mapStyle', 'blank');
-          break;
-        default:
-          this.set('mapStyle', mapStyle);
-      }
-    }
+    // if (mapStyle) {
+    //   switch (mapStyle) {
+    //     case 'dark':
+    //       this.set('mapStyle', Theme.DarkTheme.mapStyle);
+    //       break;
+    //     case 'light':
+    //       this.set('mapStyle', Theme.LightTheme.mapStyle);
+    //       break;
+    //     case 'blank':
+    //       this.set('mapStyle', 'blank');
+    //       break;
+    //     default:
+    //       this.set('mapStyle', mapStyle);
+    //   }
+    // }
     this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
     const map = this.get('map');
     if (map instanceof AMap.Map) {
       this.map = map;
       this.container = map.getContainer();
-      this.get('mapStyle') && this.map.setMapStyle(this.get('mapStyle'));
-      if (this.get('mapStyle') === 'blank') {
-        map.setFeatures([]);
-      } else {
-        map.setFeatures(defaultMapFeatures);
-      }
+      this.setMapStyle(mapStyle);
       this.addOverLayer();
       setTimeout(() => { this.emit('mapLoad'); }, 50);
     } else {
       this.map = new AMap.Map(this.container, this._attrs);
       this.map.on('complete', () => {
-        if (this.get('mapStyle') === 'blank') {
-          this.map.setFeatures([]);
-        } else {
-          this.map.setFeatures(defaultMapFeatures);
-        }
+        this.setMapStyle(mapStyle);
         this.addOverLayer();
         this.emit('mapLoad');
       });
@@ -127,6 +118,27 @@ export default class GaodeMap extends Base {
     this.l7_marker_Container.className = 'l7_marker';
     this.amapContainer.appendChild(this.l7_marker_Container);
   }
+  setMapStyle(style) {
+    const map = this.map;
+    switch (style) {
+      case 'dark':
+        this.set('mapStyle', Theme.DarkTheme.mapStyle);
+        break;
+      case 'light':
+        this.set('mapStyle', Theme.LightTheme.mapStyle);
+        break;
+      default:
+        this.set('mapStyle', style);
+    }
+
+    map.setMapStyle(this.get('mapStyle'));
+    if (style === 'blank') {
+      map.setFeatures([]);
+    } else {
+      map.setFeatures(defaultMapFeatures);
+    }
+    return;
+  }
   mixMap(scene) {
     const map = this.map;
     scene.project = GaodeMap.project;
@@ -158,22 +170,7 @@ export default class GaodeMap extends Base {
       return map.getBounds();
     };
     scene.setMapStyle = style => {
-
-      switch (style) {
-        case 'dark':
-          this.set('mapStyle', Theme.DarkTheme.mapStyle);
-          break;
-        case 'light':
-          this.set('mapStyle', Theme.LightTheme.mapStyle);
-          break;
-        default:
-          this.set('mapStyle', style);
-      }
-      map.setMapStyle(this.get('mapStyle'));
-      if (style === 'blank') {
-        map.setFeatures([]);
-      }
-      return;
+      return this.setMapStyle(style);
     };
     scene.setZoomAndCenter = (zoom, center) => {
       const lnglat = new AMap.LngLat(center[0], center[1]);
@@ -213,9 +210,6 @@ export default class GaodeMap extends Base {
     scene.lngLatToPixel = lnglat => {
       return map.lnglatToPixel(new AMap.LngLat(lnglat[0], lnglat[1]));
     };
-    scene.setMapStyle = style => {
-      return map.setMapStyle(style);
-    };
     scene.fitBounds = extent => {
       return map.setBounds(
         new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ])