From 51c35700a379ce378156d29b26028fdcef7a8b8f Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 6 Mar 2019 16:39:18 +0800 Subject: [PATCH] fix(layer) active feature bug --- demos/03_choropleths_polygon.html | 2 +- src/core/engine/picking/picking.js | 2 +- src/core/layer.js | 19 ++++++++++--------- src/core/source.js | 29 ++++++++++++++++++++--------- src/util/geo.js | 23 ++++++++++++----------- 5 files changed, 44 insertions(+), 31 deletions(-) diff --git a/demos/03_choropleths_polygon.html b/demos/03_choropleths_polygon.html index 4ccebb1bc4..e2d0daefab 100644 --- a/demos/03_choropleths_polygon.html +++ b/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(`

${e.feature.properties.area || e.feature.properties.name }${e.feature.properties.pm2_5_24h || 0}

`); diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js index c467af20ce..6d6ba60de1 100755 --- a/src/core/engine/picking/picking.js +++ b/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 diff --git a/src/core/layer.js b/src/core/layer.js index 084b8a6291..57f394dabd 100644 --- a/src/core/layer.js +++ b/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]; diff --git a/src/core/source.js b/src/core/source.js index 02d29352fa..4dff328e8b 100644 --- a/src/core/source.js +++ b/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; } - } diff --git a/src/util/geo.js b/src/util/geo.js index 1930036cf9..fca8dd519d 100644 --- a/src/util/geo.js +++ b/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;