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 name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
@ -14,18 +15,50 @@
<body>
<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="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></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({
id: 'map',
mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 14.6
zoom: 11.6
});
window.scene = scene;
scene.on('loaded', () => {
@ -35,22 +68,35 @@ scene.on('loaded', () => {
})
.source(data)
.shape('2d:circle')
.size('value', [ 8, 500 ]) // default 1
.active(true)
.filter('value', field_8 => {
.size('value', [ 1000, 5000]) // default 1
.active({fill:'blue'})
.filter('value', field_8 => {
return field_8 * 1 > 500;
})
.color('type', [ '#ffffd4', '#fed98e', '#fe9929', '#d95f0e', '#993404' ].reverse())
})
.color('type', colorObj.blue.reverse())
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,
opacity: 0.9
})
.render();
//circleLayer.size('value', [ 8, 1000 ]).render();
$('.info-panel input').change(function(){
$(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>

4
demos/01_point_distribute.html
View File

@ -19,8 +19,6 @@
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></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({
id: 'map',
mapStyle: 'dark', // 样式URL
@ -40,7 +38,7 @@ scene.on('loaded', () => {
x: 'lng'
})
.size(2.0)
.color('#0198BD')
.color('#0D408C')
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 0,

15
demos/01_point_image.html
View File

@ -40,32 +40,37 @@ scene.on('loaded', () => {
.color('#0198BD')
.size(40.0)
.shape('image:bike')
.render();
//.render();
});
$.get('./data/fence.json', data => {
scene.PolygonLayer({
zIndex: 0
})
.source(data)
.shape('fill')
.source(data)
.shape('line')
.color('#0198BD')
.style({
opacity:0.6
opacity:0.5
})
.render();
});
$.getJSON('./data/pointZone.json', data => {
scene.PolygonLayer({
const fenceLayer = scene.PolygonLayer({
zIndex: 1
})
.source(data)
.shape('fill')
.active({fill:'blue'})
.color("#F04850")
.style({
opacity:1.0
})
.render();
fenceLayer.on('click',(e)=>{
console.log(e.feature.properties._id);
})
});
});
</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"],
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"],
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({

21
demos/04_image.html
View File

@ -24,32 +24,21 @@ const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 110.770672, 34.159869 ],
pitch: 45,
pitch: 0,
zoom: 5,
minZoom: 4,
maxZoom: 10
maxZoom: 6
});
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
const imageLayer = scene.ImageLayer().
source({
url: 'https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png',
extent: [ 73, 18, 136, 54 ]
})
.style({
opacity:0.8,
})
.render();

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

@ -9,6 +9,7 @@ class Picking {
this._camera = camera;
this._raycaster = new THREE.Raycaster();
this.scene = scene;
this._envents=[];
// TODO: Match this with the line width used in the picking layers
this._raycaster.linePrecision = 3;
@ -37,14 +38,15 @@ class Picking {
this._mouseUpHandler = this._onMouseUp.bind(this);
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);
}
_onMouseUp(event) {
// Only react to main button click
if (event.button !== 0) {
return;
}
// if (event.button !== 0) {
// return;
// }
const point = { x: event.clientX, y: event.clientY };
const normalisedPoint = { x: 0, y: 0 };
@ -72,6 +74,7 @@ class Picking {
this._needUpdate = true;
}
_update(point) {
const texture = this._pickingTexture;
if (this._needUpdate) {
@ -82,6 +85,20 @@ class Picking {
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() {
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
const item = {
featureId: id,
featureId: id-1,
point2d: _point2d,
point3d: _point3d,
intersects
@ -147,8 +164,10 @@ class Picking {
// TODO: Find a way to properly remove these listeners as they stay
// active at the moment
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);
if (this._pickingScene.children) {

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

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

28
src/core/layer.js
View File

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

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

@ -1,5 +1,6 @@
import BufferBase from './bufferBase';
import { regularShape } from '../shape/index';
import Util from '../../util'
import * as THREE from '../../core/three';
const shapeObj = {
circle: 30,
@ -15,7 +16,7 @@ export default class PointBuffer extends BufferBase {
switch (type) {
case 'image' : this._imageBuffer();
break;
case '2d': this._2dRegularBuffer();
case '2d': this._3dRegularBuffer();
break;
case '3d': this._3dRegularBuffer();
break;
@ -61,16 +62,22 @@ export default class PointBuffer extends BufferBase {
_3dRegularBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const type = this.get('type');
const positions = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
coordinates.forEach((geo, index) => {
const m1 = new THREE.Matrix4();
const { size, shape } = properties[index];
const vert = regularShape[shape]('extrude');
let { size, shape } = properties[index];
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));
size[2] += Math.random() * 1000;
m1.scale(new THREE.Vector3(...size));
vert.positions = vert.positions.map(coor => {
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);
if (shape !== 'line')
faceUv.push(...extrudeData.faceUv);
indexCount += extrudeData.positionsIndex.length;
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.fragmentShader =point_frag;
this.transparent = true;
if(!_uniforms.shape)
this.blending= THREE.AdditiveBlending
if(_uniforms.u_texture){
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
}
});
material.roughness = 1;
material.metalness = 0.1;
material.envMapIntensity = 3;
return material;
}

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

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

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

@ -14,10 +14,8 @@ varying float v_shape;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
v_color = a_color;
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_PointSize = a_size;
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 float vlightWeight;
void main() {
if(v_color.w == 0.0) {
discard;
return;
}
#ifdef TEXCOORD_0
if(v_texCoord.x == -1.0) {
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;
#define ambientRatio 0.2
#define diffuseRatio 0.5
#define specularRatio 0.3
#define ambientRatio 0.5
#define diffuseRatio 0.3
#define specularRatio 0.2
attribute vec4 a_color;
attribute vec4 a_idColor;
attribute vec2 faceUv;
@ -13,8 +13,8 @@ void main() {
vec3 worldNormal = vec3(vec4(normal,1.0) * modelMatrix);
// //cal light weight
vec3 viewDir = normalize(cameraPosition - worldPos);
vec3 lightDir = normalize(vec3(1, -1.5, 2));
// vec3 lightDir = normalize(vec3(0.05,-0.001,-1));
vec3 lightDir = normalize(vec3(1, -10.5, 12));
//vec3 lightDir = normalize(vec3(0.05,-0.001,-1));
vec3 halfDir = normalize(viewDir+lightDir);
// //lambert
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 ]);
}
export function square (type){
return diamond(type);
}
/**
* @param {enum} type 渲染类型
* @param {boolean} extrude 是否进行高度拉伸

3
src/layer/imageLayer.js
View File

@ -13,6 +13,7 @@ export default class imageLayer extends Layer {
render() {
this.init();
const source = this.layerSource;
const { opacity } = this.get('styleOptions');
// 加载 完成事件
source.on('imageLoaded', () => {
const buffer = new ImageBuffer({
@ -22,7 +23,7 @@ export default class imageLayer extends Layer {
this.initGeometry(buffer.attributes);
const material = new ImageMaterial({
u_texture: buffer.texture,
u_opacity: 1.0
u_opacity: opacity
});
const imageMesh = new THREE.Mesh(this.geometry, material);
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 TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
/**
* point shape 2d circle, traingle text,image
@ -19,37 +20,20 @@ export default class PointLayer extends Layer {
render() {
this.type = 'point';
this.init();
if(this.shapeType === 'text'){
this._textPoint();
return;
}
if(!this._hasRender){
this._prepareRender(this.shapeType);
return;
switch (this.shapeType) {
case 'model':
this._staticModelPoint();
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;
this._hasRender = true;
} else{
this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
}
return this;
}
_prepareRender(){
if(this.shapeType === 'text'){ // 绘制文本图层
this._textPoint();
return;
}
const source = this.layerSource;
const { opacity, strokeWidth, stroke } = this.get('styleOptions');
this._buffer = new PointBuffer({
@ -60,11 +44,12 @@ export default class PointLayer extends Layer {
});
const geometry = this.geometry = new THREE.BufferGeometry();
let mtl;
if(this.shapeType=='3d'){
if(this.shapeType!=='image'){
mtl = new PolygonMaterial({
u_opacity: opacity
});
} else{
mtl = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
@ -80,105 +65,24 @@ export default class PointLayer extends Layer {
const { attributes } = this._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('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
if(this.shapeType ==='image'){
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
}else if(this.shapeType=='2d'){
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 1));
} else if(this.shapeType=='3d')
{
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
}else{
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
}
let mesh;
if(this.shapeType!=='3d'){
if(this.shapeType=='image'){
mesh = new THREE.Points(geometry, mtl);
}else{
const pickmaterial = new PickingMaterial();
mesh = new THREE.Mesh(geometry, mtl);
}
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() {
const source = this.layerSource;
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 PolygonMaterial from '../geom/material/polygonMaterial';
import { LineMaterial } from '../geom/material/lineMaterial';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
export default class PolygonLayer extends Layer {
shape(type) {
this.shape = type;
@ -13,10 +14,9 @@ export default class PolygonLayer extends Layer {
this._hasRender = true;
this._prepareRender();
} else{
console.time('update');
this._initAttrs();
(this._needUpdateFilter || this._needUpdateColor) ? this._updateFilter():null;
console.timeEnd('update');
}
@ -59,6 +59,7 @@ export default class PolygonLayer extends Layer {
});
const { attributes } = this._buffer;
this.geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
const pickmaterial = new PickingMaterial();
const polygonMesh = new THREE.Mesh(this.geometry, material);
this.add(polygonMesh);

2
src/source/csvSource.js
View File

@ -20,7 +20,7 @@ export default class CSVSource extends Source {
if (x1 && y1) {
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
col._id = featureIndex;
col._id = featureIndex+1;
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) => {
const coord = getCoords(cleanCoords(currentFeature));
this.geoData.push(this._coordProject(coord));
currentFeature.properties._id = featureIndex;
currentFeature.properties._id = featureIndex+1;
this.propertiesData.push(currentFeature.properties);
});
}