mirror of https://gitee.com/antv-l7/antv-l7
Shihuidev (#901)
* 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: 修复水波点颜色偏暗 * feat: 优化点图层的渲染效果,叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style * feat: 增加瓦片地图的请求节流 * style: lint style * feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象 * style: lint style * fix: 修复resize 后 picking shiqu 拾取失败的问题 * feat: 优化 marker/popup 在容器边缘的表现 * feat: 增加 setEnableRender 方法 * style: lint style * feat: 增加城市图层扫光特效 * style: lint style * feat: 补全拾取色混合配置 * style: lint style * feat: 增加高德地图的面积大小点 * style: lint style * feat: 点优化边缘锯齿 * fix: 修复pointLayer stroke 变暗问题 * fix: 修复混合导致的拾取错误 * feat: add simple point 1.0 * style: lint style * feat: simple point support stroke * style: lint style * feat: 优化 simple point 边缘的锯齿 * style: lint style * feat: add point cylinder raising animate * style: lint style * feat: 优化点图层 icon 在小尺寸下的锯齿问题 * style: lint style * feat: 修复 layer destroy 报错、未清理、未重绘、补充触发 destroy 事件 * fix: 修复 marker 在 cluster getMakers 失效 * style: lint style * feat: 清除 marker layer cluster fix * style: lint style * fix: 修复 markerLayer hide show 方法缺少 cluster 模式下的控制 * style: lint style * feat: 取消在 shape 方法执行后的暴力更新 * style: lint style * feat: 增加图层保底颜色设置 * style: lint style * feat: 将兜底颜色改为 bottomColor * fix: color bottom * style: lint style * feat: 修改颜色兜底判断逻辑 * style: lint style * chore: update version 2.6.27 -> 2.6.28 * style: lint style * feat: add tnpm dist-tag * feat: 增加line border 边框 * style: lint style * feat: 增加 layer 重复销毁过滤 * style: lint style
This commit is contained in:
parent
62510767ea
commit
9727081810
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -25,8 +25,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"ajv": "^6.10.2",
|
||||
"element-resize-event": "^3.0.3",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-core": "^2.6.27",
|
||||
"@antv/l7-layers": "^2.6.27",
|
||||
"@antv/l7-maps": "^2.6.27",
|
||||
"@antv/l7-scene": "^2.6.27",
|
||||
"@antv/l7-source": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-component": "^2.6.28",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-layers": "^2.6.28",
|
||||
"@antv/l7-maps": "^2.6.28",
|
||||
"@antv/l7-scene": "^2.6.28",
|
||||
"@antv/l7-source": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.6.27';
|
||||
const version = '2.6.28';
|
||||
export { version };
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-source": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-source": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.2.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
@ -189,6 +189,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
// TODO: layer 保底颜色
|
||||
private bottomColor = 'rgba(0, 0, 0, 0)';
|
||||
|
||||
private isDestroied: boolean = false;
|
||||
|
||||
// private pickingPassRender: IPass<'pixelPicking'>;
|
||||
|
||||
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
|
||||
|
@ -789,12 +791,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
}
|
||||
|
||||
public destroy() {
|
||||
// debugger
|
||||
if (this.isDestroied) {
|
||||
return;
|
||||
}
|
||||
this.hooks.beforeDestroy.call();
|
||||
// 清除sources事件
|
||||
this.layerSource.off('update', this.sourceEvent);
|
||||
|
||||
this.multiPassRenderer.destroy();
|
||||
|
||||
// console.log(this.styleAttributeService.getAttributes())
|
||||
// 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
|
||||
this.styleAttributeService.clearAllAttributes();
|
||||
|
||||
|
@ -803,7 +809,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
this.hooks.afterDestroy.call();
|
||||
|
||||
// TODO: 清除各个图层自定义的 models 资源
|
||||
this.layerModel?.clearModels();
|
||||
// this.layerModel?.clearModels();
|
||||
|
||||
this.models = [];
|
||||
|
||||
|
@ -822,6 +828,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
this.removeAllListeners();
|
||||
// 解绑图层容器中的服务
|
||||
// this.container.unbind(TYPES.IStyleAttributeService);
|
||||
|
||||
this.isDestroied = true;
|
||||
}
|
||||
public clear() {
|
||||
this.styleAttributeService.clearAllAttributes();
|
||||
|
|
|
@ -20,4 +20,7 @@ export interface ILineLayerStyleOptions {
|
|||
|
||||
globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
|
||||
vertexHeightScale?: number; // 可选参数、lineLayer vertex height scale
|
||||
|
||||
borderWidth?: number; // 可选参数 线边框宽度
|
||||
borderColor?: string; // 可选参数 线边框颜色
|
||||
}
|
||||
|
|
|
@ -34,6 +34,8 @@ export default class LineModel extends BaseModel {
|
|||
lineTexture = false,
|
||||
iconStep = 100,
|
||||
vertexHeightScale = 20.0,
|
||||
borderWidth = 0.0,
|
||||
borderColor = '#ccc',
|
||||
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
|
||||
if (dashArray.length === 2) {
|
||||
dashArray.push(0, 0);
|
||||
|
@ -98,6 +100,10 @@ export default class LineModel extends BaseModel {
|
|||
u_icon_step: iconStep,
|
||||
u_textSize: [1024, this.iconService.canvasHeight || 128],
|
||||
|
||||
// line border 参数
|
||||
u_borderWidth: borderWidth,
|
||||
u_borderColor: rgb2arr(borderColor),
|
||||
|
||||
// 渐变色支持参数
|
||||
u_linearColor: useLinearColor,
|
||||
u_sourceColor: sourceColorArr,
|
||||
|
|
|
@ -6,8 +6,10 @@ uniform float u_blur : 0.99;
|
|||
uniform float u_line_type: 0.0;
|
||||
uniform float u_opacity : 1.0;
|
||||
uniform float u_textureBlend;
|
||||
|
||||
uniform float u_borderWidth: 0.0;
|
||||
uniform vec4 u_borderColor;
|
||||
varying vec4 v_color;
|
||||
// varying vec2 v_normal;
|
||||
|
||||
// line texture
|
||||
uniform float u_line_texture;
|
||||
|
@ -69,7 +71,7 @@ void main() {
|
|||
float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
|
||||
float v = styleMappingMat[3].a; // 线图层贴图部分的 v 坐标值
|
||||
|
||||
v = max(smoothstep(0.95, 1.0, v), v);
|
||||
// v = max(smoothstep(0.95, 1.0, v), v);
|
||||
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
|
||||
|
||||
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
|
||||
|
@ -87,19 +89,34 @@ void main() {
|
|||
gl_FragColor = filterColor(pattern);
|
||||
}
|
||||
} else {
|
||||
|
||||
float v = styleMappingMat[3].a;
|
||||
float borderWidth = min(0.5, u_borderWidth);
|
||||
// 绘制 border
|
||||
if(borderWidth > 0.0) {
|
||||
float borderOuterWidth = borderWidth/2.0;
|
||||
|
||||
if(v >= 1.0 - borderWidth || v <= borderWidth) {
|
||||
if(v > borderWidth) {
|
||||
float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
|
||||
gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
|
||||
} else if(v <= borderWidth) {
|
||||
float linear = smoothstep(0.0, 1.0, v/borderWidth);
|
||||
gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
|
||||
}
|
||||
}
|
||||
|
||||
if(v < borderOuterWidth) {
|
||||
gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
|
||||
} else if(v > 1.0 - borderOuterWidth) {
|
||||
gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
|
||||
}
|
||||
}
|
||||
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
}
|
||||
|
||||
// gl_FragColor = (vec4(1.0, 0.0, 0.0, 1.0));
|
||||
|
||||
// if(rV < r || rV > 1.0 - r) {
|
||||
// gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
|
||||
// }
|
||||
// if(v > 0.9) {
|
||||
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
|
||||
// } else if(v < 0.1) {
|
||||
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
|
||||
// }
|
||||
|
||||
// gl_FragColor = filterColor(gl_FragColor);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -28,7 +28,6 @@ uniform float u_vertexScale: 1.0;
|
|||
|
||||
varying vec4 v_color;
|
||||
varying vec4 v_dash_array;
|
||||
varying vec2 v_normal;
|
||||
|
||||
// texV 线图层 - 贴图部分的 v 坐标(线的宽度方向)
|
||||
varying vec2 v_iconMapUV;
|
||||
|
@ -85,8 +84,6 @@ void main() {
|
|||
if(u_aimate.x == Animate || u_linearColor == 1.0) {
|
||||
d_distance_ratio = a_Distance / a_Total_Distance;
|
||||
}
|
||||
v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
|
||||
|
||||
v_color = a_Color;
|
||||
|
||||
vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
|
||||
|
|
|
@ -215,7 +215,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
|
|||
// console.log('params', params)
|
||||
// console.log('attribute', attribute)
|
||||
|
||||
|
||||
const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
|
||||
if (attribute.name === 'color' && !isColor(mappingResult[0])) {
|
||||
return [minimumColor];
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-map",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-map": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-map": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@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.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-layers": "^2.6.27",
|
||||
"@antv/l7-maps": "^2.6.27",
|
||||
"@antv/l7-scene": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-layers": "^2.6.28",
|
||||
"@antv/l7-maps": "^2.6.28",
|
||||
"@antv/l7-scene": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -26,7 +26,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"l7regl": "^0.0.16",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -23,12 +23,12 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.27",
|
||||
"@antv/l7-layers": "^2.6.27",
|
||||
"@antv/l7-maps": "^2.6.27",
|
||||
"@antv/l7-renderer": "^2.6.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-component": "^2.6.28",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-layers": "^2.6.28",
|
||||
"@antv/l7-maps": "^2.6.28",
|
||||
"@antv/l7-renderer": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@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.27",
|
||||
"version": "2.6.28",
|
||||
"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.27",
|
||||
"@antv/l7-utils": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-utils": "^2.6.28",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-three",
|
||||
"version": "2.6.27",
|
||||
"version": "2.6.28",
|
||||
"description": "three for L7 ",
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
@ -44,9 +44,9 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.6.27",
|
||||
"@antv/l7-layers": "^2.6.27",
|
||||
"@antv/l7-scene": "^2.6.27",
|
||||
"@antv/l7-core": "^2.6.28",
|
||||
"@antv/l7-layers": "^2.6.28",
|
||||
"@antv/l7-scene": "^2.6.28",
|
||||
"@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.27",
|
||||
"version": "2.6.28",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
@ -15,9 +15,10 @@ export default class Amap2demo_road2 extends React.Component {
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120.165, 30.25],
|
||||
pitch: 50,
|
||||
zoom: 16.8,
|
||||
pitch: 0,
|
||||
zoom: 15,
|
||||
viewMode: '3D',
|
||||
style: 'dark',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
@ -37,7 +38,7 @@ export default class Amap2demo_road2 extends React.Component {
|
|||
.source(data)
|
||||
.size(5)
|
||||
.shape('line')
|
||||
.texture('02')
|
||||
// .texture('02')
|
||||
// .color('#ccc')
|
||||
.color('rgb(20, 180, 90)')
|
||||
// .animate({
|
||||
|
@ -46,10 +47,13 @@ export default class Amap2demo_road2 extends React.Component {
|
|||
// trailLength: 2, // 流线长度
|
||||
// })
|
||||
.style({
|
||||
borderWidth: 0.35,
|
||||
borderColor: '#fff',
|
||||
// opacity: 0.5,
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 80, // 设置贴图纹理的间距
|
||||
});
|
||||
// lineTexture: true, // 开启线的贴图功能
|
||||
// iconStep: 80, // 设置贴图纹理的间距
|
||||
})
|
||||
.active(true);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -65,6 +65,7 @@ function joinData(geodata: any, ncovData: any) {
|
|||
}
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [showScene, setShowScene] = React.useState(true);
|
||||
const [data, setData] = React.useState();
|
||||
const [popupInfo, setPopupInfo] = React.useState<{
|
||||
lnglat: number[];
|
||||
|
@ -92,115 +93,128 @@ export default React.memo(function Map() {
|
|||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
setTimeout(() => {
|
||||
// setShowScene(false)
|
||||
}, 3000);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 10,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{popupInfo && (
|
||||
<Popup lnglat={popupInfo.lnglat}>
|
||||
{popupInfo.feature.name}
|
||||
<ul
|
||||
{showScene && (
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 10,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
onSceneLoaded={(scene) => {
|
||||
// setTimeout(() => {
|
||||
// scene.removeAllLayer()
|
||||
// }, 3000)
|
||||
// setTimeout(() => scene.destroy(), 5000)
|
||||
}}
|
||||
>
|
||||
{popupInfo && (
|
||||
<Popup lnglat={popupInfo.lnglat}>
|
||||
{popupInfo.feature.name}
|
||||
<ul
|
||||
style={{
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert('test');
|
||||
}}
|
||||
value="点击"
|
||||
>
|
||||
点击
|
||||
</button>
|
||||
现有确诊:{popupInfo.feature.currentConfirmedCount}
|
||||
</li>
|
||||
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
|
||||
<li>治愈:{popupInfo.feature.curedCount}</li>
|
||||
<li>死亡:{popupInfo.feature.deadCount}</li>
|
||||
</ul>
|
||||
</Popup>
|
||||
)}
|
||||
{data && [
|
||||
<PolygonLayer
|
||||
key={'1'}
|
||||
options={{
|
||||
autoFit: true,
|
||||
fitBoundsOptions: {
|
||||
duration: 0,
|
||||
animate: false,
|
||||
},
|
||||
}}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
scale={{
|
||||
values: {
|
||||
confirmedCount: {
|
||||
type: 'quantile',
|
||||
},
|
||||
},
|
||||
}}
|
||||
active={{
|
||||
option: {
|
||||
color: '#0c2c84',
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
field: 'confirmedCount',
|
||||
values: [
|
||||
'#732200',
|
||||
'#CC3D00',
|
||||
'#FF6619',
|
||||
'#FF9466',
|
||||
'#FFC1A6',
|
||||
'#FCE2D7',
|
||||
].reverse(),
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
margin: 0,
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert('test');
|
||||
}}
|
||||
value="点击"
|
||||
>
|
||||
点击
|
||||
</button>
|
||||
现有确诊:{popupInfo.feature.currentConfirmedCount}
|
||||
</li>
|
||||
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
|
||||
<li>治愈:{popupInfo.feature.curedCount}</li>
|
||||
<li>死亡:{popupInfo.feature.deadCount}</li>
|
||||
</ul>
|
||||
</Popup>
|
||||
)}
|
||||
{data && [
|
||||
<PolygonLayer
|
||||
key={'1'}
|
||||
options={{
|
||||
autoFit: true,
|
||||
fitBoundsOptions: {
|
||||
duration: 0,
|
||||
animate: false,
|
||||
},
|
||||
}}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
scale={{
|
||||
values: {
|
||||
confirmedCount: {
|
||||
type: 'quantile',
|
||||
},
|
||||
},
|
||||
}}
|
||||
active={{
|
||||
option: {
|
||||
color: '#0c2c84',
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
field: 'confirmedCount',
|
||||
values: [
|
||||
'#732200',
|
||||
'#CC3D00',
|
||||
'#FF6619',
|
||||
'#FF9466',
|
||||
'#FFC1A6',
|
||||
'#FCE2D7',
|
||||
].reverse(),
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="click" handler={showPopup} />
|
||||
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
|
||||
</PolygonLayer>,
|
||||
,
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
size={{
|
||||
values: 0.6,
|
||||
}}
|
||||
color={{
|
||||
values: '#aaa',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
</AMapScene>
|
||||
<LayerEvent type="click" handler={showPopup} />
|
||||
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
|
||||
</PolygonLayer>,
|
||||
,
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
size={{
|
||||
values: 0.6,
|
||||
}}
|
||||
color={{
|
||||
values: '#aaa',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
</AMapScene>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
tnpm dist-tag add @antv/l7-component@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-core@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-layers@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-map@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-maps@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-renderer@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-scene@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-source@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-three@2.6.20 beta
|
||||
tnpm dist-tag add @antv/l7-utils@2.6.20 beta
|
Loading…
Reference in New Issue