mirror of https://gitee.com/antv-l7/antv-l7
Shihuidev (#879)
* feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 * fix: 修复水波点颜色偏暗 * style: lint style * feat: npm reagist failed. update version repuhslish * feat: 优化点图层的渲染效果，叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
f63aea6c91
commit
5841e32cdd
22
latest.sh
22
latest.sh
|
|
@ -1,11 +1,11 @@
|
|||
npm dist-tag add @antv/l7-component@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-core@2.5.40 latest
|
||||
npm dist-tag add @antv/l7@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-layers@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-map@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-maps@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-renderer@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-scene@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-source@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-three@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-utils@2.5.40 latest
|
||||
npm dist-tag add @antv/l7-component@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-core@2.6.12 latest
|
||||
npm dist-tag add @antv/l7@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-layers@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-map@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-maps@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-renderer@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-scene@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-source@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-three@2.6.12 latest
|
||||
npm dist-tag add @antv/l7-utils@2.6.12 latest
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"ajv": "^6.10.2",
|
||||
"element-resize-event": "^3.0.3",
|
||||
|
|
|
|||
|
|
@ -171,8 +171,8 @@ export default class PickingService implements IPickingService {
|
|||
}
|
||||
this.alreadyInPicking = true;
|
||||
const t = new Date().getTime();
|
||||
// @ts-ignore
|
||||
if (t - this.lastPickTime > 10) {
|
||||
// TODO: 优化拾取操作 在右键时 mousedown 和 contextmenu 几乎同时触发，所以不能舍去这一次的触发
|
||||
if (t - this.lastPickTime > 10 || target.type === 'contextmenu') {
|
||||
await this.pickingLayers(target);
|
||||
}
|
||||
// await this.pickingLayers(target);
|
||||
|
|
@ -206,8 +206,6 @@ export default class PickingService implements IPickingService {
|
|||
getContainer,
|
||||
} = this.rendererService;
|
||||
|
||||
this.resizePickingFBO();
|
||||
|
||||
useFramebuffer(this.pickingFBO, () => {
|
||||
const layers = this.layerService.getRenderList();
|
||||
layers
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ uniform float u_shaderPick;
|
|||
/*
|
||||
* Returns highlight color if this item is selected.
|
||||
*/
|
||||
vec4 filterHighlightColor(vec4 color, float lightWeight) {
|
||||
vec4 filterHighlightColor(vec4 color, float weight) {
|
||||
bool selected = bool(v_PickingResult.a);
|
||||
|
||||
if (selected) {
|
||||
|
|
@ -21,7 +21,7 @@ vec4 filterHighlightColor(vec4 color, float lightWeight) {
|
|||
float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha));
|
||||
|
||||
vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio);
|
||||
return vec4(resultRGB * lightWeight, color.a);
|
||||
return vec4(resultRGB * weight, color.a);
|
||||
} else {
|
||||
return color;
|
||||
}
|
||||
|
|
@ -53,6 +53,16 @@ vec4 filterColor(vec4 color) {
|
|||
|
||||
}
|
||||
|
||||
// TODO: 优化水波点 blend additive 模式下有的拾取效果
|
||||
vec4 filterColorAnimate(vec4 color) {
|
||||
// TODO: 过滤多余的 shader 计算
|
||||
if(u_shaderPick < 0.5) {
|
||||
return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
|
||||
} else {
|
||||
return filterPickingColor(filterHighlightColor(color, color.a));
|
||||
}
|
||||
}
|
||||
|
||||
vec4 filterColorWithLight(vec4 color, float lightWeight) {
|
||||
// TODO: 过滤多余的 shader 计算
|
||||
// return color;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-layers": "^2.6.13",
|
||||
"@antv/l7-maps": "^2.6.13",
|
||||
"@antv/l7-scene": "^2.6.13",
|
||||
"@antv/l7-source": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-component": "^2.6.15",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-layers": "^2.6.15",
|
||||
"@antv/l7-maps": "^2.6.15",
|
||||
"@antv/l7-scene": "^2.6.15",
|
||||
"@antv/l7-source": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.6.13';
|
||||
const version = '2.6.15';
|
||||
export { version };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/geo-coord": "^1.0.8",
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-source": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-source": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.2.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ interface IPointLayerStyleOptions {
|
|||
stroke: styleColor;
|
||||
strokeOpacity: styleSingle;
|
||||
offsets: styleOffset;
|
||||
blend: string;
|
||||
}
|
||||
// 判断当前使用的 style 中的变量属性是否需要进行数据映射
|
||||
export default class FillModel extends BaseModel {
|
||||
|
|
@ -41,6 +42,7 @@ export default class FillModel extends BaseModel {
|
|||
strokeWidth = 0,
|
||||
stroke = 'rgba(0,0,0,0)',
|
||||
offsets = [0, 0],
|
||||
blend,
|
||||
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
|
||||
if (
|
||||
|
|
@ -90,6 +92,7 @@ export default class FillModel extends BaseModel {
|
|||
});
|
||||
}
|
||||
return {
|
||||
u_additive: blend === 'additive' ? 1.0 : 0.0,
|
||||
u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,
|
||||
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
|
||||
u_cellTypeLayout: this.getCellTypeLayout(),
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
#define Animate 0.0
|
||||
|
||||
uniform float u_globel;
|
||||
uniform float u_blur : 0;
|
||||
// uniform float u_stroke_width : 1;
|
||||
uniform float u_additive;
|
||||
|
||||
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
|
||||
|
||||
|
|
@ -33,8 +32,6 @@ void main() {
|
|||
vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
|
||||
|
||||
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 + strokeWidth);
|
||||
|
||||
float outer_df;
|
||||
|
|
@ -72,18 +69,12 @@ void main() {
|
|||
if(u_globel > 0.0) {
|
||||
// TODO: 地球模式下避免多余片元绘制，同时也能避免有用片元在透明且重叠的情况下无法写入
|
||||
// 付出的代价是边缘会有一些锯齿
|
||||
if(outer_df > antialiased_blur + 0.018) discard;
|
||||
if(outer_df > antialiasblur + 0.018) discard;
|
||||
}
|
||||
float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
|
||||
|
||||
|
||||
// float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
|
||||
// antialiased_blur,
|
||||
// 0.0,
|
||||
// inner_df
|
||||
// );
|
||||
float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
|
||||
antialiased_blur,
|
||||
float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
|
||||
|
||||
float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
|
||||
antialiasblur,
|
||||
0.0,
|
||||
inner_df
|
||||
);
|
||||
|
|
@ -93,21 +84,26 @@ void main() {
|
|||
|
||||
gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
|
||||
|
||||
gl_FragColor.a = gl_FragColor.a * opacity_t;
|
||||
if(u_aimate.x == Animate) {
|
||||
float d = length(v_data.xy);
|
||||
float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0);
|
||||
gl_FragColor = vec4(gl_FragColor.xyz, intensity);
|
||||
|
||||
// TODO: 根据叠加模式选择效果
|
||||
if(u_additive > 0.0) {
|
||||
gl_FragColor *= intensity;
|
||||
} else {
|
||||
gl_FragColor = vec4(gl_FragColor.xyz, intensity);
|
||||
}
|
||||
|
||||
// TODO: 优化在水波纹情况下的拾取（a == 0 时无法拾取）
|
||||
if(d < 0.7) {
|
||||
gl_FragColor.a = max(gl_FragColor.a, 0.001);
|
||||
}
|
||||
|
||||
gl_FragColor = u_additive > 0.0 ？filterColorAnimate(gl_FragColor) : filterColor(gl_FragColor);
|
||||
} else {
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
}
|
||||
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
if(gl_FragColor.a == 0.00) {
|
||||
gl_FragColor.rgb *= gl_FragColor.a;
|
||||
}
|
||||
// gl_FragColor.rgb *= gl_FragColor.a;
|
||||
|
||||
|
||||
gl_FragColor *= opacity_t;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ uniform float u_stroke_width : 2;
|
|||
uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
|
||||
uniform vec2 u_offsets;
|
||||
|
||||
uniform float u_blur : 0.0;
|
||||
|
||||
#pragma include "styleMapping"
|
||||
#pragma include "styleMappingCalOpacity"
|
||||
#pragma include "styleMappingCalStrokeOpacity"
|
||||
|
|
@ -121,7 +123,8 @@ void main() {
|
|||
|
||||
// TODO: billboard
|
||||
// anti-alias
|
||||
float antialiasblur = 1.0 / u_DevicePixelRatio / (newSize + u_stroke_width);
|
||||
// float antialiased_blur = -max(u_blur, antialiasblur);
|
||||
float antialiasblur = -max(1.0 / u_DevicePixelRatio / (newSize + u_stroke_width), u_blur);
|
||||
|
||||
// construct point coords
|
||||
// TODP: /abs(extrude.x) 是为了兼容地球模式
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-map",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "l7 map",
|
||||
"keywords": [],
|
||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
|
|
|
|||
|
|
@ -122,7 +122,8 @@ export class Map extends Camera {
|
|||
const height = dimensions[1];
|
||||
|
||||
this.transform.resize(width, height);
|
||||
if (!isMini) {
|
||||
// TODO: 小程序环境不需要执行后续动作
|
||||
if (isMini) {
|
||||
return this;
|
||||
}
|
||||
const fireMoving = !this.moving;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^0.0.3",
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-map": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-map": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@types/amap-js-api": "^1.4.6",
|
||||
"@types/mapbox-gl": "^1.11.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-mini",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-layers": "^2.6.13",
|
||||
"@antv/l7-maps": "^2.6.13",
|
||||
"@antv/l7-scene": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-layers": "^2.6.15",
|
||||
"@antv/l7-maps": "^2.6.15",
|
||||
"@antv/l7-scene": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"l7regl": "^0.0.16",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-layers": "^2.6.13",
|
||||
"@antv/l7-maps": "^2.6.13",
|
||||
"@antv/l7-renderer": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-component": "^2.6.15",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-layers": "^2.6.15",
|
||||
"@antv/l7-maps": "^2.6.15",
|
||||
"@antv/l7-renderer": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-utils": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-utils": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
"@types/d3-hexbin": "^0.2.3",
|
||||
"@types/lodash": "^4.14.138"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
"gitHead": "f63aea6c9140aac41f1e842fd7fef34502bfeec5",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-three",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "three for L7 ",
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.13",
|
||||
"@antv/l7-layers": "^2.6.13",
|
||||
"@antv/l7-scene": "^2.6.13",
|
||||
"@antv/l7-core": "^2.6.15",
|
||||
"@antv/l7-layers": "^2.6.15",
|
||||
"@antv/l7-scene": "^2.6.15",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.6.13",
|
||||
"version": "2.6.15",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@ export default class GaodeMapComponent extends React.Component {
|
|||
// min = 'min',
|
||||
// max = 'max',
|
||||
// none = 'none',
|
||||
const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) //
|
||||
// blend: 'additive'
|
||||
|
||||
let layer = new PointLayer({ zIndex: 2, blend: 'additive' })
|
||||
.source(
|
||||
[
|
||||
{
|
||||
|
|
@ -49,48 +51,26 @@ export default class GaodeMapComponent extends React.Component {
|
|||
},
|
||||
)
|
||||
.shape('circle')
|
||||
// .shape('normal')
|
||||
.color('#1990FF')
|
||||
.size(20)
|
||||
.size(40)
|
||||
.style({
|
||||
stroke: '#fff',
|
||||
storkeWidth: 2,
|
||||
});
|
||||
stroke: '#f00',
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 1,
|
||||
})
|
||||
.animate(true)
|
||||
.active({ color: '#ff0' });
|
||||
|
||||
this.scene = scene;
|
||||
|
||||
const linelayer = new LineLayer({ blend: 'additive' })
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'MultiLineString',
|
||||
coordinates: [
|
||||
[
|
||||
[121.107846, 30.267069],
|
||||
[121.107, 30.267069],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('line')
|
||||
.color('#78FFFF')
|
||||
.size(10);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// scene.addLayer(linelayer);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
layer.on('click', () => console.log('point click'));
|
||||
layer.on('mousemove', (e) => {
|
||||
console.log(e.feature);
|
||||
});
|
||||
linelayer.on('click', () => console.log('line click'));
|
||||
layer.on('contextmenu', () => console.log('contextmenu'));
|
||||
// layer.on('mousemove', (e) => {
|
||||
// console.log(e.feature);
|
||||
// });
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// @ts-nocheck
|
||||
import { Scene, PolygonLayer, PointLayer, Map } from '@antv/l7-mini';
|
||||
// import { Scene } from '@antv/l7';
|
||||
// import { PolygonLayer, PointLayer } from '@antv/l7-layers';
|
||||
|
|
@ -8,68 +9,61 @@ export default class ScaleComponent extends React.Component {
|
|||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
map: new Map({
|
||||
center: [105, 32],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
// scene.setBgColor('#000');
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
opacityLinear: {
|
||||
enable: true,
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
let layer2 = new PolygonLayer({ blend: 'normal' })
|
||||
.source(data)
|
||||
.size(1)
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('line')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
const layer2 = new PolygonLayer({ blend: 'normal' })
|
||||
.source(data)
|
||||
.size(1)
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('line')
|
||||
.select(true)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
scene.fitBounds([
|
||||
[48.073279, 3.067261],
|
||||
[160.573279, 54.003394],
|
||||
]);
|
||||
|
||||
console.log('getBounds', scene.getBounds());
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue