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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
shihui 2021-12-02 16:24:10 +08:00
parent 3e04a2af37 f01deaa953
commit 602fb6704f
38 changed files with 447 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.5.59",
"version": "2.6.2",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.5.59",
"version": "2.6.2",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.5.59",
"version": "2.6.2",
"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.59",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

4
packages/core/src/services/interaction/PickingService.ts
View File

@ -161,7 +161,9 @@ export default class PickingService implements IPickingService {
// TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
this.layerService.alreadyInRendering ||
// TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作
this.layerService.isMapDragging()
this.layerService.isMapDragging() ||
// TODO: 判断当前 是都进行 shader pick 拾取判断
!this.layerService.getShaderPickStat()
) {
return;
}

8
packages/core/src/services/layer/ILayerService.ts
View File

@ -136,6 +136,8 @@ export interface ILayer {
*/
threeRenderService?: any;
getShaderPickStat: () => boolean;
needPick(type: string): boolean;
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
getContainer(): Container;
@ -373,6 +375,11 @@ export interface ILayerService {
clock: Clock;
alreadyInRendering: boolean;
sceneService?: any;
// 控制着色器颜色拾取计算
enableShaderPick: () => void;
disableShaderPick: () => void;
getShaderPickStat: () => boolean;
add(layer: ILayer): void;
initLayers(): void;
startAnimate(): void;
@ -386,5 +393,6 @@ export interface ILayerService {
renderLayers(type?: string): void;
getOESTextureFloat(): boolean;
isMapDragging(): boolean;
destroy(): void;
}

16
packages/core/src/services/layer/LayerService.ts
View File

@ -25,6 +25,9 @@ export default class LayerService implements ILayerService {
private animateInstanceCount: number = 0;
// TODO: 是否开启 shader 中的颜色拾取计算
private shaderPicking: boolean = true;
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@ -163,6 +166,19 @@ export default class LayerService implements ILayerService {
return this.mapService.dragging;
}
// 控制着色器颜色拾取计算
public enableShaderPick() {
this.shaderPicking = true;
}
public disableShaderPick() {
this.shaderPicking = false;
}
public getShaderPickStat() {
return this.shaderPicking;
}
private runRender() {
this.renderLayers();
this.layerRenderID = $window.requestAnimationFrame(

11
packages/core/src/shaders/picking.frag.glsl
View File

@ -1,7 +1,7 @@
varying vec4 v_PickingResult;
uniform vec4 u_HighlightColor : [0, 0, 0, 0];
uniform float u_PickingStage : 0.0;
uniform float u_Dragging;
uniform float u_shaderPick;
#define PICKING_NONE 0.0
#define PICKING_ENCODE 1.0
@ -44,6 +44,11 @@ vec4 filterPickingColor(vec4 color) {
*/
vec4 filterColor(vec4 color) {
// TODO: 过滤多余的 shader 计算
// if(u_Dragging > 0.0) return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
return filterPickingColor(filterHighlightColor(color));
// return color;
if(u_shaderPick < 0.5) {
return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
} else {
return filterPickingColor(filterHighlightColor(color));
}
}

4
packages/core/src/shaders/picking.vert.glsl
View File

@ -6,6 +6,7 @@ uniform vec4 u_HighlightColor : [0, 0, 0, 0];
uniform float u_PickingStage : 0.0;
uniform float u_PickingThreshold : 1.0;
uniform float u_PickingBuffer: 0.0;
uniform float u_shaderPick;
#define PICKING_NONE 0.0
#define PICKING_ENCODE 1.0
@ -20,6 +21,9 @@ bool isVertexPicked(vec3 vertexColor) {
}
void setPickingColor(vec3 pickingColor) {
if(u_shaderPick < 0.5) {
return;
}
// compares only in highlight stage
v_PickingResult.a = float((u_PickingStage == PICKING_HIGHLIGHT) && isVertexPicked(pickingColor));

14
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.5.59",
"version": "2.6.2",
"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.59",
"@antv/l7-core": "^2.5.59",
"@antv/l7-layers": "^2.5.59",
"@antv/l7-maps": "^2.5.59",
"@antv/l7-scene": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-component": "^2.6.2",
"@antv/l7-core": "^2.6.2",
"@antv/l7-layers": "^2.6.2",
"@antv/l7-maps": "^2.6.2",
"@antv/l7-scene": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.5.59';
const version = '2.6.2';
export { version };

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.59",
"version": "2.6.2",
"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.5.59",
"@antv/l7-source": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-source": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

4
packages/layers/src/core/BaseLayer.ts
View File

@ -1009,6 +1009,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
}
public getShaderPickStat() {
return this.layerService.getShaderPickStat();
}
/**
* 继承空方法
* @param time

1
packages/layers/src/line/shaders/line_arcmini_frag.glsl
View File

@ -38,5 +38,4 @@ void main() {
alpha = clamp(alpha, 0.0, 1.0);
gl_FragColor.a *= alpha;
}
gl_FragColor = filterColor(gl_FragColor);
}

1
packages/layers/src/line/shaders/line_arcmini_vert.glsl
View File

@ -101,5 +101,4 @@ void main() {
} else {
gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
}
setPickingColor(a_PickingColor);
}

2
packages/layers/src/plugins/ShaderUniformPlugin.ts
View File

@ -79,7 +79,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
// u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
// TODO: 当前地图是否在拖动
u_Dragging: Number(this.mapService.dragging),
u_shaderPick: Number(layer.getShaderPickStat()),
});
});

1
packages/layers/src/point/shaders/fill_frag.glsl
View File

@ -105,5 +105,6 @@ void main() {
}
gl_FragColor = filterColor(gl_FragColor);
gl_FragColor.rgb *= gl_FragColor.a;
}

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.59",
"version": "2.6.2",
"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.59",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

1
packages/map/src/camera.ts
View File

@ -710,6 +710,7 @@ export default class Camera extends EventEmitter {
if (this.easeId && easeId && this.easeId === easeId) {
return;
}
// @ts-ignore
delete this.easeId;
const wasZooming = this.zooming;

6
packages/map/src/geo/transform.ts
View File

@ -565,10 +565,12 @@ export default class Transform {
// unproject two points to get a line and then find the point on that
// line with z=0
const coord0 = new Float32Array([p.x, p.y, 0, 1]);
const coord1 = new Float32Array([p.x, p.y, 1, 1]);
const coord0 = new Float64Array([p.x, p.y, 0, 1]);
const coord1 = new Float64Array([p.x, p.y, 1, 1]);
// @ts-ignore
vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);
// @ts-ignore
vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse);
const w0 = coord0[3];

8
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.5.59",
"version": "2.6.2",
"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.59",
"@antv/l7-map": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-map": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

14
packages/maps/src/amap/map.ts
View File

@ -142,7 +142,8 @@ export default class AMapService
}
public setZoom(zoom: number): void {
return this.map.setZoom(zoom);
// 统一设置 Mapbox 缩放等级
return this.map.setZoom(zoom + 1);
}
public getCenter(options?: ICameraOptions): ILngLat {
@ -359,13 +360,18 @@ export default class AMapService
this.$mapContainer = this.creatAmapContainer(
id as string | HTMLDivElement,
);
const map = new AMap.Map(this.$mapContainer, {
const mapConstructorOptions = {
mapStyle: this.getMapStyle(style as string),
zooms: [minZoom, maxZoom],
viewMode: '3D',
...rest,
});
};
if (mapConstructorOptions.zoom) {
// TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
mapConstructorOptions.zoom += 1;
}
// @ts-ignore
const map = new AMap.Map(this.$mapContainer, mapConstructorOptions);
// 监听地图相机事件
map.on('camerachange', this.handleCameraChanged);
// @ts-ignore

16
packages/maps/src/amap2/map.ts
View File

@ -207,11 +207,13 @@ export default class AMapService
return 'amap2';
}
public getZoom(): number {
return this.map.getZoom();
// 统一返回 Mapbox 缩放等级
return this.map.getZoom() - 1;
}
public setZoom(zoom: number): void {
return this.map.setZoom(zoom);
// 统一设置 Mapbox 缩放等级
return this.map.setZoom(zoom + 1);
}
public getCenter(options?: ICameraOptions): ILngLat {
@ -445,12 +447,18 @@ export default class AMapService
this.$mapContainer = this.creatAmapContainer(
id as string | HTMLDivElement,
);
const map = new AMap.Map(this.$mapContainer, {
const mapConstructorOptions = {
mapStyle: this.getMapStyle(style as string),
zooms: [minZoom, maxZoom],
viewMode: '3D',
...rest,
});
};
if (mapConstructorOptions.zoom) {
// TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
mapConstructorOptions.zoom += 1;
}
// @ts-ignore
const map = new AMap.Map(this.$mapContainer, mapConstructorOptions);
// @ts-ignore
this.map = map;
// 在使用 map.customCoords 的时候必须使用

12
packages/mini/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.5.59",
"version": "2.6.2",
"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.5.59",
"@antv/l7-layers": "^2.5.59",
"@antv/l7-maps": "^2.5.59",
"@antv/l7-scene": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-layers": "^2.6.2",
"@antv/l7-maps": "^2.6.2",
"@antv/l7-scene": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.5.59",
"version": "2.6.2",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

14
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.5.59",
"version": "2.6.2",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.5.59",
"@antv/l7-core": "^2.5.59",
"@antv/l7-layers": "^2.5.59",
"@antv/l7-maps": "^2.5.59",
"@antv/l7-renderer": "^2.5.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-component": "^2.6.2",
"@antv/l7-core": "^2.6.2",
"@antv/l7-layers": "^2.6.2",
"@antv/l7-maps": "^2.6.2",
"@antv/l7-renderer": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

2
packages/scene/src/ILayerManager.ts
View File

@ -1,6 +1,8 @@
import { ILayer } from '@antv/l7-core';
export default interface ILayerManager {
enableShaderPick: () => void;
diasbleShaderPick: () => void;
addLayer(layer: ILayer): void;
getLayers(): ILayer[];

18
packages/scene/src/index.ts
View File

@ -51,6 +51,9 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
*/
class Scene
implements IPostProcessingPassPluggable, IMapController, ILayerManager {
public get map() {
return this.mapService.map;
}
private sceneService: ISceneService;
private mapService: IMapService<unknown>;
private controlService: IControlService;
@ -153,10 +156,6 @@ class Scene
}
}
public get map() {
return this.mapService.map;
}
public setBgColor(color: string) {
this.mapService.setBgColor(color);
}
@ -401,6 +400,16 @@ class Scene
.to(constructor)
.whenTargetNamed(name);
}
// 资源管理
// 控制 shader pick 计算
public enableShaderPick() {
this.layerService.enableShaderPick();
}
public diasbleShaderPick() {
this.layerService.disableShaderPick();
}
private initComponent(id: string | HTMLDivElement) {
this.controlService.init(
@ -419,7 +428,6 @@ class Scene
this.addControl(new Logo({ position: logoPosition }));
}
}
// 资源管理
}
export { Scene };

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.5.59",
"version": "2.6.2",
"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.59",
"@antv/l7-utils": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-utils": "^2.6.2",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

8
packages/three/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.5.59",
"version": "2.6.2",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.5.59",
"@antv/l7-layers": "^2.5.59",
"@antv/l7-scene": "^2.5.59",
"@antv/l7-core": "^2.6.2",
"@antv/l7-layers": "^2.6.2",
"@antv/l7-scene": "^2.6.2",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.5.59",
"version": "2.6.2",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

11
stories/Map/components/mapCenter.tsx
View File

@ -17,13 +17,18 @@ export default class GaodeMapComponent extends React.Component {
map: new GaodeMap({
center: [121.107846, 30.267069],
pitch: 0,
style: 'normal',
// style: 'normal',
zoom: 20,
animateEnable: false,
}),
});
const layer = new PointLayer()
// normal = 'normal',
// additive = 'additive',
// subtractive = 'subtractive',
// min = 'min',
// max = 'max',
// none = 'none',
const layer = new PointLayer({ blend: 'additive' })
.source(
[
{

179
stories/Map/components/plugin.tsx Normal file
View File

@ -0,0 +1,179 @@
// @ts-nocheck
import { PointLayer, Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class AmapPlugin extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [116.47, 39.98],
pitch: 0,
zoom: 12.5,
plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
}),
});
this.scene = scene;
scene.addImage(
'road',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
scene.addImage(
'start',
'https://gw.alipayobjects.com/zos/bmw-prod/1c301f25-9bb8-4e67-8d5c-41117c877caf.svg',
);
scene.addImage(
'end',
'https://gw.alipayobjects.com/zos/bmw-prod/f3db4998-e657-4c46-b5ab-205ddc12031f.svg',
);
scene.addImage(
'busStop',
'https://gw.alipayobjects.com/zos/bmw-prod/54345af2-1d01-43e1-9d11-cd9bb953202c.svg',
);
scene.on('loaded', () => {
window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
scene.map.addControl(new AMap.ToolBar());
var linesearch = new AMap.LineSearch({
pageIndex: 1, //页码，默认值为1
pageSize: 1, //单页显示结果条数，默认值为20，最大值为50
city: '北京', //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
extensions: 'all', //是否返回公交线路详细信息，默认值为『base』
});
//执行公交路线关键字查询
linesearch.search('536', function(status, result) {
//打印状态信息status和结果信息result
const { path, via_stops } = result.lineInfo[0];
const startPoint = [path[0]];
const endpoint = [path[path.length - 1]];
const budStopsData = via_stops.map((stop) => ({
lng: stop.location.lng,
lat: stop.location.lat,
name: stop.name,
}));
const data = [
{
id: '1',
coord: path.map((p) => [p.lng, p.lat]),
},
];
const busLine = new LineLayer({ blend: 'normal' })
.source(data, {
parser: {
type: 'json',
coordinates: 'coord',
},
})
.size(5)
.shape('line')
.color('rgb(99, 166, 242)')
.texture('road')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度
})
.style({
lineTexture: true,
iconStep: 25,
});
scene.addLayer(busLine);
const startPointLayer = new PointLayer({ zIndex: 1 })
.source(startPoint, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('start')
.size(20)
.style({
offsets: [0, 25],
});
scene.addLayer(startPointLayer);
const endPointLayer = new PointLayer({ zIndex: 1 })
.source(endpoint, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('end')
.size(25)
.style({
offsets: [0, 25],
});
scene.addLayer(endPointLayer);
const busStops = new PointLayer()
.source(budStopsData, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('busStop')
.size(13)
.style({
offsets: [20, 0],
});
scene.addLayer(busStops);
const busStopsName = new PointLayer()
.source(budStopsData, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('name', 'text')
.size(12)
.color('#000')
.style({
textAnchor: 'left',
textOffset: [80, 0],
stroke: '#fff',
strokeWidth: 1,
});
scene.addLayer(busStopsName);
});
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

2
stories/Map/map.stories.tsx
View File

@ -63,6 +63,7 @@ import Amap2demo_styleMap from "./components/amap2demo_styleMap"
import Amap2demo_textOffset from "./components/amap2demo_textOffset"
import ShapeUpdate from './components/shapeUpdate'
import AmapPlugin from './components/plugin'
// @ts-ignore
storiesOf('地图方法', module)
@ -129,3 +130,4 @@ storiesOf('地图方法', module)
.add('测试销毁', () => <Amap2demo_destroy/>)
.add('ShapeUpdate', () => <ShapeUpdate/>)
.add('AmapPlugin', () => <AmapPlugin/>)

35
stories/MapPerformance/components/BigLine.tsx
View File

@ -21,7 +21,7 @@ export default class PointTest extends React.Component {
zoom: 5,
}),
});
scene.diasbleShaderPick();
let address =
'https://gw.alipayobjects.com/os/bmw-prod/3f2f9284-3fb1-4838-8baa-6ffd06738fcd.csv';
fetch(address)
@ -43,6 +43,27 @@ export default class PointTest extends React.Component {
.shape('arcmini')
.size(2)
.color('rgb(13,64,140)')
.style({
segmentNumber: 30,
});
// lineLayer2
const lineLayer2 = new LineLayer({
// autoFit: true,
blend: 'normal',
})
.source(data, {
parser: {
type: 'csv',
x: 'f_lon',
y: 'f_lat',
x1: 't_lon',
y1: 't_lat',
},
})
.shape('arc')
.size(2)
.color('rgb(13,64,140)')
.style({
segmentNumber: 30,
})
@ -52,9 +73,19 @@ export default class PointTest extends React.Component {
.active({
color: '#ff0',
});
// .animate(true)
lineLayer2.hide();
// scene.addLayer(lineLayer2);
scene.addLayer(lineLayer);
window.onmousedown = () => {
// lineLayer2.hide()
lineLayer.show();
};
window.onmouseup = () => {
// lineLayer2.show()
lineLayer.hide();
};
});
}

4
stories/MapPerformance/components/Map.tsx
View File

@ -145,8 +145,9 @@ export default class PointTest extends React.Component {
// let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100
// let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000
// let address = 'https://gw.alipayobjects.com/os/bmw-prod/2c37f08b-3fe6-4c68-a699-dc15cfc217f1.json' // 50000
// let address = 'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000
let address =
'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000
'https://gw.alipayobjects.com/os/bmw-prod/577a70fb-fc19-4582-83ed-7cddb7b77645.json'; // 20 0000
fetch(address)
.then((res) => res.json())
.then((data) => {
@ -168,6 +169,7 @@ export default class PointTest extends React.Component {
// .animate(true)
// .active(true);
scene.diasbleShaderPick();
scene.on('loaded', () => {
scene.addLayer(layer);
});

2
stories/React/React.stories.tsx
View File

@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
import * as React from 'react';
import GaodeMapScene from './components/Scene';
import WorldMap from './components/world';
import WorldLayer from './components/worldLayer';
import WorldExtrueMap from './components/world_ncov';
import WorldBubbleMap from './components/world_ncov_bubble';
import WorldBubbleAnimateMap from './components/world_ncov_bubble_animate';
@ -11,6 +12,7 @@ import WorldFillMap from './components/world_ncov_fill';
// @ts-ignore
storiesOf('React', module).add('高德地图', () => <GaodeMapScene />);
storiesOf('React', module).add('世界地图', () => <WorldMap />);
storiesOf('React', module).add('WorldLayer', () => <WorldLayer />);
storiesOf('React', module).add('疫情地图-填充图', () => <WorldFillMap />);
storiesOf('React', module).add('疫情地图-气泡图', () => <WorldBubbleMap />);
storiesOf('React', module).add('疫情地图-3D柱图', () => <WorldColumnMap />);

81
stories/React/components/worldLayer.tsx Normal file
View File

@ -0,0 +1,81 @@
import { Scene } from '@antv/l7';
import { WorldLayer } from '@antv/l7-district';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Country extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
pitch: 0,
style: 'dark',
center: [116.2825, 39.9],
// zoom: 0,
zoom: 3,
// minZoom: 0,
maxZoom: 24,
}),
});
scene.on('loaded', () => {
const Layer = new WorldLayer(scene, {
autoFit: false,
data: [],
geoDataLevel: 2,
joinBy: ['SOC', 'SOC'],
fill: {
color: {
field: 'NAME_CHN',
values: ['rgba(1.0, 0.0, 0.0, 0.5)'],
},
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'NAME_ENG',
padding: [5, 5],
},
popup: {
// enable: true,
enable: false,
Html: (props) => {
return `<span>${props.NAME_CHN}</span>`;
},
},
});
// @ts-ignore
// window.onresize = () => Layer.fillLayer.fitBounds()
// scene.setZoom(4)
// console.log(scene.getZoom())
setTimeout(() => {
console.log('***', scene.getZoom());
}, 1500);
});
this.scene = scene;
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

7
stories/customMap/components/Map.tsx
View File

@ -32,9 +32,9 @@ export default class ScaleComponent extends React.Component {
// canvas: this.el,
map: new Map({
hash: true,
center: [110.19382669582967, 30.258134],
center: [122.2215, 29.8325],
pitch: 0,
zoom: 2,
zoom: 22,
}),
});
scene.addImage(
@ -107,6 +107,7 @@ export default class ScaleComponent extends React.Component {
const layer = new PolygonLayer({
name: '01',
autoFit: true,
})
.source(data)
.size('name', [0, 10000, 50000, 30000, 100000])
@ -124,6 +125,8 @@ export default class ScaleComponent extends React.Component {
opacity: 1.0,
});
scene.addLayer(layer);
window.onresize = () => layer.fitBounds();
});
scene.on('loaded', () => {