fix(layer) active feature bug

demos/03_choropleths_polygon.html

@@ -96,7 +96,7 @@ scene.on('loaded', () => {
        })
       .render();
     
-
+    console.log(citylayer);
     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>`);

src/core/engine/picking/picking.js

@@ -98,7 +98,7 @@ class Picking {
     }
     const item = {
       layerId,
-      featureId: id - 1,
+      featureId: id,
       point2d: _point2d,
       point3d: _point3d,
       intersects

src/core/layer.js

@@ -280,12 +280,12 @@ export default class Layer extends Base {
     const { featureId } = e;
     if (featureId < 0) return;
     const activeStyle = this.get('activedOptions');
-    // const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId);
+    const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(featureId);
     // 如果数据不显示状态则不进行高亮
     if (this.layerData[featureId].hasOwnProperty('filter') && this.layerData[featureId].filter === false) { return; }
-    const style = Util.assign({}, this.layerData[featureId]);
+    const style = Util.assign({}, this.layerData[selectFeatureIndexId]); // 要素ID 和dataId不是对应关系
     style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
-    this.updateStyle([ featureId ], style);
+    this.updateStyle([ featureId ], style, selectFeatureIndexId);
   }
 
 
@@ -351,6 +351,7 @@ export default class Layer extends Base {
           const attr = attrs[k];
           attr.needUpdate = false;
           const names = attr.names;
+
           const values = self._getAttrValues(attr, record);
           if (names.length > 1) { // position 之类的生成多个字段的属性
             for (let j = 0; j < values.length; j++) {
@@ -509,9 +510,9 @@ export default class Layer extends Base {
     const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
     const color = style.color;
     const colorAttr = this.layerMesh.geometry.attributes.a_color;
-    const firstId = pickingId.indexOf(featureStyleId[0] + 1);
+    const firstId = pickingId.indexOf(featureStyleId[0]);
     for (let i = firstId; i < pickingId.length; i++) {
-      if (pickingId[i] === featureStyleId[0] + 1) {
+      if (pickingId[i] === featureStyleId[0]) {
         colorAttr.array[i * 4 + 0] = color[0];
         colorAttr.array[i * 4 + 1] = color[1];
         colorAttr.array[i * 4 + 2] = color[2];
@@ -583,14 +584,14 @@ export default class Layer extends Base {
    * 重置高亮要素
    */
   _resetStyle() {
-
     const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
     const colorAttr = this.layerMesh.geometry.attributes.a_color;
     this._activeIds.forEach(index => {
-      const color = this.layerData[index].color;
-      const firstId = pickingId.indexOf(index + 1);
+      const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(index);
+      const color = this.layerData[selectFeatureIndexId].color;
+      const firstId = pickingId.indexOf(index);
       for (let i = firstId; i < pickingId.length; i++) {
-        if (pickingId[i] === index + 1) {
+        if (pickingId[i] === index) {
           colorAttr.array[i * 4 + 0] = color[0];
           colorAttr.array[i * 4 + 1] = color[1];
           colorAttr.array[i * 4 + 2] = color[2];

src/core/source.js

@@ -1,4 +1,3 @@
-
 import Base from './base';
 import Controller from './controller/index';
 import { getTransform, getParser } from '../source';
@@ -11,8 +10,7 @@ export default class Source extends Base {
       defs: {},
       parser: {},
       transforms: [],
-      scales: {
-      },
+      scales: {},
       options: {}
     };
   }
@@ -84,7 +82,6 @@ export default class Source extends Base {
     return geo;
   }
   _coordProject(geo) {
-
     if (Array.isArray(geo[0][0])) {
       return geo.map(coor => {
         return this._coordProject(coor);
@@ -92,22 +89,36 @@ export default class Source extends Base {
     }
     if (!Array.isArray(geo[0])) {
       return this._coorConvert(geo);
-
     }
     return geo.map(coor => {
       return this._coorConvert(coor);
     });
   }
   _coorConvert(geo) {
-
     const ll = this.projectFlat(geo);
     return [ ll.x, ll.y, geo[2] || 0 ];
-
   }
   getSelectFeature(featureId) {
     const data = this.get('data');
     // 如果是GeoJSON 数据返回原数
-    return data.features ? data.features[featureId] : this.data.dataArray[featureId];
+    // 颜色编码从1开始，要素索引从0开始，所以颜色转变要素需要减1
+    return data.features
+      ? data.features[featureId - 1]
+      : this.data.dataArray[featureId - 1];
+  }
+  getSeletFeatureIndex(featureId) {
+    const data = this.get('data');
+    if (!data.features) {
+      return featureId - 1;
+    }
+    let featureIndex = 0;
+    for (let i = 0; i < this.data.dataArray.length; i++) {
+      const item = this.data.dataArray[i];
+      if (item._id === featureId) {
+        break;
+      }
+      featureIndex++;
+    }
+    return featureIndex;
   }
-
 }

src/util/geo.js

@@ -7,18 +7,19 @@ export function extent(data) {
   const extent = [ Infinity, Infinity, -Infinity, -Infinity ];
   data.forEach(item => {
     const { coordinates } = item;
-    if (Array.isArray(coordinates[0])) {
-      coordinates.forEach(coord => {
-        if (extent[0] > coord[0]) extent[0] = coord[0];
-        if (extent[1] > coord[1]) extent[1] = coord[1];
-        if (extent[2] < coord[0]) extent[2] = coord[0];
-        if (extent[3] < coord[1]) extent[3] = coord[1];
-      });
+    calcExtent(extent, coordinates);
+  });
+  return extent;
+}
+function calcExtent(extent, coords) {
+  coords.forEach(coord => {
+    if (Array.isArray(coord[0])) {
+      calcExtent(extent, coord);
     } else {
-      if (extent[0] > coordinates[0]) extent[0] = coordinates[0];
-      if (extent[1] > coordinates[1]) extent[1] = coordinates[1];
-      if (extent[2] < coordinates[0]) extent[2] = coordinates[0];
-      if (extent[3] < coordinates[1]) extent[3] = coordinates[1];
+      if (extent[0] > coord[0]) extent[0] = coord[0];
+      if (extent[1] > coord[1]) extent[1] = coord[1];
+      if (extent[2] < coord[0]) extent[2] = coord[0];
+      if (extent[3] < coord[1]) extent[3] = coord[1];
     }
   });
   return extent;