mirror of https://gitee.com/antv-l7/antv-l7
feat(l7):layer
This commit is contained in:
parent
5dc568fb19
commit
b8594f1119
|
@ -74,7 +74,7 @@ scene.on('loaded', () => {
|
|||
}
|
||||
})
|
||||
.shape('2d:circle')
|
||||
.size('value', [ 3, 60]) // default 1
|
||||
.size('value', [ 0, 60]) // default 1
|
||||
//.size('value', [ 10, 300]) // default 1
|
||||
.active(true)
|
||||
.filter('value', field_8 => {
|
||||
|
|
|
@ -28,7 +28,8 @@ const scene = new L7.Scene({
|
|||
});
|
||||
window.scene = scene;
|
||||
scene.on('loaded', () => {
|
||||
$.get('./data/mUQPWCYaxOfiSznuANvG.txt', data => {
|
||||
// ./data/mUQPWCYaxOfiSznuANvG.txt
|
||||
$.get('./data/00.csv', data => {
|
||||
scene.PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
|
|
|
@ -6,21 +6,33 @@
|
|||
<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_distribute</title>
|
||||
<style>
|
||||
body {
|
||||
margin:0px;
|
||||
}
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div class ='info'>
|
||||
<div class="input-card" style='width: 12rem;'>
|
||||
<div class="input-item">
|
||||
<input type="radio" name='func' checked=true value=0><span class="input-text">全部</span>
|
||||
<input type="radio" name='func' value=0><span class="input-text">可用车</span>
|
||||
<input type="radio" name='func' value=1><span class="input-text">不可用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src="https://unpkg.com/supercluster@4.1.1/dist/supercluster.min.js"></script>
|
||||
<script src="./assets/jquery-3.2.1.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: 'light', // 样式URL
|
||||
|
@ -30,32 +42,50 @@ const scene = new L7.Scene({
|
|||
minZoom: 9
|
||||
});
|
||||
window.scene = scene;
|
||||
scene.image.addImage('bike', './image/Bike.png');
|
||||
scene.image.addImage('marker', './image/marker.png');
|
||||
scene.on('loaded', () => {
|
||||
|
||||
$.get('./data/pointbike.json', data => {
|
||||
var extent = [ 110,29.2378,122.189,33.3173]
|
||||
var dataindex = supercluster({radius:80});
|
||||
dataindex.load(data.features);
|
||||
|
||||
var clusterData = dataindex.getClusters(extent,13);
|
||||
console.log(clusterData);
|
||||
scene.PointLayer({
|
||||
zIndex: 4
|
||||
zIndex: 4,
|
||||
maxZoom:15.5
|
||||
})
|
||||
.source({
|
||||
"type": "FeatureCollection",
|
||||
"features":clusterData
|
||||
})
|
||||
.color('#6492E9')
|
||||
.active(true)
|
||||
.size('point_count',[1,30])
|
||||
.shape('2d:circle')
|
||||
.style({
|
||||
opacity:0.8
|
||||
})
|
||||
.render();
|
||||
|
||||
// 自行车数据
|
||||
scene.PointLayer({
|
||||
zIndex: 4,
|
||||
minZoom:15.5,
|
||||
|
||||
})
|
||||
.source(data)
|
||||
.color('power',(v)=>{
|
||||
return v > 5 ? '#4F93EA' :'#F5684A'
|
||||
})
|
||||
.active({fill:'#91C25B'})
|
||||
.size(8)
|
||||
.shape('2d:circle')
|
||||
.style({
|
||||
opacity:1.0
|
||||
})
|
||||
.render();
|
||||
|
||||
});
|
||||
|
||||
$.get('./data/fence.json', data => {
|
||||
scene.LineLayer({
|
||||
zIndex: 5
|
||||
|
@ -89,11 +119,10 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.source(data)
|
||||
.size([1.5,0])
|
||||
.shape('meshLine')
|
||||
.shape('line')
|
||||
.color("#2F54EB")
|
||||
.style({
|
||||
.style({
|
||||
opacity:1.0,
|
||||
'lineType':'solid'
|
||||
})
|
||||
.render();
|
||||
|
||||
|
|
|
@ -21,10 +21,6 @@
|
|||
<script src="./assets/dat.gui.min.js"></script>
|
||||
<script src="../build/L7.js"></script>
|
||||
<script>
|
||||
const gui = new dat.GUI({ autoPlace: false });
|
||||
const customContainer = document.getElementById('gui');
|
||||
customContainer.appendChild(gui.domElement);
|
||||
const province = { 全国: '00', 新疆维吾尔自治区: '65', 西藏自治区: '54', 内蒙古自治区: '15', 青海省: '63', 四川省: '51', 黑龙江省: '23', 甘肃省: '62', 云南省: '53', 广西壮族自治区: '45', 湖南省: '43', 陕西省: '61', 广东省: '44', 吉林省: '22', 河北省: '13', 湖北省: '42', 贵州省: '52', 山东省: '37', 江西省: '36', 河南省: '41', 辽宁省: '21', 山西省: '14', 安徽省: '34', 福建省: '35', 浙江省: '33', 江苏省: '32', 重庆市: '50', 宁夏回族自治区: '64', 海南省: '46', 台湾省: '71', 北京市: '11', 天津市: '12', 上海市: '31', 香港特别行政区: '81', 澳门特别行政区: '82' };
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark', // 样式URL
|
||||
|
@ -44,9 +40,6 @@ scene.on('loaded', () => {
|
|||
.size('max',(value)=>{
|
||||
return value * 1000;
|
||||
})
|
||||
.filter('max',(v)=>{
|
||||
return v*1 > 6000 ? true : false;
|
||||
})
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
|
|
|
@ -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>city</title>
|
||||
<style>
|
||||
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||
|
@ -13,10 +14,11 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="map">
|
||||
<div id ="info" class ="tooltip" style="display:none">
|
||||
</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>
|
||||
|
||||
|
@ -53,21 +55,26 @@ scene.on('loaded', () => {
|
|||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.shape('meshLine')
|
||||
.shape('line')
|
||||
.size([3,0])
|
||||
.color('rgb(79,174,234)')
|
||||
.render();
|
||||
});
|
||||
|
||||
$.get('./data/build.geojson', data => {
|
||||
scene.PolygonLayer({
|
||||
citylayer = scene.PolygonLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.active({fill:'red'})
|
||||
.size('floor',[10,2000])
|
||||
.color('rgba(242,246,250,0.96)')
|
||||
.render();
|
||||
citylayer.on('click',(e)=>{
|
||||
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
|
||||
$("#info").html(`<p>楼高<span">${e.feature.properties.floor || 0}</span></p>`);
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
||||
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></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>
|
||||
|
@ -30,6 +31,27 @@ const scene = new L7.Scene({
|
|||
});
|
||||
scene.on('loaded', () => {
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => {
|
||||
const rows = data.split('\n');
|
||||
var features =[];
|
||||
for(var i =1;i<rows.length-1;i++){
|
||||
var row = rows[i].split(',');
|
||||
var start = turf.point([row[4], row[5]]);
|
||||
var end = turf.point([row[6], row[7]]);
|
||||
var greatCircle = turf.greatCircle(start, end, {'npoints': 50});
|
||||
features.push(greatCircle);
|
||||
}
|
||||
var fc = turf.featureCollection(features);
|
||||
scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(fc)
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
opacity:0.6,
|
||||
})
|
||||
//.animate({enable:true})
|
||||
.render();
|
||||
/**
|
||||
scene.LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
|
@ -48,6 +70,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
//.animate({enable:true})
|
||||
.render();
|
||||
**/
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -49,3 +49,111 @@
|
|||
margin: 0;
|
||||
|
||||
}
|
||||
.input-item {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.input-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0
|
||||
}
|
||||
|
||||
.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0
|
||||
}
|
||||
|
||||
.input-item-prepend {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-item-text, input[type=text],input[type=date], select {
|
||||
height: calc(2.2rem + 2px);
|
||||
}
|
||||
|
||||
.input-item-text {
|
||||
width: 6rem;
|
||||
text-align: justify;
|
||||
padding: 0.4rem 0.7rem;
|
||||
display: inline-block;
|
||||
text-justify: distribute-all-lines;
|
||||
/*ie6-8*/
|
||||
text-align-last: justify;
|
||||
/* ie9*/
|
||||
-moz-text-align-last: justify;
|
||||
/*ff*/
|
||||
-webkit-text-align-last: justify;
|
||||
/*chrome 20+*/
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.input-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
width: 10rem;
|
||||
border-width: 0;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: 0.1rem 0.6rem;
|
||||
}
|
||||
.info hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-top-color: grey;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
background-color: white;
|
||||
width: auto;
|
||||
border-width: 0;
|
||||
right: 1rem;
|
||||
z-index: 10;
|
||||
}
|
10
package.json
10
package.json
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@ali/l7",
|
||||
"version": "0.1.1",
|
||||
"description": "the Grammar of Graphics in Javascript",
|
||||
"name": "@antv/l7",
|
||||
"version": "1.0.0",
|
||||
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "build/l7.js",
|
||||
"browser": "build/l7.js",
|
||||
"module": "lib/index.js",
|
||||
|
@ -15,7 +15,8 @@
|
|||
},
|
||||
"keywords": [
|
||||
"l7",
|
||||
"chart"
|
||||
"gis",
|
||||
"geometry"
|
||||
],
|
||||
"author": "https://github.com/orgs/antvis/people",
|
||||
"license": "MIT",
|
||||
|
@ -107,6 +108,7 @@
|
|||
"fecha": "^2.3.3",
|
||||
"gl-matrix": "^2.4.1",
|
||||
"lodash": "^4.17.5",
|
||||
"polyline-normals": "^2.0.2",
|
||||
"rbush": "^2.0.2",
|
||||
"three": "^0.96.0",
|
||||
"venn.js": "^0.2.20",
|
||||
|
|
|
@ -9,7 +9,7 @@ export default function PickingMaterial(options) {
|
|||
},
|
||||
vertexShader: picking_vert,
|
||||
fragmentShader: picking_frag,
|
||||
transparent: true
|
||||
transparent: false
|
||||
});
|
||||
return material;
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ void main() {
|
|||
float scale = pow(2.0,(20.0 - u_zoom));
|
||||
vec3 newposition = position;
|
||||
#ifdef point
|
||||
newposition =position + a_size * scale* a_shape;
|
||||
newposition =position + a_size * scale * a_shape;
|
||||
#endif
|
||||
#ifdef polyline
|
||||
newposition = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
|
||||
|
|
|
@ -1,23 +0,0 @@
|
|||
|
||||
import Material from '../../../geom/material/material';
|
||||
import draw_vert from './draw_vert.glsl';
|
||||
import draw_frag from './draw_frag.glsl';
|
||||
export default function DrawMaterial(options) {
|
||||
const material = new Material({
|
||||
uniforms: {
|
||||
u_color_ramp: { value: options.u_color_ramp },
|
||||
u_wind_max: { value: options.u_wind_max },
|
||||
u_particles_res: { value: options.u_particles_res },
|
||||
u_wind_min: { value: options.u_wind_min },
|
||||
u_opacity: { value: options.u_opacity },
|
||||
u_wind: { value: options.u_wind },
|
||||
u_particles: { value: options.u_particles },
|
||||
u_bbox: { value: options.u_bbox }
|
||||
},
|
||||
vertexShader: draw_vert,
|
||||
fragmentShader: draw_frag,
|
||||
transparent: true
|
||||
});
|
||||
// material.blending = THREE.AdditiveBlending
|
||||
return material;
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
precision mediump float;
|
||||
uniform sampler2D u_wind;
|
||||
uniform vec2 u_wind_min;
|
||||
uniform vec2 u_wind_max;
|
||||
uniform sampler2D u_color_ramp;
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_particle_pos;
|
||||
|
||||
void main() {
|
||||
vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);
|
||||
float speed_t = length(velocity) / length(u_wind_max);
|
||||
|
||||
// color ramp is encoded in a 16x16 texture
|
||||
vec2 ramp_pos = vec2(
|
||||
fract(16.0 * speed_t),
|
||||
floor(16.0 * speed_t) / 16.0);
|
||||
|
||||
gl_FragColor = texture2D(u_color_ramp, ramp_pos);
|
||||
}
|
|
@ -1,34 +0,0 @@
|
|||
import { DataType, DrawMode } from '@ali/r3-base';
|
||||
import { BufferGeometry } from '@ali/r3-geometry';
|
||||
|
||||
/**
|
||||
* 创建点图层几何体
|
||||
*/
|
||||
export default class DrawGeometry extends BufferGeometry {
|
||||
|
||||
constructor(opts) {
|
||||
super(opts.name);
|
||||
this._index = opts.index;
|
||||
this.mode = DrawMode.POINTS;
|
||||
|
||||
this.primitive.indexType = DataType.UNSIGNED_INT;
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造多边形数据
|
||||
* @private
|
||||
*/
|
||||
initialize() {
|
||||
super.initialize([
|
||||
{ semantic: 'INDEX', size: 1, type: DataType.FLOAT, normalized: false }
|
||||
], this._index.length);
|
||||
|
||||
this._index.forEach((vert, j) => {
|
||||
this.setVertexValues(j, {
|
||||
INDEX: [ vert ]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
precision mediump float;
|
||||
|
||||
attribute float a_index;
|
||||
uniform sampler2D u_particles;
|
||||
uniform vec4 u_bbox;
|
||||
uniform float u_particles_res;
|
||||
|
||||
varying vec2 v_particle_pos;
|
||||
void main() {
|
||||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
|
||||
vec4 color = texture2D(u_particles, vec2(
|
||||
fract(a_index / u_particles_res),
|
||||
1.0 - floor(a_index / u_particles_res) / u_particles_res));
|
||||
|
||||
// decode current particle position from the pixel's RGBA value
|
||||
v_particle_pos = vec2(
|
||||
color.r / 255.0 + color.b,
|
||||
1.0 - (color.g / 255.0 + color.a));
|
||||
vec2 xyrange = u_bbox.zw - u_bbox.xy;
|
||||
float x = u_bbox.x + v_particle_pos.x * xyrange.x;
|
||||
float y = u_bbox.w - v_particle_pos.y * xyrange.y;
|
||||
gl_PointSize = 1.0;
|
||||
//gl_Position = matModelViewProjection * vec4(v_particle_pos, 0.0, 1.0);
|
||||
gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);
|
||||
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
import { RenderPass } from '@ali/r3-renderer-basic';
|
||||
import { TextureFilter } from '@ali/r3-base';
|
||||
export class GeoRenderPass extends RenderPass {
|
||||
|
||||
constructor(name, priority, renderTarget, mask, Material, id, done) {
|
||||
renderTarget.texture.setFilter(TextureFilter.NEAREST, TextureFilter.NEAREST);
|
||||
super(name, priority, renderTarget, Material, mask);
|
||||
typeof (id) === 'string' || typeof (id) === 'number' && (id = [ id ]);
|
||||
this.id = id;
|
||||
this.renderPassFlags = [];
|
||||
this.done = done;
|
||||
}
|
||||
/* eslint-disable */
|
||||
preRender(camera, opaquaQueue, transparentQueue) {
|
||||
/* eslint-disable */
|
||||
|
||||
opaquaQueue.items.forEach(item => {
|
||||
const nodeAbility = item.nodeAbility;
|
||||
this.renderPassFlags.push(nodeAbility.renderPassFlag);
|
||||
this.id.indexOf(nodeAbility.id) > -1 ? nodeAbility.renderPassFlag = 0 : nodeAbility.renderPassFlag = 1;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
postRender(camera, opaquaQueue, transparentQueue) {
|
||||
opaquaQueue.items.forEach((item, index) => {
|
||||
const nodeAbility = item.nodeAbility;
|
||||
nodeAbility.renderPassFlag = this.renderPassFlags[index];
|
||||
});
|
||||
this.renderPassFlags.length = 0;
|
||||
if(this.done) {
|
||||
this.done();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export { ColorRenderPass };
|
|
@ -1,7 +0,0 @@
|
|||
precision highp float;
|
||||
varying vec2 v_texCoord;
|
||||
void main() {
|
||||
v_texCoord = uv;
|
||||
|
||||
gl_Position = vec4(1.0 - 2.0 * vec2(position), 0., 1.0);
|
||||
}
|
|
@ -1,12 +0,0 @@
|
|||
precision mediump float;
|
||||
uniform sampler2D u_texture;
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
void main() {
|
||||
if(u_opacity == 0.0)
|
||||
discard;
|
||||
gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity;
|
||||
// gl_FragColor.w =u_opacity;
|
||||
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
import Material from '../../../geom/material/material';
|
||||
import quad_vert from './quad.vert.glsl';
|
||||
import update_frag from './update_frag.glsl';
|
||||
export default function UpdateMaterial(options) {
|
||||
const material = new Material({
|
||||
uniforms: {
|
||||
u_wind_max: { value: options.u_wind_max },
|
||||
u_particles_res: { value: options.u_particles_res },
|
||||
u_wind_min: { value: options.u_wind_min },
|
||||
u_opacity: { value: options.u_opacity },
|
||||
u_wind: { value: options.u_wind },
|
||||
u_particles: { value: options.u_particles },
|
||||
u_drop_rate_bump: { value: options.u_drop_rate_bump },
|
||||
u_drop_rate: { value: options.u_drop_rate },
|
||||
u_speed_factor: { value: options.u_speed_factor },
|
||||
u_rand_seed: { value: options.u_rand_seed },
|
||||
u_extent: { value: options.u_extent },
|
||||
u_wind_res: { value: options.u_wind_res }
|
||||
},
|
||||
vertexShader: quad_vert,
|
||||
fragmentShader: update_frag,
|
||||
transparent: true
|
||||
});
|
||||
// material.blending = THREE.AdditiveBlending
|
||||
return material;
|
||||
}
|
|
@ -1,76 +0,0 @@
|
|||
precision highp float;
|
||||
|
||||
uniform sampler2D u_particles;
|
||||
uniform sampler2D u_wind;
|
||||
uniform vec2 u_wind_res;
|
||||
uniform vec2 u_wind_min;
|
||||
uniform vec2 u_wind_max;
|
||||
uniform float u_rand_seed;
|
||||
uniform float u_speed_factor;
|
||||
uniform float u_drop_rate;
|
||||
uniform float u_drop_rate_bump;
|
||||
uniform vec4 u_extent;
|
||||
uniform float u_particles_res;
|
||||
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
// pseudo-random generator
|
||||
const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
|
||||
float rand(const vec2 co) {
|
||||
float t = dot(rand_constants.xy, co);
|
||||
return fract(sin(t) * (rand_constants.z + t));
|
||||
}
|
||||
|
||||
// wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation
|
||||
vec2 lookup_wind(const vec2 uv) {
|
||||
// return texture2D(u_wind, uv).rg; // lower-res hardware filtering
|
||||
vec2 px = 1.0 / u_wind_res;
|
||||
vec2 vc = (floor(uv * u_wind_res)) * px;
|
||||
vec2 f = fract(uv * u_wind_res);
|
||||
vec2 tl = texture2D(u_wind, vc).rg;
|
||||
vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;
|
||||
vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;
|
||||
vec2 br = texture2D(u_wind, vc + px).rg;
|
||||
return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 color = texture2D(u_particles, v_texCoord);
|
||||
vec2 pos = vec2(
|
||||
color.r / 255.0 + color.b,
|
||||
color.g / 255.0 + color.a); // decode particle position from pixel RGBA
|
||||
|
||||
vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));
|
||||
float speed_t = length(velocity) / length(u_wind_max);
|
||||
|
||||
// pos = pos + vec2(0.001,0.001);
|
||||
// take EPSG:4236 distortion into account for calculating where the particle moved
|
||||
// float y = u_extent.w - pos.y * (u_extent.w - u_extent.y);
|
||||
// float distortion = cos(radians(y));
|
||||
// vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
|
||||
|
||||
// take EPSG:4236 distortion into account for calculating where the particle moved
|
||||
float distortion = cos(radians(pos.y * 180.0 - 90.0));
|
||||
vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
|
||||
// vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
|
||||
|
||||
// update particle position, wrapping around the date line
|
||||
pos = fract(1.0 + pos + offset);
|
||||
|
||||
// // a random seed to use for the particle drop
|
||||
vec2 seed = (pos + v_texCoord) * u_rand_seed;
|
||||
|
||||
// drop rate is a chance a particle will restart at random position, to avoid degeneration
|
||||
float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;
|
||||
float drop = step(1.0 - drop_rate, rand(seed));
|
||||
|
||||
vec2 random_pos = vec2(
|
||||
rand(seed + 1.3),
|
||||
rand(seed + 2.1));
|
||||
pos = mix(pos, random_pos, drop);
|
||||
|
||||
// encode the new particle position back into RGBA
|
||||
gl_FragColor = vec4(
|
||||
fract(pos * 255.0),
|
||||
floor(pos * 255.0) / 255.0);
|
||||
}
|
|
@ -1,17 +0,0 @@
|
|||
|
||||
import image_vert from './wind_vert.glsl';
|
||||
import image_frag from './wind_frag.glsl';
|
||||
import Material from '../../../geom/material/material';
|
||||
export default function WindMaterial(options) {
|
||||
const material = new Material({
|
||||
uniforms: {
|
||||
u_texture: { value: options.u_texture },
|
||||
u_opacity: { value: options.u_opacity }
|
||||
},
|
||||
vertexShader: image_vert,
|
||||
fragmentShader: image_frag,
|
||||
transparent: true
|
||||
});
|
||||
// material.blending = THREE.AdditiveBlending
|
||||
return material;
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
precision mediump float;
|
||||
uniform sampler2D u_texture;
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
void main() {
|
||||
if(u_opacity == 0.0)
|
||||
discard;
|
||||
gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity;
|
||||
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
precision highp float;
|
||||
varying vec2 v_texCoord;
|
||||
void main() {
|
||||
v_texCoord = uv;
|
||||
gl_Position = vec4(1.0 - 2.0 * vec2(position), 0., 1.0);
|
||||
}
|
|
@ -105,6 +105,7 @@ export default class Layer extends Base {
|
|||
const { type = dataType } = cfg;
|
||||
cfg.data = data;
|
||||
cfg.mapType = this.get('mapType');
|
||||
|
||||
this.layerSource = new source[type](cfg);
|
||||
|
||||
return this;
|
||||
|
@ -447,13 +448,13 @@ export default class Layer extends Base {
|
|||
const pickmaterial = new PickingMaterial({
|
||||
u_zoom: this.scene.getZoom()
|
||||
});
|
||||
pickmaterial.setDefinesvalue(this.type, true);
|
||||
this._pickingMesh.onBeforeRender = () => {
|
||||
const zoom = this.scene.getZoom();
|
||||
this._pickingMesh.material.setUniformsValue('u_zoom', zoom);
|
||||
|
||||
};
|
||||
|
||||
const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
|
||||
pickmaterial.setDefinesvalue(this.type, true);
|
||||
pickingMesh.onBeforeRender = () => {
|
||||
const zoom = this.scene.getZoom();
|
||||
pickingMesh.material.setUniformsValue('u_zoom', zoom);
|
||||
};
|
||||
this._pickingMesh.add(pickingMesh);
|
||||
}
|
||||
_setPickingId() {
|
||||
|
@ -555,7 +556,7 @@ export default class Layer extends Base {
|
|||
} else if (this.type === 'polyline') {
|
||||
offset = 2;
|
||||
}
|
||||
this._object3D.position.z = offset * Math.pow(2, 20 - zoom);
|
||||
this._object3D.position.z = offset * Math.pow(2, 20 - zoom);
|
||||
if (zoom < minZoom || zoom > maxZoom) {
|
||||
this._object3D.visible = false;
|
||||
} else if (this.get('visible')) {
|
||||
|
|
|
@ -63,7 +63,7 @@ export default class Scene extends Base {
|
|||
const element = document.createElement('div');
|
||||
|
||||
element.innerHTML = message;
|
||||
element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0;';
|
||||
element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0px;';
|
||||
this._container.appendChild(element);
|
||||
}
|
||||
addImage() {
|
||||
|
|
|
@ -19,6 +19,6 @@ void main() {
|
|||
floor(16.0 * (1.0 - value1)) / 16.0);
|
||||
v_color = texture2D(u_colorTexture,ramp_pos);
|
||||
vec2 range = u_extent.zw - u_extent.xy;
|
||||
gl_Position = matModelViewProjection * vec4(position.xy, value, 1.0);
|
||||
gl_Position = matModelViewProjection * vec4(position.xy, value*100., 1.0);
|
||||
|
||||
}
|
|
@ -7,6 +7,7 @@ import TextBuffer from '../geom/buffer/text';
|
|||
import TextMaterial from '../geom/material/textMaterial';
|
||||
import radar from '../geom/shader/radar_frag.glsl';
|
||||
import warn from '../geom/shader/warn_frag.glsl';
|
||||
import pickingMaterial from '../core/engine/picking/pickingMaterial';
|
||||
|
||||
/**
|
||||
* point shape 2d circle, traingle text,image
|
||||
|
@ -52,7 +53,12 @@ export default class PointLayer extends Layer {
|
|||
u_opacity: opacity,
|
||||
u_zoom: this.scene.getZoom()
|
||||
});
|
||||
mtl.setDefinesvalue('SHAPE', true);
|
||||
// mtl= new pickingMaterial({
|
||||
// u_opacity: opacity,
|
||||
// u_zoom: this.scene.getZoom()
|
||||
// })
|
||||
// mtl.setDefinesvalue('point', true);
|
||||
mtl.setDefinesvalue('SHAPE', true);
|
||||
if (shape === 'radar') {
|
||||
mtl.fragmentShader = radar;
|
||||
|
||||
|
|
|
@ -21,7 +21,8 @@ export default class CSVSource extends Source {
|
|||
if (col.coordinates) {
|
||||
coordinates = col.coordinates;
|
||||
}
|
||||
let coordinates = [ col[x], col[y] ];
|
||||
if(x && y)
|
||||
coordinates = [ col[x], col[y] ];
|
||||
if (x1 && y1) {
|
||||
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue