mirror of https://gitee.com/antv-l7/antv-l7
fix pointlayer image shape event fix #30
fix 2d 图形,文本渲染的APi strokeColor -> stroke
This commit is contained in:
thinkinggis
parent
bbc16a263d
commit
69ff309379
|
|
@ -65,7 +65,7 @@
|
|||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
strokeColor: 'white', // 描边颜色
|
||||
stroke: 'white', // 描边颜色
|
||||
strokeWidth: 1, // 描边宽度
|
||||
opacity: 1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ scene.on('loaded', () => {
|
|||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
strokeColor: 'white', // 描边颜色
|
||||
stroke: 'white', // 描边颜色
|
||||
strokeWidth: 1, // 描边宽度
|
||||
opacity: 1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ scene.on('loaded', () => {
|
|||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
strokeColor: 'white', // 描边颜色
|
||||
stroke: 'white', // 描边颜色
|
||||
strokeWidth: 2, // 描边宽度
|
||||
opacity: 1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
strokeColor: '#fff', // 描边颜色
|
||||
stroke: '#fff', // 描边颜色
|
||||
strokeWidth: 4, // 描边宽度
|
||||
opacity: 1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -72,7 +72,7 @@ scene.on('loaded', () => {
|
|||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
strokeColor: 'white', // 描边颜色
|
||||
stroke: 'white', // 描边颜色
|
||||
strokeWidth: 1, // 描边宽度
|
||||
opacity: 1.0
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "1.3.3-beta.3",
|
||||
"version": "1.3.4",
|
||||
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "build/L7.js",
|
||||
"homepage": "https://github.com/antvis/l7",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ export default class EventContoller {
|
|||
}
|
||||
_init() {
|
||||
this.layer.scene.on('pick-' + this.layer.layerId, e => {
|
||||
|
||||
let { featureId, point2d, type } = e;
|
||||
if (type === 'click') {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -211,7 +211,7 @@ export default class Layer extends Base {
|
|||
}
|
||||
|
||||
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');
|
||||
if (!styleOptions) {
|
||||
styleOptions = {};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
uniform float u_blur : 0;
|
||||
uniform float u_opacity : 1;
|
||||
uniform float u_stroke_width : 1;
|
||||
uniform vec4 u_stroke_color : [1, 1, 1, 1];
|
||||
uniform float u_stroke_opacity : 1;
|
||||
uniform float u_strokeWidth : 1;
|
||||
uniform vec4 u_stroke : [1, 1, 1, 1];
|
||||
uniform float u_strokeOpacity : 1;
|
||||
|
||||
varying vec4 v_data;
|
||||
varying vec4 v_color;
|
||||
|
|
@ -16,7 +16,7 @@ void main() {
|
|||
|
||||
lowp float antialiasblur = v_data.z;
|
||||
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 inner_df;
|
||||
|
|
@ -52,12 +52,12 @@ void main() {
|
|||
|
||||
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,
|
||||
0.0,
|
||||
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"
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@ void main(){
|
|||
pos.y=1.-pos.y;
|
||||
vec4 textureColor=texture2D(u_texture,pos);
|
||||
gl_FragColor=textureColor;
|
||||
#pragma include "pick"
|
||||
return;
|
||||
#endif
|
||||
if(v_color.a==0.)
|
||||
|
|
@ -70,6 +71,7 @@ void main(){
|
|||
}else{
|
||||
gl_FragColor=pcolor;
|
||||
}
|
||||
#pragma include "pick"
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ uniform sampler2D u_sdf_map;
|
|||
uniform float u_gamma_scale : 0.5;
|
||||
uniform float u_font_size : 24;
|
||||
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_halo_blur : 0.5;
|
||||
|
||||
|
|
@ -23,6 +23,6 @@ void main() {
|
|||
|
||||
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"
|
||||
}
|
||||
|
|
@ -34,9 +34,9 @@ export default function drawCircle(layerData, layer, buffer) {
|
|||
u_opacity: style.opacity,
|
||||
u_activeColor: activeOption.fill,
|
||||
u_zoom: layer.scene.getZoom(),
|
||||
u_stroke_color: style.stroke,
|
||||
u_stroke_width: style.strokeWidth,
|
||||
u_stroke_opacity: style.strokeOpacity
|
||||
u_stroke: style.stroke,
|
||||
u_strokeWidth: style.strokeWidth,
|
||||
u_strokeOpacity: style.strokeOpacity
|
||||
});
|
||||
material.depthTest = false;
|
||||
material.setBending(style.blending);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const defaultTextStyle = {
|
|||
textOffset: [ 0, 0 ],
|
||||
spacing: 2,
|
||||
padding: [ 4, 4 ],
|
||||
strokeColor: 'white',
|
||||
stroke: 'white',
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 1.0
|
||||
};
|
||||
|
|
@ -20,7 +20,7 @@ export default function DrawText(layerData, layer) {
|
|||
};
|
||||
layer.set('styleOptions', style);
|
||||
const activeOption = layer.get('activedOptions');
|
||||
const { strokeWidth, strokeColor, opacity } = style;
|
||||
const { strokeWidth, stroke, opacity } = style;
|
||||
|
||||
const { width, height } = layer.scene.getSize();
|
||||
const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer);
|
||||
|
|
@ -34,7 +34,7 @@ export default function DrawText(layerData, layer) {
|
|||
const material = new TextMaterial({
|
||||
name: layer.layerId,
|
||||
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_halo_blur: 0.5,
|
||||
u_opacity: opacity,
|
||||
|
|
|
|||
Loading…
Reference in New Issue