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

feat(l7):layer

This commit is contained in:
李正学 2018-11-20 15:04:21 +08:00
parent 6fb4a2e973
commit 43ecfd9d6d
27 changed files with 210 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/01_point_circle.html
View File

@ -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 => {

3
demos/01_point_distribute.html
View File

@ -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
})

47
demos/01_point_image.html
View File

@ -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();

7
demos/03_1_extrude_polygon.html
View File

@ -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

15
demos/07_city.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>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>`);
})
});
});

23
demos/08_arc_line.html
View File

@ -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>

108
demos/assets/info.css
View File

@ -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
View File

@ -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",

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

@ -9,7 +9,7 @@ export default function PickingMaterial(options) {
},
vertexShader: picking_vert,
fragmentShader: picking_frag,
transparent: true
transparent: false
});
return material;
}

2
src/core/engine/picking/picking_vert.glsl
View File

@ -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);

23
src/core/extend/windframebuffer/drawMaterial.js
View File

@ -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;
}

19
src/core/extend/windframebuffer/draw_frag.glsl
View File

@ -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);
}

34
src/core/extend/windframebuffer/draw_geometry.js
View File

@ -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 ]
});
});
}
}

26
src/core/extend/windframebuffer/draw_vert.glsl
View File

@ -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);
}

39
src/core/extend/windframebuffer/geoRenderPass.js
View File

@ -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 };

7
src/core/extend/windframebuffer/quad.vert.glsl
View File

@ -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);
}

12
src/core/extend/windframebuffer/screen_frag.glsl
View File

@ -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;
}

26
src/core/extend/windframebuffer/updateMaterial.js
View File

@ -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;
}

76
src/core/extend/windframebuffer/update_frag.glsl
View File

@ -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);
}

17
src/core/extend/windframebuffer/windMaterial.js
View File

@ -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;
}

11
src/core/extend/windframebuffer/wind_frag.glsl
View File

@ -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;
}

6
src/core/extend/windframebuffer/wind_vert.glsl
View File

@ -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);
}

15
src/core/layer.js
View File

@ -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')) {

2
src/core/scene.js
View File

@ -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() {

2
src/geom/shader/raster_vert.glsl
View File

@ -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);
}

8
src/layer/pointLayer.js
View File

@ -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;

3
src/source/csvSource.js
View File

@ -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] ]];
}