fix(mvt): source

antvis · Jun 10, 2019 · 5bf076a · 5bf076a
2 parents db50ae4 + 1733971
commit 5bf076a
Show file tree

Hide file tree

Showing 29 changed files with 436 additions and 117 deletions.
diff --git a/demos/01_animatePoint.html b/demos/01_animatePoint.html
@@ -76,7 +76,7 @@
       circleLayer.setData(pointOnCircle(timestamp / 1000));
       requestAnimationFrame(animateMarker);
   }
-   animateMarker(0);
+   //animateMarker(0);
 
    /**
    const layerText =  scene.PointLayer({

diff --git a/demos/tile.html b/demos/tile.html
@@ -35,15 +35,15 @@
 window.scene = scene;
 scene.on('loaded', () => {
   scene.ImageTileLayer({
-    zIndex:0
+    zIndex:4
   })
-  .source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}')
+  .source('http://t1.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=174705aebfe31b79b3587279e211cb9a')
   .render();
 
    $.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
     const citylayer = scene.PolygonLayer(
       {
-        zIndex:4
+        zIndex:0
       }
     )
     .source(city)

diff --git a/demos/vectorTile.html b/demos/vectorTile.html
@@ -34,6 +34,7 @@
 });
 window.scene = scene;
 scene.on('loaded', () => {
+
   const layer = scene.VectorTileLayer({
     zIndex:0,
     layerType:'point'
@@ -42,28 +43,32 @@
 
   // http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point/{z}/{x}/{y}.pbf
   // https://mvt.amap.com/district/CHN2/8/203/105/4096?key=
-  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point2/{z}/{x}/{y}.pbf',{
+  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/all_point/{z}/{x}/{y}.pbf',{
     parser:{
       type: 'mvt',
       sourceLayer:'layer',
-      //idField:'OBJECTID',   
-      maxZoom: 17,
+     // idField:'adcode',   
+      maxZoom: 14,
+      minZoom: 13,
     }
   })
   .scale({
     total:{
       min:0,
-      max:1000000,
+      max:100000,
       type:'log'
     }
   })
-  .shape('hexagon')
-  .size(2)
+  .shape('circle')
+  .size(5)
   .active({fill:'red'})
   .color('total',  ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'].reverse())
   //.color('#0D408C')
   .style({
-    opacity:1.0
+     stroke: 'rgba(255,255,255,0.8)',
+     strokeWidth: 1,
+     strokeOpacity:0.6,
+     opacity: 1
   })
   .render(
   );

diff --git a/demos/vectorTilepolygon.html b/demos/vectorTilepolygon.html
@@ -30,7 +30,7 @@
   center: [116.5909,39.9225 ],
   pitch: 0,
   hash:true,
-  zoom: 14,
+  zoom: 4,
 
 });
 window.scene = scene;
@@ -44,29 +44,29 @@
 
   // http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/point/{z}/{x}/{y}.pbf
   // https://mvt.amap.com/district/CHN2/8/203/105/4096?key=
-  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/{z}/{x}/{y}.pbf',{
+  .source('http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/thinkgis/tile/china/village/{z}/{x}/{y}.pbf',{
     parser:{
       type: 'mvt',
       sourceLayer:'layer',
-      idField:'adcode',   
+      idField:'code',   
       maxZoom: 17,
     }
   })
-  .filter('province',name =>{
-    return name =='山东省'
+  .scale({
+    total:{
+      type:'linear',
+      min:0,
+      max:5000
+    }
   })
   .shape('fill')
   .size(2)
-  .active({fill:'red'})
-  .color('name',name => {
-    //var colorHash = new ColorHash();
-    return colorHash.hex(name)
-  })
+  .active(false)
+  .color('total', ['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506'])
   .style({
     opacity:1.0
   })
-  .render(
-  );
+  .render();
   layer.on('mousemove',(feature)=>{
    console.log(feature);
   })

diff --git a/src/core/controller/buffer.js b/src/core/controller/buffer.js
@@ -0,0 +1,49 @@
+import Util from '../../util';
+import { updateObjecteUniform } from '../../util/object3d-util';
+export default class BufferController {
+  constructor(cfg) {
+    // defs 列定义
+    Util.assign(this, cfg);
+    if (!this.mesh) this.mesh = this.layer;
+  }
+
+  _updateColorAttributes() {
+    const filterData = this.mesh.layerData;
+    const colorKey = {};
+    for (let e = 0; e < filterData.length; e++) {
+      const item = filterData[e];
+      colorKey[item.id] = item.color;
+    }
+    this.layer._activeIds = null; // 清空选中元素xwxw
+    const colorAttr = this.mesh.mesh.geometry.attributes.a_color;
+    const pickAttr = this.mesh.mesh.geometry.attributes.pickingId;
+    pickAttr.array.forEach((id, index) => {
+      id = Math.abs(id);
+      const color = colorKey[id];
+      id = Math.abs(id);
+      const item = filterData[id - 1];
+      if (item.hasOwnProperty('filter') && item.filter === false) {
+        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; // 通过Id数据过滤 id<0 不显示
+      } 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;
+    pickAttr.needsUpdate = true;
+  }
+  _updateStyle(option) {
+    const newOption = { };
+    for (const key in option) {
+      newOption['u_' + key] = option[key];
+    }
+    updateObjecteUniform(this.mesh._object3D, newOption);
+  }
+}
diff --git a/src/core/controller/event.js b/src/core/controller/event.js
@@ -3,4 +3,32 @@ export default class EventContoller {
   constructor(cfg) {
     Util.assign(this, cfg);
   }
+  _init() {
+    this.layer.scene.on('pick-' + this.layer.layerId, e => {
+      let { featureId, point2d, type } = e;
+      if (featureId < 0 && this._activeIds !== null) {
+        type = 'mouseleave';
+      }
+      this._activeIds = featureId;
+      // TODO 瓦片图层获取选中数据信息
+      const lnglat = this.layer.scene.containerToLngLat(point2d);
+      const { feature, style } = this.layer.getSelectFeature(featureId, lnglat);
+      // const style = this.layerData[featureId - 1];
+      const target = {
+        featureId,
+        feature,
+        style,
+        pixel: point2d,
+        type,
+        lnglat: { lng: lnglat.lng, lat: lnglat.lat }
+      };
+      if (featureId >= 0 || this._activeIds >= 0) { // 拾取到元素，或者离开元素
+        this.layer.emit(type, target);
+      }
+
+    });
+  }
+  _initMapEvent() {
+
+  }
 }
diff --git a/src/core/controller/index.js b/src/core/controller/index.js
@@ -2,9 +2,13 @@ import Scale from './scale';
 import Mapping from './mapping';
 import Picking from './pick';
 import Interaction from './interaction';
+import Event from './event';
+import Buffer from './buffer';
 export default {
   Scale,
   Mapping,
   Picking,
-  Interaction
+  Interaction,
+  Event,
+  Buffer
 };
diff --git a/src/core/controller/mapping.js b/src/core/controller/mapping.js
@@ -20,13 +20,15 @@ export default class Mapping {
     this._mapping();
   }
   update() {
+    this.mesh.set('scales', {});
+    this._initTileAttrs();
     this._updateMaping();
   }
   _initControllers() {
-    const scales = this.layer.get('scaleOptions');
+    const scalesOption = this.layer.get('scaleOptions');
     const scaleController = new ScaleController({
       defs: {
-        ...scales
+        ...scalesOption
       }
     });
     this.mesh.set('scaleController', scaleController);
@@ -101,7 +103,10 @@ export default class Mapping {
     // 通过透明度过滤数据
     if (attrs.hasOwnProperty('filter')) {
       mappedData.forEach(item => {
-        item.filter === false && (item.color[3] = 0);
+        if (item.filter === false) {
+          (item.color[3] = 0);
+          item.id = -item.id;
+        }
       });
     }
     this.mesh.layerData = mappedData;

diff --git a/src/core/controller/pick.js b/src/core/controller/pick.js
@@ -1,7 +1,7 @@
 import Util from '../../util';
 import * as THREE from '../three';
 import pickingFragmentShader from '../engine/picking/picking_frag.glsl';
-import { updateObjecteUniform } from '../../util/object3d-util';
+import { updateObjecteUniform, destoryObject } from '../../util/object3d-util';
 export default class PickContoller {
   constructor(cfg) {
     Util.assign(this, cfg);
@@ -19,18 +19,32 @@ export default class PickContoller {
     this.layer.scene._engine._picking.remove(object);
   }
   removePickingMesh(mesh) {
-    this.Object3D.remove(mesh);
+    this.pickObject3D.remove(mesh);
+    destoryObject(mesh);
+  }
+  removePickMeshByName(name) {
+    for (let i = 0; i < this.pickObject3D.children.length; i++) {
+      if (this.pickObject3D.children[i].name === name) {
+        this.removePickingMesh(this.pickObject3D.children[i]);
+      }
+    }
+  }
+  removeAllMesh() {
+    this.pickObject3D.children.forEach(element => {
+
+      this.pickObject3D.remove(element);
+      destoryObject(element);
+    });
   }
   addPickMesh(mesh) {
     const pickmaterial = mesh.material.clone();
     pickmaterial.fragmentShader = pickingFragmentShader;
     const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
-    pickingMesh.name = this.layerId;
+    pickingMesh.name = mesh.name;
     pickingMesh.onBeforeRender = () => {
       const zoom = this.layer.scene.getZoom();
       updateObjecteUniform(pickingMesh, { u_zoom: zoom });
     };
     this.pickObject3D.add(pickingMesh);
-
   }
 }
diff --git a/src/core/layer.js b/src/core/layer.js
@@ -107,7 +107,6 @@ export default class Layer extends Base {
     this._object3D.add(object);
     if (type === 'fill') {
       this.get('pickingController').addPickMesh(object);
-      // this._addPickMesh(object);// 不对边界线进行拾取
     }
     setTimeout(() => this.scene._engine.update(), 500);
   }
@@ -315,7 +314,8 @@ export default class Layer extends Base {
   // 重绘 度量， 映射，顶点构建
   repaint() {
     this.set('scales', {});
-    this._initControllers();
+    const mappingCtr = new Controller.Mapping({ layer: this });
+    this.set('mappingController', mappingCtr);
     // this._initAttrs();
     // this._mapping();
     this.redraw();
@@ -467,7 +467,6 @@ export default class Layer extends Base {
       // TODO 瓦片图层获取选中数据信息
       const lnglat = this.scene.containerToLngLat(point2d);
       const { feature, style } = this.getSelectFeature(featureId, lnglat);
-      // const style = this.layerData[featureId - 1];
       const target = {
         featureId,
         feature,
@@ -533,7 +532,7 @@ export default class Layer extends Base {
       offset = 5;
       this.shapeType = 'text' && (offset = 10);
 
-    } else if (this.type === 'polyline') {
+    } else if (this.type === 'polyline' || this.type === 'line') {
       offset = 2;
     } else if (this.type === 'polygon') {
       offset = 1;
@@ -551,7 +550,7 @@ export default class Layer extends Base {
     this._object3D.children.forEach(child => {
       this._object3D.remove(child);
     });
-    this.removeFromPicking(this._pickingMesh);
+    this.get('pickingController').removeAllMesh();
     this.draw();
   }
   // 更新mesh

diff --git a/src/core/source.js b/src/core/source.js
@@ -20,7 +20,7 @@ export default class Source extends Base {
     super(cfg);
     const transform = this.get('transforms');
     this._transforms = transform || [];
-    const mapType = this.get('mapType');
+    const mapType = this.get('mapType') || 'AMap';
     this.projectFlat = getMap(mapType).project;
     // 数据解析
     this._init();
@@ -56,10 +56,13 @@ export default class Source extends Base {
     const { type = 'geojson' } = parser;
     const data = this.get('data');
     this.originData = getParser(type)(data, parser);
-    this.data = {
-      dataArray: clone(this.originData.dataArray)
-    };
-    this.data.extent = extent(this.data.dataArray);
+    // this.data = {
+    //   dataArray: clone(this.originData.dataArray)
+    // };
+    this.data = this.originData;
+    if (this.data !== null) {
+      this.data.extent = extent(this.data.dataArray);
+    }
   }
   /**
    * 数据统计
@@ -96,6 +99,9 @@ export default class Source extends Base {
     this._projectCoords();
   }
   _projectCoords() {
+    if (this.data === null) {
+      return;
+    }
     this.data.dataArray.forEach(data => {
       // data.coordinates = this._coordProject(data.coordinates);
       data.coordinates = tranfrormCoord(data.coordinates, this._coorConvert.bind(this));