mirror of https://gitee.com/antv-l7/antv-l7
Shihui dev (#811)
* feat: add performance demo * style: lint style * style: lint style * feat: add getModelMatrix into viewport * feat: 新增地球模式 （初步构建） * feat: 完善地球交互 * style: lint style * feat: 调整地球图层缩放的方向 * style: lint style * feat: 增加地球模式的 pointLayer/fill 图层 * style: lint style * feat: 增加地球、太阳的简单运动系统，优化部分代码结构 * fix: 修复时间点击出错 * style: lint style * fix: 修复地图 panBy 方法参数错误 * style: lint style * feat: pointLayer/cylinder 圆柱兼容地球模式 * style: lint style * feat: 修复 pointLayer/fill 在拾取是破面严重的情况 * style: lint style * feat: 增加 arc 弧度调节 * feat: 增加 lineLayer/arc3d 兼容地球模式 * style: lint style * feat: 增加地球图层 - 大气层 * style: lint style * feat: 增加设置可视化层背景色的能力 * style: lint style * feat: 增加地球外发光效果 * style: lint style * feat: 允许用户不使用 layer 的 source 方法 - 地球模式下光晕图层不需要传数据 * style: lint style * feat: 调整光晕的 shader 计算 * feat: 调整地球大气层的渲染层级 * style: lint style * feat: 调整案例 * style: lint style * feat: 增加地球图层的默认参数、调整部分代码 * style: lint style * feat: imageTile developinging * style: lint style * feat: 新增图片瓦片地图 * fix: 修复 amap2 新增样式导致的 marker 失效 * feat: 修复 amap2 的 amap-maps 新增 z-index=0; 引发的marker 显示层级失效 * feat: amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效 * style: lint style * feat: 补全瓦片地图中的类型引用 * style: lint style * feat: 增加 demo * style: lint style * feat: 修复 varying 传递 float 总数在部分终端设备 ios13 上突破限制的问题 * feat: add stoty demo * style: lint style * feat: 调整 aspace demo * feat: 调整 aspace demo * style: lint style * feat: 调整 demo * feat: 补充依赖 * chore: update version 2.5.39 -> 2.5.40 * feat: 新增 arcmini layer，增加拖拽时的拾取优化（地图拖拽时取消拾取） * feat: 增加注释
This commit is contained in:
YiQianYao
GitHub
parent
43aafd9e3c
commit
07364c10c3
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"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.5.39",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
|
|||
|
|
@ -140,7 +140,14 @@ export default class PickingService implements IPickingService {
|
|||
return features;
|
||||
}
|
||||
private async pickingAllLayer(target: IInteractionTarget) {
|
||||
if (this.alreadyInPicking || this.layerService.alreadyInRendering) {
|
||||
if (
|
||||
// TODO: this.alreadyInPicking 避免多次重复拾取
|
||||
this.alreadyInPicking ||
|
||||
// TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
|
||||
this.layerService.alreadyInRendering ||
|
||||
// TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作
|
||||
this.layerService.isMapDragging()
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.alreadyInPicking = true;
|
||||
|
|
|
|||
|
|
@ -384,5 +384,6 @@ export interface ILayerService {
|
|||
updateRenderOrder(): void;
|
||||
renderLayers(type?: string): void;
|
||||
getOESTextureFloat(): boolean;
|
||||
isMapDragging(): boolean;
|
||||
destroy(): void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,6 +162,16 @@ export default class LayerService implements ILayerService {
|
|||
return this.renderService.extensionObject.OES_texture_float;
|
||||
}
|
||||
|
||||
// TODO: 判断地图是否正在被拖动
|
||||
public isMapDragging() {
|
||||
return this.mapService.dragging;
|
||||
}
|
||||
|
||||
private runRender() {
|
||||
this.renderLayers();
|
||||
this.layerRenderID = requestAnimationFrame(this.runRender.bind(this));
|
||||
}
|
||||
|
||||
// 渲染检测
|
||||
private renderTest(renderType: string | undefined): boolean {
|
||||
const now = new Date().getTime();
|
||||
|
|
@ -174,8 +184,9 @@ export default class LayerService implements ILayerService {
|
|||
if (renderType) {
|
||||
switch (renderType) {
|
||||
case 'picking':
|
||||
// return false;
|
||||
// TODO: picking 类型的渲染事件
|
||||
// 若是上次触发为地图或动画触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染
|
||||
// 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染
|
||||
if (
|
||||
this.lastRenderType === 'mapRender' ||
|
||||
this.lastRenderType === 'animate'
|
||||
|
|
@ -192,6 +203,7 @@ export default class LayerService implements ILayerService {
|
|||
return true;
|
||||
}
|
||||
case 'animate':
|
||||
// return false;
|
||||
if (this.lastRenderType === 'mapRender') {
|
||||
this.lastRenderType = 'animate';
|
||||
return false;
|
||||
|
|
@ -225,11 +237,6 @@ export default class LayerService implements ILayerService {
|
|||
});
|
||||
}
|
||||
|
||||
private runRender() {
|
||||
this.renderLayers('animate');
|
||||
this.layerRenderID = requestAnimationFrame(this.runRender.bind(this));
|
||||
}
|
||||
|
||||
private stopRender() {
|
||||
cancelAnimationFrame(this.layerRenderID);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export interface IMapWrapper {
|
|||
export interface IMapService<RawMap = {}> {
|
||||
version?: string;
|
||||
map: RawMap;
|
||||
dragging: boolean;
|
||||
bgColor: string;
|
||||
setBgColor(color: string): void;
|
||||
init(): void;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,12 +25,12 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-layers": "^2.5.39",
|
||||
"@antv/l7-maps": "^2.5.39",
|
||||
"@antv/l7-scene": "^2.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/l7-component": "^2.5.40",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-layers": "^2.5.40",
|
||||
"@antv/l7-maps": "^2.5.40",
|
||||
"@antv/l7-scene": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.5.39';
|
||||
const version = '2.5.40';
|
||||
export { version };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,9 +25,10 @@
|
|||
"dependencies": {
|
||||
"@antv/geo-coord": "^1.0.8",
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-source": "^2.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/geo-coord": "^1.0.8",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-source": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.2.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
|
|||
line: {},
|
||||
arc3d: { blend: 'additive' },
|
||||
arc: { blend: 'additive' },
|
||||
arcmini: { blend: 'additive' },
|
||||
greatcircle: { blend: 'additive' },
|
||||
};
|
||||
return defaultConfig[type];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IAnimateOption,
|
||||
IEncodeFeature,
|
||||
ILayerConfig,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
} from '@antv/l7-core';
|
||||
|
||||
import { rgb2arr } from '@antv/l7-utils';
|
||||
import { isNumber } from 'lodash';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { ILineLayerStyleOptions } from '../../core/interface';
|
||||
import { LineArcTriangulation } from '../../core/triangulation';
|
||||
import line_arcmini_frag from '../shaders/line_arcmini_frag.glsl';
|
||||
import line_arcmini_vert from '../shaders/line_arcmini_vert.glsl';
|
||||
|
||||
export default class ArcMiniModel extends BaseModel {
|
||||
public getUninforms(): IModelUniform {
|
||||
const {
|
||||
opacity,
|
||||
sourceColor,
|
||||
targetColor,
|
||||
forward = true,
|
||||
segmentNumber = 30,
|
||||
thetaOffset = 0.314,
|
||||
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
|
||||
|
||||
// 转化渐变色
|
||||
let useLinearColor = 0; // 默认不生效
|
||||
let sourceColorArr = [0, 0, 0, 0];
|
||||
let targetColorArr = [0, 0, 0, 0];
|
||||
if (sourceColor && targetColor) {
|
||||
sourceColorArr = rgb2arr(sourceColor);
|
||||
targetColorArr = rgb2arr(targetColor);
|
||||
useLinearColor = 1;
|
||||
}
|
||||
|
||||
return {
|
||||
u_thetaOffset: thetaOffset,
|
||||
|
||||
u_opacity: isNumber(opacity) ? opacity : 1.0,
|
||||
|
||||
segmentNumber,
|
||||
u_blur: 0.9,
|
||||
u_lineDir: forward ? 1 : -1,
|
||||
|
||||
// 渐变色支持参数
|
||||
u_linearColor: useLinearColor,
|
||||
u_sourceColor: sourceColorArr,
|
||||
u_targetColor: targetColorArr,
|
||||
};
|
||||
}
|
||||
|
||||
public getAnimateUniforms(): IModelUniform {
|
||||
const { animateOption } = this.layer.getLayerConfig() as ILayerConfig;
|
||||
return {
|
||||
u_aimate: this.animateOption2Array(animateOption as IAnimateOption),
|
||||
u_time: this.layer.getLayerAnimateTime(),
|
||||
};
|
||||
}
|
||||
|
||||
public initModels(): IModel[] {
|
||||
return this.buildModels();
|
||||
}
|
||||
|
||||
public buildModels(): IModel[] {
|
||||
const {
|
||||
segmentNumber = 30,
|
||||
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
|
||||
|
||||
return [
|
||||
this.layer.buildLayerModel({
|
||||
moduleName: 'arc2dminiline',
|
||||
vertexShader: line_arcmini_vert,
|
||||
fragmentShader: line_arcmini_frag,
|
||||
triangulation: LineArcTriangulation,
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
segmentNumber,
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
protected registerBuiltinAttributes() {
|
||||
// point layer size;
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'size',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Size',
|
||||
buffer: {
|
||||
// give the WebGL driver a hint that this buffer may change
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 1,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'instance', // 弧线起始点信息
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Instance',
|
||||
buffer: {
|
||||
usage: gl.STATIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 4,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
return [vertex[3], vertex[4], vertex[5], vertex[6]];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,19 @@
|
|||
import ArcModel from './arc';
|
||||
import Arc3DModel from './arc_3d';
|
||||
import ArcMiniModel from './arcmini';
|
||||
import GreatCircleModel from './great_circle';
|
||||
import LineModel from './line';
|
||||
|
||||
export type LineModelType = 'arc' | 'arc3d' | 'greatcircle' | 'line';
|
||||
export type LineModelType =
|
||||
| 'arc'
|
||||
| 'arcmini'
|
||||
| 'arc3d'
|
||||
| 'greatcircle'
|
||||
| 'line';
|
||||
|
||||
const LineModels: { [key in LineModelType]: any } = {
|
||||
arc: ArcModel,
|
||||
arcmini: ArcMiniModel,
|
||||
arc3d: Arc3DModel,
|
||||
greatcircle: GreatCircleModel,
|
||||
line: LineModel,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
#define LineTypeSolid 0.0
|
||||
#define Animate 0.0
|
||||
|
||||
uniform float u_opacity;
|
||||
uniform float u_blur : 0.9;
|
||||
// varying vec2 v_normal;
|
||||
varying vec4 v_color;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
||||
|
||||
uniform float segmentNumber;
|
||||
varying float v_distance_ratio;
|
||||
|
||||
uniform float u_linearColor: 0;
|
||||
uniform vec4 u_sourceColor;
|
||||
uniform vec4 u_targetColor;
|
||||
|
||||
#pragma include "picking"
|
||||
|
||||
void main() {
|
||||
|
||||
// 设置弧线的底色
|
||||
if(u_linearColor == 1.0) { // 使用渐变颜色
|
||||
gl_FragColor = mix(u_sourceColor, u_targetColor, v_distance_ratio);
|
||||
} else { // 使用 color 方法传入的颜色
|
||||
gl_FragColor = v_color;
|
||||
}
|
||||
|
||||
|
||||
gl_FragColor.a *= u_opacity;
|
||||
|
||||
if(u_aimate.x == Animate) {
|
||||
float animateSpeed = u_time / u_aimate.y; // 运动速度
|
||||
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
|
||||
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
|
||||
// alpha = smoothstep(0., 1., alpha);
|
||||
alpha = clamp(alpha, 0.0, 1.0);
|
||||
gl_FragColor.a *= alpha;
|
||||
}
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
#define LineTypeSolid 0.0
|
||||
#define LineTypeDash 1.0
|
||||
#define Animate 0.0
|
||||
|
||||
attribute vec4 a_Color;
|
||||
attribute vec3 a_Position;
|
||||
attribute vec4 a_Instance;
|
||||
attribute float a_Size;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
uniform mat4 u_Mvp;
|
||||
uniform float segmentNumber;
|
||||
uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
||||
varying vec4 v_color;
|
||||
// varying vec2 v_normal;
|
||||
|
||||
uniform float u_lineDir: 1.0;
|
||||
|
||||
// 偏移量
|
||||
uniform float u_thetaOffset: 0.314;
|
||||
|
||||
uniform float u_opacity: 1.0;
|
||||
varying float v_distance_ratio;
|
||||
|
||||
#pragma include "projection"
|
||||
#pragma include "project"
|
||||
#pragma include "picking"
|
||||
|
||||
float bezier3(vec3 arr, float t) {
|
||||
float ut = 1. - t;
|
||||
return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t;
|
||||
}
|
||||
vec2 midPoint(vec2 source, vec2 target) {
|
||||
vec2 center = target - source;
|
||||
float r = length(center);
|
||||
float theta = atan(center.y, center.x);
|
||||
float thetaOffset = u_thetaOffset;
|
||||
float r2 = r / 2.0 / cos(thetaOffset);
|
||||
float theta2 = theta + thetaOffset;
|
||||
vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y);
|
||||
if(u_lineDir == 1.0) { // 正向
|
||||
return mid;
|
||||
} else { // 逆向
|
||||
// (mid + vmin)/2 = (s + t)/2
|
||||
vec2 vmid = source + target - mid;
|
||||
return vmid;
|
||||
}
|
||||
// return mid;
|
||||
}
|
||||
float getSegmentRatio(float index) {
|
||||
return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
|
||||
}
|
||||
vec2 interpolate (vec2 source, vec2 target, float t) {
|
||||
// if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
|
||||
vec2 mid = midPoint(source, target);
|
||||
vec3 x = vec3(source.x, mid.x, target.x);
|
||||
vec3 y = vec3(source.y, mid.y, target.y);
|
||||
return vec2(bezier3(x ,t), bezier3(y,t));
|
||||
}
|
||||
vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
|
||||
// normalized direction of the line
|
||||
vec2 dir_screenspace = normalize(line_clipspace);
|
||||
// rotate by 90 degrees
|
||||
dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
|
||||
vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;
|
||||
return offset;
|
||||
}
|
||||
vec2 getNormal(vec2 line_clipspace, float offset_direction) {
|
||||
// normalized direction of the line
|
||||
vec2 dir_screenspace = normalize(line_clipspace);
|
||||
// rotate by 90 degrees
|
||||
dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
|
||||
return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction);
|
||||
}
|
||||
|
||||
void main() {
|
||||
v_color = a_Color;
|
||||
|
||||
vec2 source = a_Instance.rg; // 起始点
|
||||
vec2 target = a_Instance.ba; // 终点
|
||||
float segmentIndex = a_Position.x;
|
||||
float segmentRatio = getSegmentRatio(segmentIndex);
|
||||
|
||||
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
|
||||
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
|
||||
|
||||
v_distance_ratio = segmentIndex / segmentNumber;
|
||||
|
||||
if(u_aimate.x == Animate && u_lineDir != 1.0) {
|
||||
v_distance_ratio = 1.0 - v_distance_ratio;
|
||||
}
|
||||
|
||||
vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0));
|
||||
vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0));
|
||||
// v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
|
||||
//unProjCustomCoord
|
||||
|
||||
vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
|
||||
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
|
||||
}
|
||||
setPickingColor(a_PickingColor);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-map",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"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.5.39",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@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.5.39",
|
||||
"version": "2.5.40",
|
||||
"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.5.39",
|
||||
"@antv/l7-map": "^2.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-map": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@types/amap-js-api": "^1.4.6",
|
||||
"@types/mapbox-gl": "^1.11.2",
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@ export default class AMapService
|
|||
*/
|
||||
public map: AMap.Map & IAMapInstance;
|
||||
|
||||
// TODO: 判断地图是否正在拖拽
|
||||
public dragging: boolean = false;
|
||||
|
||||
// 背景色
|
||||
public bgColor: string = 'rgba(0, 0, 0, 0)';
|
||||
|
||||
|
|
@ -403,6 +406,16 @@ export default class AMapService
|
|||
}
|
||||
});
|
||||
|
||||
// TODO: 判断地图是否正在被拖拽
|
||||
this.map.on('dragstart', () => {
|
||||
this.dragging = true;
|
||||
return '';
|
||||
});
|
||||
this.map.on('dragend', () => {
|
||||
this.dragging = false;
|
||||
return '';
|
||||
});
|
||||
|
||||
this.viewport = new Viewport();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,9 @@ export default class AMapService
|
|||
*/
|
||||
public map: AMap.Map & IAMapInstance;
|
||||
|
||||
// TODO: 判断地图是否正在拖拽
|
||||
public dragging: boolean = false;
|
||||
|
||||
/**
|
||||
* 用于 customCooords 数据的计算
|
||||
*/
|
||||
|
|
@ -494,6 +497,16 @@ export default class AMapService
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: 判断地图是否正在被拖拽
|
||||
this.map.on('dragstart', () => {
|
||||
this.dragging = true;
|
||||
return '';
|
||||
});
|
||||
this.map.on('dragend', () => {
|
||||
this.dragging = false;
|
||||
return '';
|
||||
});
|
||||
}
|
||||
|
||||
public exportMap(type: 'jpg' | 'png'): string {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@ export default class L7EarthService implements IEarthService<Map> {
|
|||
public version: string = Version.GLOBEL;
|
||||
public map: Map;
|
||||
|
||||
// TODO: 判断地图是否正在拖拽
|
||||
public dragging: boolean = false;
|
||||
|
||||
// 背景色
|
||||
public bgColor: string = '#000';
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@ export default class L7MapService implements IMapService<Map> {
|
|||
public version: string = Version.L7MAP;
|
||||
public map: Map;
|
||||
|
||||
// TODO: 判断地图是否正在拖拽
|
||||
public dragging: boolean = false;
|
||||
|
||||
// 背景色
|
||||
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
|
||||
|
||||
|
|
@ -280,6 +283,16 @@ export default class L7MapService implements IMapService<Map> {
|
|||
this.map.on('load', this.handleCameraChanged);
|
||||
this.map.on('move', this.handleCameraChanged);
|
||||
|
||||
// TODO: 判断地图是否正在被拖拽
|
||||
this.map.on('dragstart', () => {
|
||||
this.dragging = true;
|
||||
return '';
|
||||
});
|
||||
this.map.on('dragend', () => {
|
||||
this.dragging = false;
|
||||
return '';
|
||||
});
|
||||
|
||||
// 不同于高德地图，需要手动触发首次渲染
|
||||
this.handleCameraChanged();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ export default class MapboxService
|
|||
public version: string = Version.MAPBOX;
|
||||
public map: Map & IMapboxInstance;
|
||||
|
||||
// TODO: 判断地图是否正在拖拽
|
||||
public dragging: boolean = false;
|
||||
|
||||
// 背景色
|
||||
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
|
||||
|
||||
|
|
@ -363,6 +366,16 @@ export default class MapboxService
|
|||
this.map.on('load', this.handleCameraChanged);
|
||||
this.map.on('move', this.handleCameraChanged);
|
||||
|
||||
// TODO: 判断地图是否正在被拖拽
|
||||
this.map.on('dragstart', () => {
|
||||
this.dragging = true;
|
||||
return '';
|
||||
});
|
||||
this.map.on('dragend', () => {
|
||||
this.dragging = false;
|
||||
return '';
|
||||
});
|
||||
|
||||
// 不同于高德地图，需要手动触发首次渲染
|
||||
this.handleCameraChanged();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"l7regl": "^0.0.14",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-layers": "^2.5.39",
|
||||
"@antv/l7-maps": "^2.5.39",
|
||||
"@antv/l7-renderer": "^2.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/l7-component": "^2.5.40",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-layers": "^2.5.40",
|
||||
"@antv/l7-maps": "^2.5.40",
|
||||
"@antv/l7-renderer": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"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.5.39",
|
||||
"@antv/l7-utils": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-utils": "^2.5.40",
|
||||
"@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.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "three for L7 ",
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.5.39",
|
||||
"@antv/l7-layers": "^2.5.39",
|
||||
"@antv/l7-scene": "^2.5.39",
|
||||
"@antv/l7-core": "^2.5.40",
|
||||
"@antv/l7-layers": "^2.5.40",
|
||||
"@antv/l7-scene": "^2.5.40",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.5.39",
|
||||
"version": "2.5.40",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene } from '@antv/l7';
|
||||
import { PointLayer, LineLayer } from '@antv/l7-layers';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class PointTest extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [110.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 4,
|
||||
}),
|
||||
});
|
||||
|
||||
let address =
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/3f2f9284-3fb1-4838-8baa-6ffd06738fcd.csv';
|
||||
fetch(address)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const lineLayer = new LineLayer({
|
||||
autoFit: true,
|
||||
blend: 'normal',
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'f_lon',
|
||||
y: 'f_lat',
|
||||
x1: 't_lon',
|
||||
y1: 't_lat',
|
||||
},
|
||||
})
|
||||
.shape('arcmini')
|
||||
.size(2)
|
||||
.color('rgb(13,64,140)')
|
||||
.style({
|
||||
segmentNumber: 30,
|
||||
})
|
||||
.select({
|
||||
color: '#ff0',
|
||||
})
|
||||
.active({
|
||||
color: '#ff0',
|
||||
});
|
||||
// .animate(true)
|
||||
|
||||
scene.addLayer(lineLayer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
// @ts-nocheck
|
||||
// @ts-ignore
|
||||
import { Scene } from '@antv/l7';
|
||||
import { PointLayer } from '@antv/l7-layers';
|
||||
|
|
@ -169,32 +170,6 @@ export default class PointTest extends React.Component {
|
|||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer);
|
||||
// @ts-ignore
|
||||
// layer.layerService.startAnimate2(stats)
|
||||
|
||||
// ILayerService
|
||||
// ---
|
||||
// startAnimate2(state: any): void;
|
||||
// ---
|
||||
// LayerService
|
||||
// ---
|
||||
// private stats: any;
|
||||
// ---
|
||||
// @ts-ignore
|
||||
// public startAnimate2(stats) {
|
||||
// // @ts-ignore
|
||||
// this.stats = stats
|
||||
// if (this.animateInstanceCount++ === 0) {
|
||||
// this.clock.start();
|
||||
// this.runRender();
|
||||
// }
|
||||
// }
|
||||
// public runRender() {
|
||||
// // @ts-ignore
|
||||
// this.stats.update()
|
||||
// this.renderLayers();
|
||||
// this.layerRenderID = requestAnimationFrame(this.runRender.bind(this));
|
||||
// }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/react';
|
|||
import * as React from 'react';
|
||||
|
||||
import PointTest from './components/Map';
|
||||
import BigLine from './components/BigLine'
|
||||
// @ts-ignore
|
||||
storiesOf('地图性能检测', module)
|
||||
.add('点', () => <PointTest />)
|
||||
.add('BigLine', () => <BigLine />)
|
||||
|
|
|
|||
Loading…
Reference in New Issue