p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(layer): 修复数据更新数据为空

This commit is contained in:
thinkinggis 2019-08-20 15:50:38 +08:00
parent 2b54270c0a
commit 5c285a032e
8 changed files with 102 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
demos/datafilter.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>hexagon demo</title>
<style>
body {margin: 0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<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="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [121.5558, 31.2481 ],
pitch: 0,
zoom: 11,
hash:true,
});
window.scene = scene;
scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/7bb614db-bac0-48d7-93e7-9446392d3917.json', city => {
const layer = scene.PolygonLayer()
.source(city)
.color('unit_price',['#b2182b','#ef8a62','#fddbc7','#d1e5f0','#67a9cf','#2166ac'].reverse())
.shape('fill')
.active(false)
.style({
opacity: 1
})
.render()
const highlight = scene.LineLayer()
.source(city)
.color('#fff')
.filter(false)
.shape('line')
.size(4)
.render()
layer.on('click',(item)=>{
const { feature } = item;
highlight.filter('id',(id)=>{
return feature.properties.id === id;
}).render();
})
})
});
</script>
</body>
</html>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "1.3.0-beta.1",
"version": "1.3.0-beta.2",
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/L7.js",
"browser": "build/L7-min.js",

11
src/core/controller/mapping.js
View File

@ -18,15 +18,20 @@ export default class Mapping {
_init() {
this._initControllers();
this._initTileAttrs();
this._initAttrs();
this._mapping();
}
update() {
this.mesh.set('scales', {});
this._initTileAttrs();
this._initAttrs();
this._updateMaping();
}
reMapping() {
this.mesh.set('scales', {});
this._initAttrs();
this._mapping();
}
_initControllers() {
const scalesOption = this.layer.get('scaleOptions');
@ -144,7 +149,7 @@ export default class Mapping {
}
_initTileAttrs() {
_initAttrs() {
const attrOptions = this.layer.get('attrOptions');
for (const type in attrOptions) {
if (attrOptions.hasOwnProperty(type)) {

2
src/core/engine/picking/picking.js
View File

@ -20,7 +20,7 @@ class Picking {
depthBuffer: true
};
this._pickingTexture = new THREE.WebGLRenderTarget(this._width, this._height, parameters);
this._pickingTexture = new THREE.WebGLRenderTarget(this._width / 10, this._height / 10, parameters);
this._nextId = 1;

39
src/core/layer.js
View File

@ -81,16 +81,15 @@ export default class Layer extends Base {
/**
* 将图层添加加到 Object
* @param {*} object three 物体
* @param {*} type mesh类型是区别是填充还是边线
*/
add(object, type = 'fill') {
add(object) {
// composer合图层绘制
if (object.type === 'composer') {
this._object3D = object;
this.scene._engine.composerLayers.push(object);
return;
}
type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
this.layerMesh = object;
this._visibleWithZoom();
object.onBeforeRender = () => { // 每次渲染前改变状态
const zoom = this.scene.getZoom();
@ -105,9 +104,8 @@ export default class Layer extends Base {
this.afterRender();
};
this._object3D.add(object);
if (type === 'fill') {
this.get('pickingController').addPickMesh(object);
}
this.get('pickingController').addPickMesh(object);
}
remove(object) {
if (object.type === 'composer') {
@ -279,6 +277,7 @@ export default class Layer extends Base {
setData(data, cfg) {
this.layerSource.setData(data, cfg);
this.repaint();
this.scene._engine.update();
}
_createScale(field) {
// TODO scale更新
@ -331,7 +330,7 @@ export default class Layer extends Base {
this.scene.style.update(this._attrs);
return this;
}
this.init();
this._updateDraw();
this.scene._engine.update();
return this;
}
@ -345,7 +344,6 @@ export default class Layer extends Base {
init() {
this._initControllers();
this._mapping();
this._updateDraw();
}
_initInteraction() {
if (this.get('allowActive')) {
@ -379,6 +377,7 @@ export default class Layer extends Base {
setActive(id, color) {
this._activeIds = id;
if (!color) color = Global.activeColor;
if (!Array.isArray(color)) {
color = ColorUtil.color2RGBA(color);
}
@ -407,31 +406,35 @@ export default class Layer extends Base {
const preStyle = this.get('preStyleOption');
const nextStyle = this.get('styleOptions');
if (preAttrs === undefined && preStyle === undefined) { // 首次渲染
// this._mapping();
// this._scaleByZoom();
this._setPreOption();
this.init();
this._initInteraction();
this._initMapEvent();
if (this.layerData.length === 0) {
return;
}
this.draw();
return;
}
if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
this._updateAttributes(this.layerMesh);
}
// 更新数据过滤 filter
if (!Util.isEqual(preAttrs.filter, nextAttrs.filter)) {
// 更新color；
this.repaint();
this._setPreOption();
return;
}
if (!Util.isEqual(preAttrs.color, nextAttrs.color)) {
this._updateAttributes(this.layerMesh);
}
// 更新Size
if (!Util.isEqual(preAttrs.size, nextAttrs.size)) {
// 更新color；
this._updateSize();
this.repaint();
}
// 更新形状
if (!Util.isEqual(preAttrs.shape, nextAttrs.shape)) {
// 更新color；
this._updateShape();
this.repaint();
}
if (!Util.isEqual(preStyle, nextStyle)) {
// 判断新增，修改，删除
@ -442,7 +445,6 @@ export default class Layer extends Base {
});
this._updateStyle(newStyle);
}
this._setPreOption();
}
_updateSize(zoom) {
@ -525,6 +527,9 @@ export default class Layer extends Base {
style
};
}
_updateFilter() {
this.get('mappingController').reMapping();
}
/**
* 用于过滤数据
* @param {*} object 更新颜色和数据过滤

5
src/core/scene.js
View File

@ -3,7 +3,6 @@ import { LAYER_MAP } from '../layer';
import Base from './base';
import LoadImage from './image';
import FontAtlasManager from './atlas/font-manager';
// import { MapProvider } from '../map/AMap';
import { getMap } from '../map/index';
import Global from '../global';
import { getInteraction } from '../interaction/index';
@ -145,9 +144,7 @@ export default class Scene extends Base {
// 要素拾取
if (e.target.nodeName !== 'CANVAS') return;
e.pixel || (e.pixel = e.point);
requestAnimationFrame(() => {
this._engine._picking.pickdata(e);
});
this._engine._picking.pickdata(e);
}, true);
});
}

1
src/core/source.js
View File

@ -40,6 +40,7 @@ export default class Source extends Base {
this._transforms = transform || [];
this.set('data', data);
this._init();
this.emit('SourceUpdate');
}
// 数据更新
updateTransfrom(cfg) {

1
src/geom/shader/arcline_vert.glsl
View File

@ -56,7 +56,6 @@ void main() {
float segmentRatio = getSegmentRatio(segmentIndex);
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
v_distance_ratio = segmentIndex / segmentNumber;
vec3 curr = getPos(source, target, segmentRatio);
vec3 next = getPos(source, target, nextSegmentRatio);
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y);