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

fix(active): fliter acitve

This commit is contained in:
李正学 2018-11-06 11:27:16 +08:00
parent 68394f3191
commit c603e30e23
23 changed files with 180 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
demos/01_point_circle.html
View File

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram"> <meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css"> <link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>point_circle</title> <title>point_circle</title>
<style> <style>
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
@ -14,18 +15,50 @@
<body> <body>
<div id="map"></div> <div id="map"></div>
<div class='info-panel top-right'>
<h4>杭州市微博签到数据</h4>
<p>
<label>min</label><input name="minaqi" type="range" step="1" min="0" max="30000" value=500> <label>500</label>
</p>
<p>
<label>max</label><input name="maxaqi" type="range" step="1" min="0" max="30000" value=30000><label>30000</label>
</p>
<p><label>color</label><select>
<option value ="blue">blue</option>
<option value ="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
</select> </p>
<p><label>shape</label><select>
<option value ="circle">circle</option>
<option value ="triangle">triangle</option>
<option value="hexagon">hexagon</option>
<option value="square">square</option>
</select> </p>
<div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <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/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#98E3FA", "#65CEF7", "#3CB4F0", "#2894E0", "#1A76C7", "#105CB3", "#0D408C", "#002466"].reverse(),
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
}
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'light', // 样式URL mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ], center: [ 120.19382669582967, 30.258134 ],
pitch: 0, pitch: 0,
zoom: 14.6 zoom: 11.6
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
@ -35,22 +68,35 @@ scene.on('loaded', () => {
}) })
.source(data) .source(data)
.shape('2d:circle') .shape('2d:circle')
.size('value', [ 8, 500 ]) // default 1 .size('value', [ 1000, 5000]) // default 1
.active(true) .active({fill:'blue'})
.filter('value', field_8 => { .filter('value', field_8 => {
return field_8 * 1 > 500; return field_8 * 1 > 500;
}) })
.color('type', [ '#ffffd4', '#fed98e', '#fe9929', '#d95f0e', '#993404' ].reverse()) .color('type', colorObj.blue.reverse())
.style({ .style({
stroke: 'rgb(255,255,255)', stroke: 'rgb(255,255,255)',
strokeWidth: 1, strokeWidth: 1,
opacity: 0.9 opacity: 0.9
}) })
.render(); .render();
$('.info-panel input').change(function(){
//circleLayer.size('value', [ 8, 1000 ]).render(); $(this).next().text($(this).val());
const min = $('.info-panel input').val();
const max = $($('.info-panel input')[1]).val();
circleLayer.filter('value',(value)=>{
return (value>=min && value<=max)
}).render();
})
$('.info-panel select').change(function(){
const color = $(this).val();
console.time('color');
circleLayer.color('type',colorObj[color]).render();
console.timeEnd('color')
})
}); });
}); });
</script> </script>

4
demos/01_point_distribute.html
View File

@ -19,8 +19,6 @@
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script> <script src="../build/L7.js"></script>
<script> <script>
const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ];
const scene = new L7.Scene({ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
@ -40,7 +38,7 @@ scene.on('loaded', () => {
x: 'lng' x: 'lng'
}) })
.size(2.0) .size(2.0)
.color('#0198BD') .color('#0D408C')
.style({ .style({
stroke: 'rgb(255,255,255)', stroke: 'rgb(255,255,255)',
strokeWidth: 0, strokeWidth: 0,

15
demos/01_point_image.html
View File

@ -40,32 +40,37 @@ scene.on('loaded', () => {
.color('#0198BD') .color('#0198BD')
.size(40.0) .size(40.0)
.shape('image:bike') .shape('image:bike')
.render(); //.render();
}); });
$.get('./data/fence.json', data => { $.get('./data/fence.json', data => {
scene.PolygonLayer({ scene.PolygonLayer({
zIndex: 0 zIndex: 0
}) })
.source(data) .source(data)
.shape('fill') .shape('line')
.color('#0198BD') .color('#0198BD')
.style({ .style({
opacity:0.6 opacity:0.5
}) })
.render(); .render();
}); });
$.getJSON('./data/pointZone.json', data => { $.getJSON('./data/pointZone.json', data => {
scene.PolygonLayer({ const fenceLayer = scene.PolygonLayer({
zIndex: 1 zIndex: 1
}) })
.source(data) .source(data)
.shape('fill') .shape('fill')
.active({fill:'blue'})
.color("#F04850") .color("#F04850")
.style({ .style({
opacity:1.0 opacity:1.0
}) })
.render(); .render();
fenceLayer.on('click',(e)=>{
console.log(e.feature.properties._id);
})
}); });
}); });
</script> </script>

2
demos/03_choropleths_polygon.html
View File

@ -48,7 +48,7 @@ const colorObj ={
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"], orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"],
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"], green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"],
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"], yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"],
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"] purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"],
} }
const scene = new L7.Scene({ const scene = new L7.Scene({

21
demos/04_image.html
View File

@ -24,32 +24,21 @@ const scene = new L7.Scene({
id: 'map', id: 'map',
mapStyle: 'dark', // 样式URL mapStyle: 'dark', // 样式URL
center: [ 110.770672, 34.159869 ], center: [ 110.770672, 34.159869 ],
pitch: 45, pitch: 0,
zoom: 5, zoom: 5,
minZoom: 4, minZoom: 4,
maxZoom: 10 maxZoom: 6
}); });
scene.on('loaded', () => { scene.on('loaded', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
citylayer = scene.PolygonLayer({
zIndex: 10
})
.source(city)
.color('#fff')
.shape('line')
// .active({ fill: 'red' })
.style({
opacity: 1
})
.render();
});
// https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png // https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png
const imageLayer = scene.ImageLayer(). const imageLayer = scene.ImageLayer().
source({ source({
url: 'https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png', url: 'https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png',
extent: [ 73, 18, 136, 54 ] extent: [ 73, 18, 136, 54 ]
})
.style({
opacity:0.8,
}) })
.render(); .render();

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

@ -9,6 +9,7 @@ class Picking {
this._camera = camera; this._camera = camera;
this._raycaster = new THREE.Raycaster(); this._raycaster = new THREE.Raycaster();
this.scene = scene; this.scene = scene;
this._envents=[];
// TODO: Match this with the line width used in the picking layers // TODO: Match this with the line width used in the picking layers
this._raycaster.linePrecision = 3; this._raycaster.linePrecision = 3;
@ -37,14 +38,15 @@ class Picking {
this._mouseUpHandler = this._onMouseUp.bind(this); this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener('mouseup', this._mouseUpHandler, false); this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false); this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
} }
_onMouseUp(event) { _onMouseUp(event) {
// Only react to main button click // Only react to main button click
if (event.button !== 0) { // if (event.button !== 0) {
return; // return;
} // }
const point = { x: event.clientX, y: event.clientY }; const point = { x: event.clientX, y: event.clientY };
const normalisedPoint = { x: 0, y: 0 }; const normalisedPoint = { x: 0, y: 0 };
@ -72,6 +74,7 @@ class Picking {
this._needUpdate = true; this._needUpdate = true;
} }
_update(point) { _update(point) {
const texture = this._pickingTexture; const texture = this._pickingTexture;
if (this._needUpdate) { if (this._needUpdate) {
@ -82,6 +85,20 @@ class Picking {
this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer); this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
}
// 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up
on(type){
this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener(type, this._mouseUpHandler, false);
this._envents.push([type,this._mouseUpHandler])
}
off(type,hander){
this._world._container.removeEventListener(type, this._mouseUpHandler, false);
this._envents = this._envents.filter((item)=>{
return item[0]==='type' && hander ===item[1];
})
} }
_updateRender() { _updateRender() {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture); this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
@ -115,7 +132,7 @@ class Picking {
// //
// TODO: Look into the leak potential for passing so much by reference here // TODO: Look into the leak potential for passing so much by reference here
const item = { const item = {
featureId: id, featureId: id-1,
point2d: _point2d, point2d: _point2d,
point3d: _point3d, point3d: _point3d,
intersects intersects
@ -147,8 +164,10 @@ class Picking {
// TODO: Find a way to properly remove these listeners as they stay // TODO: Find a way to properly remove these listeners as they stay
// active at the moment // active at the moment
window.removeEventListener('resize', this._resizeHandler, false); window.removeEventListener('resize', this._resizeHandler, false);
this._world._container.removeEventListener('mouseup', this._mouseUpHandler, false); this._envents.forEach((event)=>{
this._world._container.removeEventListener(event[0], event[1], false);
})
this._world.off('move', this._onWorldMove); this._world.off('move', this._onWorldMove);
if (this._pickingScene.children) { if (this._pickingScene.children) {

7
src/core/engine/picking/picking_frag.glsl
View File

@ -1,7 +1,10 @@
#ifdef GL_ES
precision highp float; precision highp float;
#endif
varying vec4 worldId; varying vec4 worldId;
void main() { void main() {
if(worldId.x == 0. &&worldId.y == 0. && worldId.z==0.){
discard;
return;
}
gl_FragColor = worldId; gl_FragColor = worldId;
} }

28
src/core/layer.js
View File

@ -80,6 +80,7 @@ export default class Layer extends Base {
} }
remove(object) { remove(object) {
this._object3D.remove(object); this._object3D.remove(object);
} }
_getUniqueId() { _getUniqueId() {
return id++; return id++;
@ -239,10 +240,10 @@ export default class Layer extends Base {
const data = this.layerSource.get('data'); const data = this.layerSource.get('data');
const selectFeatureIds = []; const selectFeatureIds = [];
let featureStyleId = 0; let featureStyleId = 0;
/* eslint-disable */ /* eslint-disable */ // 如果是mutiPolygon 一个要素会对应多个geometry
turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => { turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => {
/* eslint-disable */ /* eslint-disable */
if (featureIndex === featureId) { if (featureIndex === (featureId)) {
selectFeatureIds.push(featureStyleId); selectFeatureIds.push(featureStyleId);
} }
featureStyleId++; featureStyleId++;
@ -250,6 +251,7 @@ export default class Layer extends Base {
return; return;
} }
}); });
if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; } if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; }
const style = Util.assign({}, this.StyleData[featureId]); const style = Util.assign({}, this.StyleData[featureId]);
style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255); style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
@ -337,6 +339,7 @@ export default class Layer extends Base {
this.StyleData = mappedData; this.StyleData = mappedData;
return mappedData; return mappedData;
} }
// 更新地图映射
_updateMaping() { _updateMaping() {
const self = this; const self = this;
const attrs = self.get('attrs'); const attrs = self.get('attrs');
@ -464,6 +467,7 @@ export default class Layer extends Base {
const id = featureStyleId[0]; const id = featureStyleId[0];
let dataIndex = 0; let dataIndex = 0;
// 计算第一个要素对应的颜色位置
if(indices){ if(indices){
// 面图层和 // 面图层和
for (let i = 0; i < id; i++) { for (let i = 0; i < id; i++) {
@ -479,7 +483,7 @@ export default class Layer extends Base {
vertindex = indices[index]; vertindex = indices[index];
const color = style.color; const color = style.color;
const colorAttr =this.layerMesh.geometry.attributes.a_color; const colorAttr =this.layerMesh.geometry.attributes.a_color;
colorAttr.dynamic =true; // colorAttr.dynamic =true;
vertindex.forEach(() => { vertindex.forEach(() => {
colorAttr.array[dataIndex*4+0]=color[0]; colorAttr.array[dataIndex*4+0]=color[0];
colorAttr.array[dataIndex*4+1]=color[1]; colorAttr.array[dataIndex*4+1]=color[1];
@ -501,11 +505,13 @@ export default class Layer extends Base {
* @param {*} filterData 数据过滤标识符 * @param {*} filterData 数据过滤标识符
*/ */
_updateFilter() { _updateFilter() {
console.log('updateFilter');
this._updateMaping(); this._updateMaping();
const filterData = this.StyleData; const filterData = this.StyleData;
this._activeIds = null; // 清空选中元素 this._activeIds = null; // 清空选中元素
let dataIndex = 0; let dataIndex = 0;
const colorAttr = this.layerMesh.geometry.attributes.a_color; const colorAttr = this.layerMesh.geometry.attributes.a_color;
const pickAttr = this.layerMesh.geometry.attributes.pickingId;
if(this.layerMesh.type =='Points'){ //点图层更新 if(this.layerMesh.type =='Points'){ //点图层更新
filterData.forEach((item,index)=>{ filterData.forEach((item,index)=>{
const color = [ ...this.StyleData[index].color ]; const color = [ ...this.StyleData[index].color ];
@ -514,29 +520,38 @@ export default class Layer extends Base {
color[1] = 0; color[1] = 0;
color[2] = 0; color[2] = 0;
color[3] = 0; color[3] = 0;
} pickAttr.array[index] = 0;
} else {
colorAttr.array[index*4+0]=color[0]; colorAttr.array[index*4+0]=color[0];
colorAttr.array[index*4+1]=color[1]; colorAttr.array[index*4+1]=color[1];
colorAttr.array[index*4+2]=color[2]; colorAttr.array[index*4+2]=color[2];
colorAttr.array[index*4+3]=color[3]; colorAttr.array[index*4+3]=color[3];
pickAttr.array[index] = index;
}
}) })
colorAttr.needsUpdate =true; colorAttr.needsUpdate =true;
pickAttr.needsUpdate =true;
return; return;
} }
const {indices} = this._buffer.bufferStruct; const {indices} = this._buffer.bufferStruct;
indices.forEach((vertIndexs, i) => { indices.forEach((vertIndexs, i) => {
const color = [ ...this.StyleData[i].color ]; const color = [ ...this.StyleData[i].color ];
let pickid = this.StyleData[i].id;
if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) { if (filterData[i].hasOwnProperty('filter') && filterData[i].filter === false) {
color[3] = 0; color[3] = 0;
pickid =0;
} }
vertIndexs.forEach(() => { vertIndexs.forEach(() => {
colorAttr.array[dataIndex*4+0]=color[0]; colorAttr.array[dataIndex*4+0]=color[0];
colorAttr.array[dataIndex*4+1]=color[1]; colorAttr.array[dataIndex*4+1]=color[1];
colorAttr.array[dataIndex*4+2]=color[2]; colorAttr.array[dataIndex*4+2]=color[2];
colorAttr.array[dataIndex*4+3]=color[3]; colorAttr.array[dataIndex*4+3]=color[3];
dataIndex++; pickAttr.array[dataIndex] = pickid;
dataIndex++;
}); });
colorAttr.needsUpdate =true; colorAttr.needsUpdate =true;
pickAttr.needsUpdate =true;
}); });
this._needUpdateFilter = false; this._needUpdateFilter = false;
this._needUpdateColor = false; this._needUpdateColor = false;
@ -562,14 +577,17 @@ export default class Layer extends Base {
if(indices){ if(indices){
vertindex = indices[index]; vertindex = indices[index];
} }
const pickAttr = this.layerMesh.geometry.attributes.pickingId;
vertindex.forEach(() => { vertindex.forEach(() => {
colorAttr.array[dataIndex*4+0]=color[0]; colorAttr.array[dataIndex*4+0]=color[0];
colorAttr.array[dataIndex*4+1]=color[1]; colorAttr.array[dataIndex*4+1]=color[1];
colorAttr.array[dataIndex*4+2]=color[2]; colorAttr.array[dataIndex*4+2]=color[2];
colorAttr.array[dataIndex*4+3]=color[3]; colorAttr.array[dataIndex*4+3]=color[3];
// pickAttr.array[dataIndex]= index;
dataIndex++; dataIndex++;
}); });
colorAttr.needsUpdate =true colorAttr.needsUpdate =true
// pickAttr.needsUpdate =true
}); });
} }
/** /**

2
src/geom/buffer/image.js
View File

@ -32,7 +32,7 @@ export default class ImageBuffer extends BufferBase {
this.texture = texture; this.texture = texture;
} }
_getTexture(name, image) { _getTexture(image) {
const texture = new THREE.Texture(image); const texture = new THREE.Texture(image);
texture.magFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter; texture.minFilter = THREE.LinearFilter;

15
src/geom/buffer/point.js
View File

@ -1,5 +1,6 @@
import BufferBase from './bufferBase'; import BufferBase from './bufferBase';
import { regularShape } from '../shape/index'; import { regularShape } from '../shape/index';
import Util from '../../util'
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
const shapeObj = { const shapeObj = {
circle: 30, circle: 30,
@ -15,7 +16,7 @@ export default class PointBuffer extends BufferBase {
switch (type) { switch (type) {
case 'image' : this._imageBuffer(); case 'image' : this._imageBuffer();
break; break;
case '2d': this._2dRegularBuffer(); case '2d': this._3dRegularBuffer();
break; break;
case '3d': this._3dRegularBuffer(); case '3d': this._3dRegularBuffer();
break; break;
@ -61,16 +62,22 @@ export default class PointBuffer extends BufferBase {
_3dRegularBuffer() { _3dRegularBuffer() {
const coordinates = this.get('coordinates'); const coordinates = this.get('coordinates');
const properties = this.get('properties'); const properties = this.get('properties');
const type = this.get('type');
const positions = []; const positions = [];
const positionsIndex = []; const positionsIndex = [];
let indexCount = 0; let indexCount = 0;
this.bufferStruct.style = properties; this.bufferStruct.style = properties;
coordinates.forEach((geo, index) => { coordinates.forEach((geo, index) => {
const m1 = new THREE.Matrix4(); const m1 = new THREE.Matrix4();
const { size, shape } = properties[index]; let { size, shape } = properties[index];
const vert = regularShape[shape]('extrude'); let shapeType ='extrude'
if( type==='2d' ||(type==='3d'&& size[2]===0) ){
shapeType ='fill';
Util.isArray (size) || (size=[size,size,0]);
geo[2] +=Math.random()*100;
}
const vert = regularShape[shape](shapeType);
m1.setPosition(new THREE.Vector3(...geo)); m1.setPosition(new THREE.Vector3(...geo));
size[2] += Math.random() * 1000;
m1.scale(new THREE.Vector3(...size)); m1.scale(new THREE.Vector3(...size));
vert.positions = vert.positions.map(coor => { vert.positions = vert.positions.map(coor => {
const vector = new THREE.Vector4(...coor, 1); const vector = new THREE.Vector4(...coor, 1);

1
src/geom/buffer/polygon.js
View File

@ -24,6 +24,7 @@ export default class PolygonBuffer extends BufferBase {
}); });
} }
positions.push(extrudeData.positions); positions.push(extrudeData.positions);
if (shape !== 'line')
faceUv.push(...extrudeData.faceUv); faceUv.push(...extrudeData.faceUv);
indexCount += extrudeData.positionsIndex.length; indexCount += extrudeData.positionsIndex.length;
positionsIndex.push(extrudeData.positionsIndex); positionsIndex.push(extrudeData.positionsIndex);

2
src/geom/material/pointMaterial.js
View File

@ -27,6 +27,8 @@ export default class PointMaterial extends Material {
this.vertexShader = point_vert; this.vertexShader = point_vert;
this.fragmentShader =point_frag; this.fragmentShader =point_frag;
this.transparent = true; this.transparent = true;
if(!_uniforms.shape)
this.blending= THREE.AdditiveBlending
if(_uniforms.u_texture){ if(_uniforms.u_texture){
this.defines.TEXCOORD_0 = true; this.defines.TEXCOORD_0 = true;
} }

3
src/geom/material/polygonMaterial.js
View File

@ -14,8 +14,5 @@ export default function PolygonMaterial(options) {
TEXCOORD_0: !!options.u_texture TEXCOORD_0: !!options.u_texture
} }
}); });
material.roughness = 1;
material.metalness = 0.1;
material.envMapIntensity = 3;
return material; return material;
} }

7
src/geom/shader/image_frag.glsl
View File

@ -1,9 +1,8 @@
precision mediump float; precision mediump float;
uniform sampler2D u_texture; uniform sampler2D u_texture;
uniform float u_opacity;
varying vec2 v_texCoord; varying vec2 v_texCoord;
void main() { void main() {
vec4 color = texture2D(u_texture,vec2(v_texCoord.x,1.0-v_texCoord.y));
gl_FragColor = texture2D(u_texture,vec2(v_texCoord.x,1.0-v_texCoord.y)); gl_FragColor = color * u_opacity;
// gl_FragColor = vec4(1.0);
} }

4
src/geom/shader/point_vert.glsl
View File

@ -14,10 +14,8 @@ varying float v_shape;
void main() { void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color; v_color = a_color;
float zoom = pow(2.0,(18.0 - u_zoom)); float zoom = pow(2.0,(18.0 - u_zoom));
// // gl_Position = matModelViewProjection * vec4(a_position.x + a_textindex * (a_size + 30.0) * zoom,a_position.y, 0.0, 1.0);
gl_Position = matModelViewProjection * vec4(position, 1.0); gl_Position = matModelViewProjection * vec4(position, 1.0);
gl_PointSize = a_size; gl_PointSize = a_size;
v_rs = vec2(a_size / 2.0, a_size / 2.0- u_strokeWidth); v_rs = vec2(a_size / 2.0, a_size / 2.0- u_strokeWidth);

4
src/geom/shader/polygon_frag.glsl
View File

@ -5,6 +5,10 @@ varying vec2 v_texCoord;
varying vec4 v_color; varying vec4 v_color;
varying float vlightWeight; varying float vlightWeight;
void main() { void main() {
if(v_color.w == 0.0) {
discard;
return;
}
#ifdef TEXCOORD_0 #ifdef TEXCOORD_0
if(v_texCoord.x == -1.0) { if(v_texCoord.x == -1.0) {
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity); gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);

10
src/geom/shader/polygon_vert.glsl
View File

@ -1,7 +1,7 @@
precision highp float; precision highp float;
#define ambientRatio 0.2 #define ambientRatio 0.5
#define diffuseRatio 0.5 #define diffuseRatio 0.3
#define specularRatio 0.3 #define specularRatio 0.2
attribute vec4 a_color; attribute vec4 a_color;
attribute vec4 a_idColor; attribute vec4 a_idColor;
attribute vec2 faceUv; attribute vec2 faceUv;
@ -13,8 +13,8 @@ void main() {
vec3 worldNormal = vec3(vec4(normal,1.0) * modelMatrix); vec3 worldNormal = vec3(vec4(normal,1.0) * modelMatrix);
// //cal light weight // //cal light weight
vec3 viewDir = normalize(cameraPosition - worldPos); vec3 viewDir = normalize(cameraPosition - worldPos);
vec3 lightDir = normalize(vec3(1, -1.5, 2)); vec3 lightDir = normalize(vec3(1, -10.5, 12));
// vec3 lightDir = normalize(vec3(0.05,-0.001,-1)); //vec3 lightDir = normalize(vec3(0.05,-0.001,-1));
vec3 halfDir = normalize(viewDir+lightDir); vec3 halfDir = normalize(viewDir+lightDir);
// //lambert // //lambert
float lambert = dot(worldNormal, lightDir); float lambert = dot(worldNormal, lightDir);

4
src/geom/shape/point.js
View File

@ -29,6 +29,10 @@ export function diamond(type) {
return polygonShape[type]([ points ]); return polygonShape[type]([ points ]);
} }
export function square (type){
return diamond(type);
}
/** /**
* @param {enum} type 渲染类型 * @param {enum} type 渲染类型
* @param {boolean} extrude 是否进行高度拉伸 * @param {boolean} extrude 是否进行高度拉伸

3
src/layer/imageLayer.js
View File

@ -13,6 +13,7 @@ export default class imageLayer extends Layer {
render() { render() {
this.init(); this.init();
const source = this.layerSource; const source = this.layerSource;
const { opacity } = this.get('styleOptions');
// 加载 完成事件 // 加载 完成事件
source.on('imageLoaded', () => { source.on('imageLoaded', () => {
const buffer = new ImageBuffer({ const buffer = new ImageBuffer({
@ -22,7 +23,7 @@ export default class imageLayer extends Layer {
this.initGeometry(buffer.attributes); this.initGeometry(buffer.attributes);
const material = new ImageMaterial({ const material = new ImageMaterial({
u_texture: buffer.texture, u_texture: buffer.texture,
u_opacity: 1.0 u_opacity: opacity
}); });
const imageMesh = new THREE.Mesh(this.geometry, material); const imageMesh = new THREE.Mesh(this.geometry, material);
this.add(imageMesh); this.add(imageMesh);

160
src/layer/pointLayer.js
View File

@ -5,6 +5,7 @@ import PointMaterial from '../geom/material/pointMaterial';
import PolygonMaterial from '../geom/material/polygonMaterial'; import PolygonMaterial from '../geom/material/polygonMaterial';
import TextBuffer from '../geom/buffer/text'; import TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial'; import TextMaterial from '../geom/material/textMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
/** /**
* point shape 2d circle, traingle text,image * point shape 2d circle, traingle text,image
@ -19,37 +20,20 @@ export default class PointLayer extends Layer {
render() { render() {
this.type = 'point'; this.type = 'point';
this.init(); this.init();
if(this.shapeType === 'text'){ if(!this._hasRender){
this._textPoint();
return;
}
this._prepareRender(this.shapeType); this._prepareRender(this.shapeType);
return; this._hasRender = true;
switch (this.shapeType) { } else{
case 'model': this._initAttrs();
this._staticModelPoint(); (this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
break;
case 'image':
this._imagePoint();
break;
case '2d':
this._2dPoint();
break;
case 'text':
this._textPoint();
break;
case '3d':
this._shapePoint();
break;
default:
this._2dPoint();
break;
} }
return this; return this;
} }
_prepareRender(){ _prepareRender(){
if(this.shapeType === 'text'){ // 绘制文本图层
this._textPoint();
return;
}
const source = this.layerSource; const source = this.layerSource;
const { opacity, strokeWidth, stroke } = this.get('styleOptions'); const { opacity, strokeWidth, stroke } = this.get('styleOptions');
this._buffer = new PointBuffer({ this._buffer = new PointBuffer({
@ -60,11 +44,12 @@ export default class PointLayer extends Layer {
}); });
const geometry = this.geometry = new THREE.BufferGeometry(); const geometry = this.geometry = new THREE.BufferGeometry();
let mtl; let mtl;
if(this.shapeType=='3d'){ if(this.shapeType!=='image'){
mtl = new PolygonMaterial({ mtl = new PolygonMaterial({
u_opacity: opacity u_opacity: opacity
}); });
} else{ } else{
mtl = new PointMaterial({ mtl = new PointMaterial({
u_opacity: opacity, u_opacity: opacity,
u_strokeWidth: strokeWidth, u_strokeWidth: strokeWidth,
@ -80,105 +65,24 @@ export default class PointLayer extends Layer {
const { attributes } = this._buffer; const { attributes } = this._buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4)); geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
if(this.shapeType ==='image'){ if(this.shapeType ==='image'){
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2)); geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
}else if(this.shapeType=='2d'){ geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 1)); }else{
} else if(this.shapeType=='3d')
{
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
} }
let mesh; let mesh;
if(this.shapeType!=='3d'){ if(this.shapeType=='image'){
mesh = new THREE.Points(geometry, mtl); mesh = new THREE.Points(geometry, mtl);
}else{ }else{
const pickmaterial = new PickingMaterial();
mesh = new THREE.Mesh(geometry, mtl); mesh = new THREE.Mesh(geometry, mtl);
} }
this.add(mesh); this.add(mesh);
} }
_imagePoint() {
const { opacity, strokeWidth, stroke } = this.get('styleOptions');
const source = this.layerSource;
const geometry = new THREE.BufferGeometry();
const buffer = new PointBuffer({
imagePos: this.scene.image.imagePos,
type: this.shapeType,
coordinates: source.geoData,
properties: this.StyleData
});
const mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
u_stroke: stroke,
u_texture: this.scene.image.texture
});
const { attributes } = buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
const mesh = new THREE.Points(geometry, mtl);
console.log(mesh);
this.add(mesh);
return this;
}
// sdf 绘制多边形
_2dPoint() {
const source = this.layerSource;
const { opacity, strokeWidth, stroke } = this.get('styleOptions');
const buffer = new PointBuffer({
type: this.shapeType,
coordinates: source.geoData,
properties: this.StyleData
});
this._buffer = buffer;
const geometry = new THREE.BufferGeometry();
const mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
u_stroke: stroke,
shape: this.shapeType || false
});
const { attributes } = buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 1));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
const mesh = new THREE.Points(geometry, mtl);
this.add(mesh);
}
_shapePoint() {
const source = this.layerSource;
const geometry = new THREE.BufferGeometry();
const material = new PolygonMaterial({
u_opacity: 1.0
});
const buffer = new PointBuffer({
type: this.shapeType,
coordinates: source.geoData,
properties: this.StyleData
});
this.buffer = buffer;
const { attributes } = buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
const mesh = new THREE.Mesh(geometry, material);
this.remove(this.layerMesh);
this.add(mesh);
}
_textPoint() { _textPoint() {
const source = this.layerSource; const source = this.layerSource;
const styleOptions = this.get('styleOptions'); const styleOptions = this.get('styleOptions');
@ -215,36 +119,6 @@ export default class PointLayer extends Layer {
}); });
} }
_getPointScale() {
const zoom = this.scene.map.getZoom();
const size = this.get('styleOptions').size * Math.pow(2, 18 - zoom);
const out = new THREE.Matrix4();
out.scale([ size, size, size ]);
return out;
}
_customPoint() {
}
// todo add pickUP
_staticModelPoint() {
const source = this.layerSource;
this.resourceLoader.once('batchLoaded', e => {
const gltfs = e.data;
source.geoData.forEach((pt, index) => {
const { size, shape } = this.StyleData[index];
const model = gltfs[shape].asset.rootScene.nodes[0];
const gltfNode = model.clone();
gltfNode.position = [ pt[0], pt[1], pt[2] ];
gltfNode.rotateByAngles(90, 0, 0);
gltfNode.scale = [ size, size, size ];
this.layerNode.addChild(gltfNode);
this._animations(gltfNode, gltfs[shape]);
});
});
}
} }

5
src/layer/polygonLayer.js
View File

@ -3,6 +3,7 @@ import Layer from '../core/layer';
import PolygonBuffer from '../geom/buffer/polygon'; import PolygonBuffer from '../geom/buffer/polygon';
import PolygonMaterial from '../geom/material/polygonMaterial'; import PolygonMaterial from '../geom/material/polygonMaterial';
import { LineMaterial } from '../geom/material/lineMaterial'; import { LineMaterial } from '../geom/material/lineMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
export default class PolygonLayer extends Layer { export default class PolygonLayer extends Layer {
shape(type) { shape(type) {
this.shape = type; this.shape = type;
@ -13,10 +14,9 @@ export default class PolygonLayer extends Layer {
this._hasRender = true; this._hasRender = true;
this._prepareRender(); this._prepareRender();
} else{ } else{
console.time('update');
this._initAttrs(); this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null; (this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
console.timeEnd('update');
} }
@ -59,6 +59,7 @@ export default class PolygonLayer extends Layer {
}); });
const { attributes } = this._buffer; const { attributes } = this._buffer;
this.geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); this.geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
const pickmaterial = new PickingMaterial();
const polygonMesh = new THREE.Mesh(this.geometry, material); const polygonMesh = new THREE.Mesh(this.geometry, material);
this.add(polygonMesh); this.add(polygonMesh);

2
src/source/csvSource.js
View File

@ -20,7 +20,7 @@ export default class CSVSource extends Source {
if (x1 && y1) { if (x1 && y1) {
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]]; coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
} }
col._id = featureIndex; col._id = featureIndex+1;
this._coordProject(coordinates); this._coordProject(coordinates);
this.geoData.push(this._coordProject(coordinates)); this.geoData.push(this._coordProject(coordinates));
}); });

2
src/source/geojsonSource.js
View File

@ -12,7 +12,7 @@ export default class GeojsonSource extends Source {
turfMeta.flattenEach(data, (currentFeature, featureIndex) => { turfMeta.flattenEach(data, (currentFeature, featureIndex) => {
const coord = getCoords(cleanCoords(currentFeature)); const coord = getCoords(cleanCoords(currentFeature));
this.geoData.push(this._coordProject(coord)); this.geoData.push(this._coordProject(coord));
currentFeature.properties._id = featureIndex; currentFeature.properties._id = featureIndex+1;
this.propertiesData.push(currentFeature.properties); this.propertiesData.push(currentFeature.properties);
}); });
} }