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

fix pointlayer image shape event fix #30 

fix 2d 图形,文本渲染的APi strokeColor -> stroke
This commit is contained in:
thinkinggis 2019-09-09 15:25:10 +08:00
parent cf587c7758
commit d658c041b8
15 changed files with 79 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/01_circle.html
View File

@ -65,7 +65,7 @@
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
strokeColor: 'white', // 描边颜色 stroke: 'white', // 描边颜色
strokeWidth: 1, // 描边宽度 strokeWidth: 1, // 描边宽度
opacity: 1.0 opacity: 1.0
}) })

2
demos/01_point_circle.html
View File

@ -85,7 +85,7 @@ scene.on('loaded', () => {
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
strokeColor: 'white', // 描边颜色 stroke: 'white', // 描边颜色
strokeWidth: 1, // 描边宽度 strokeWidth: 1, // 描边宽度
opacity: 1.0 opacity: 1.0
}) })

2
demos/06_text.html
View File

@ -60,7 +60,7 @@ scene.on('loaded', () => {
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
strokeColor: 'white', // 描边颜色 stroke: 'white', // 描边颜色
strokeWidth: 2, // 描边宽度 strokeWidth: 2, // 描边宽度
opacity: 1.0 opacity: 1.0
}) })

2
demos/point.html
View File

@ -71,7 +71,7 @@
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
strokeColor: '#fff', // 描边颜色 stroke: '#fff', // 描边颜色
strokeWidth: 4, // 描边宽度 strokeWidth: 4, // 描边宽度
opacity: 1.0 opacity: 1.0
}) })

55
demos/pointImage.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
<title>气泡图</title>
<style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/l7.js"></script>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
minZoom:5,
maxZoom:15,
zoom: 12
});
window.scene = scene;
scene.on('loaded', function() {
scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
$.get('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json', data => {
const imageLayer = scene.PointLayer({
zIndex: 2
})
.source(data)
.shape('local')
.size(20)
.active(true)
.color('w', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
console.log(imageLayer)
imageLayer.on('click',(e)=>{
console.log(e)
})
});
});
</script>
</body>
</html>

2
demos/text.html
View File

@ -72,7 +72,7 @@ scene.on('loaded', () => {
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
strokeColor: 'white', // 描边颜色 stroke: 'white', // 描边颜色
strokeWidth: 1, // 描边宽度 strokeWidth: 1, // 描边宽度
opacity: 1.0 opacity: 1.0
}) })

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@antv/l7", "name": "@antv/l7",
"version": "1.3.3-beta.3", "version": "1.3.4",
"description": "Large-scale WebGL-powered Geospatial Data Visualization", "description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/L7.js", "main": "build/L7.js",
"homepage": "https://github.com/antvis/l7", "homepage": "https://github.com/antvis/l7",

1
src/core/controller/event.js
View File

@ -8,7 +8,6 @@ export default class EventContoller {
} }
_init() { _init() {
this.layer.scene.on('pick-' + this.layer.layerId, e => { this.layer.scene.on('pick-' + this.layer.layerId, e => {
let { featureId, point2d, type } = e; let { featureId, point2d, type } = e;
if (type === 'click') { if (type === 'click') {
return; return;

2
src/core/layer.js
View File

@ -211,7 +211,7 @@ export default class Layer extends Base {
} }
style(field, cfg) { style(field, cfg) {
const colorItem = [ 'fill', 'stroke', 'color', 'baseColor', 'brightColor', 'windowColor' ]; const colorItem = [ 'fill', 'stroke', 'strokeColor', 'color', 'baseColor', 'brightColor', 'windowColor' ];
let styleOptions = this.get('styleOptions'); let styleOptions = this.get('styleOptions');
if (!styleOptions) { if (!styleOptions) {
styleOptions = {}; styleOptions = {};

12
src/geom/shader/circle_frag.glsl
View File

@ -1,8 +1,8 @@
uniform float u_blur : 0; uniform float u_blur : 0;
uniform float u_opacity : 1; uniform float u_opacity : 1;
uniform float u_stroke_width : 1; uniform float u_strokeWidth : 1;
uniform vec4 u_stroke_color : [1, 1, 1, 1]; uniform vec4 u_stroke : [1, 1, 1, 1];
uniform float u_stroke_opacity : 1; uniform float u_strokeOpacity : 1;
varying vec4 v_data; varying vec4 v_data;
varying vec4 v_color; varying vec4 v_color;
@ -16,7 +16,7 @@ void main() {
lowp float antialiasblur = v_data.z; lowp float antialiasblur = v_data.z;
float antialiased_blur = -max(u_blur, antialiasblur); float antialiased_blur = -max(u_blur, antialiasblur);
float r = v_radius / (v_radius + u_stroke_width); float r = v_radius / (v_radius + u_strokeWidth);
float outer_df; float outer_df;
float inner_df; float inner_df;
@ -52,12 +52,12 @@ void main() {
float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( float color_t = u_strokeWidth < 0.01 ? 0.0 : smoothstep(
antialiased_blur, antialiased_blur,
0.0, 0.0,
inner_df inner_df
); );
gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity * v_color.a, color_t); gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke * u_strokeOpacity * v_color.a, color_t);
#pragma include "pick" #pragma include "pick"
} }

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

@ -11,5 +11,5 @@
color.a= color.a * vTime * 1.5; color.a= color.a * vTime * 1.5;
#endif #endif
gl_FragColor = color; gl_FragColor = color;
#pragma include "pick" #pragma include "pick"
} }

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

@ -24,6 +24,7 @@ void main(){
pos.y=1.-pos.y; pos.y=1.-pos.y;
vec4 textureColor=texture2D(u_texture,pos); vec4 textureColor=texture2D(u_texture,pos);
gl_FragColor=textureColor; gl_FragColor=textureColor;
#pragma include "pick"
return; return;
#endif #endif
if(v_color.a==0.) if(v_color.a==0.)
@ -70,6 +71,7 @@ void main(){
}else{ }else{
gl_FragColor=pcolor; gl_FragColor=pcolor;
} }
#pragma include "pick"
} }

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

@ -2,7 +2,7 @@ uniform sampler2D u_sdf_map;
uniform float u_gamma_scale : 0.5; uniform float u_gamma_scale : 0.5;
uniform float u_font_size : 24; uniform float u_font_size : 24;
uniform float u_opacity : 1.0; uniform float u_opacity : 1.0;
uniform vec4 u_strokeColor : [0, 0, 0, 1]; uniform vec4 u_stroke : [0, 0, 0, 1];
uniform float u_strokeWidth : 2.0; uniform float u_strokeWidth : 2.0;
uniform float u_halo_blur : 0.5; uniform float u_halo_blur : 0.5;
@ -23,6 +23,6 @@ void main() {
highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist); highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
gl_FragColor = mix(v_color * u_opacity, u_strokeColor, smoothstep(0., 0.5, 1. - dist)) * alpha; gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha;
#pragma include "pick" #pragma include "pick"
} }

6
src/layer/render/point/drawCircle.js
View File

@ -34,9 +34,9 @@ export default function drawCircle(layerData, layer, buffer) {
u_opacity: style.opacity, u_opacity: style.opacity,
u_activeColor: activeOption.fill, u_activeColor: activeOption.fill,
u_zoom: layer.scene.getZoom(), u_zoom: layer.scene.getZoom(),
u_stroke_color: style.stroke, u_stroke: style.stroke,
u_stroke_width: style.strokeWidth, u_strokeWidth: style.strokeWidth,
u_stroke_opacity: style.strokeOpacity u_strokeOpacity: style.strokeOpacity
}); });
material.depthTest = false; material.depthTest = false;
material.setBending(style.blending); material.setBending(style.blending);

6
src/layer/render/text/drawText.js
View File

@ -9,7 +9,7 @@ const defaultTextStyle = {
textOffset: [ 0, 0 ], textOffset: [ 0, 0 ],
spacing: 2, spacing: 2,
padding: [ 4, 4 ], padding: [ 4, 4 ],
strokeColor: 'white', stroke: 'white',
strokeWidth: 2, strokeWidth: 2,
strokeOpacity: 1.0 strokeOpacity: 1.0
}; };
@ -20,7 +20,7 @@ export default function DrawText(layerData, layer) {
}; };
layer.set('styleOptions', style); layer.set('styleOptions', style);
const activeOption = layer.get('activedOptions'); const activeOption = layer.get('activedOptions');
const { strokeWidth, strokeColor, opacity } = style; const { strokeWidth, stroke, opacity } = style;
const { width, height } = layer.scene.getSize(); const { width, height } = layer.scene.getSize();
const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer); const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer);
@ -34,7 +34,7 @@ export default function DrawText(layerData, layer) {
const material = new TextMaterial({ const material = new TextMaterial({
name: layer.layerId, name: layer.layerId,
u_sdf_map: texture, u_sdf_map: texture,
u_strokeColor: ColorUtil.toRGB(strokeColor).map(e => e / 255), u_stroke: ColorUtil.toRGB(stroke).map(e => e / 255),
u_strokeWidth: strokeWidth, u_strokeWidth: strokeWidth,
u_halo_blur: 0.5, u_halo_blur: 0.5,
u_opacity: opacity, u_opacity: opacity,