mirror of https://gitee.com/antv-l7/antv-l7
commit
8c0e8e741e
|
@ -42,10 +42,16 @@ module.exports = api => {
|
|||
[
|
||||
'@babel/env',
|
||||
{
|
||||
useBuiltIns: isCDNBundle ? 'usage' : false,
|
||||
// https://babeljs.io/docs/en/babel-preset-env#usebuiltins
|
||||
useBuiltIns: 'usage',
|
||||
corejs: '3.0.0',
|
||||
// set `modules: false` when building CDN bundle, let rollup do commonjs works
|
||||
// @see https://github.com/rollup/rollup-plugin-babel#modules
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto'
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto',
|
||||
targets: {
|
||||
chrome: 58,
|
||||
ie: 11
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
|
@ -54,12 +60,14 @@ module.exports = api => {
|
|||
development: isCommonJS
|
||||
}
|
||||
],
|
||||
'@babel/preset-typescript',
|
||||
'@babel/preset-typescript'
|
||||
],
|
||||
ignore: [ /[\/\\]core-js/, /@babel[\/\\]runtime/ ],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
'@babel/plugin-syntax-async-generators',
|
||||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
|
|
|
@ -5,5 +5,4 @@ order: 7
|
|||
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
[Marker 文档](../../component)
|
||||
|
|
|
@ -25,9 +25,8 @@ addImage()
|
|||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同,比如不能设置 circle
|
||||
|
||||
```
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同,比如不能设置 circle
|
||||
|
||||
符号图需要把shape设置成图片的id,同样符号图shape也支持数据映射
|
||||
|
||||
|
|
|
@ -45,9 +45,9 @@ const scene = new Scene({
|
|||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
token:'xxxx - token'
|
||||
})
|
||||
rotation: 19.313180925794313,
|
||||
token: 'xxxx - token',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
@ -45,9 +45,9 @@ const scene = new Scene({
|
|||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
token:'xxxx - token'
|
||||
})
|
||||
rotation: 19.313180925794313,
|
||||
token: 'xxxx - token',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
@ -27,4 +27,10 @@ const scene = new Scene({
|
|||
|
||||
离线,无token使用
|
||||
|
||||
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="worldmap"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
|
|
@ -8,7 +8,7 @@ order: 2
|
|||
|
||||
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
|
||||
|
||||
😃不需要使用mapbox token 拿来就用,不要注册mapbox账户
|
||||
不需要使用mapbox token 也不需要注册mapbox账户
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
|
@ -26,4 +26,10 @@ const scene = new Scene({
|
|||
|
||||
离线,无token使用
|
||||
|
||||
<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="worldmap"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// Data Source https://busrouter.sg/visualization/
|
||||
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// Data Source https://busrouter.sg/visualization/
|
||||
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// Data Source https://busrouter.sg/visualization/
|
||||
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"name": "l7",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -13,6 +14,8 @@
|
|||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.6.0",
|
||||
"@babel/plugin-syntax-async-generators": "^7.7.4",
|
||||
"@babel/plugin-transform-runtime": "^7.7.6",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/preset-typescript": "^7.3.3",
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.21",
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/distance": "^6.0.1",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
"element-resize-event": "^3.0.3",
|
||||
|
|
|
@ -60,7 +60,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
|
|||
enableSelect: false,
|
||||
highlightColor: 'red',
|
||||
selectColor: 'blue',
|
||||
enableTAA: true,
|
||||
enableTAA: false,
|
||||
jitterScale: 1,
|
||||
enableLighting: false,
|
||||
};
|
||||
|
|
|
@ -52,7 +52,7 @@ export interface ILayerModelInitializationOptions {
|
|||
export interface ILayerModel {
|
||||
render(): void;
|
||||
getUninforms(): IModelUniform;
|
||||
getBlend(): IBlendOptions;
|
||||
getDefaultStyle(): unknown;
|
||||
buildModels(): IModel[];
|
||||
}
|
||||
export interface IModelUniform {
|
||||
|
|
|
@ -25,9 +25,11 @@
|
|||
"@antv/l7-core": "^2.0.0-beta.21",
|
||||
"@antv/l7-source": "^2.0.0-beta.21",
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
"@types/d3-color": "^1.2.2",
|
||||
"core-js": "3",
|
||||
"d3-array": "^2.3.1",
|
||||
"d3-color": "^1.4.0",
|
||||
"d3-scale": "^3.1.0",
|
||||
|
|
|
@ -221,7 +221,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
public init() {
|
||||
// 设置配置项
|
||||
const sceneId = this.container.get<string>(TYPES.SceneID);
|
||||
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
|
||||
this.configService.setLayerConfig(sceneId, this.id, {});
|
||||
|
||||
// 全局容器服务
|
||||
this.iconService = this.container.get<IIconService>(TYPES.IIconService);
|
||||
|
@ -298,7 +298,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
this.inited = true;
|
||||
|
||||
this.hooks.afterInit.call();
|
||||
|
||||
// 更新 module 样式
|
||||
this.updateLayerConfig({
|
||||
...this.rawConfig,
|
||||
...(this.getDefaultConfig() as object),
|
||||
});
|
||||
this.buildModels();
|
||||
// 触发初始化完成事件;
|
||||
this.emit('inited');
|
||||
|
@ -714,6 +718,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
protected getModelType(): unknown {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
protected getDefaultConfig() {
|
||||
return {};
|
||||
}
|
||||
private splitValuesAndCallbackInAttribute(
|
||||
valuesOrCallback?: unknown[],
|
||||
defaultValues?: unknown[],
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
IGlobalConfigService,
|
||||
IIconService,
|
||||
ILayer,
|
||||
ILayerConfig,
|
||||
ILayerModel,
|
||||
IMapService,
|
||||
IModel,
|
||||
|
@ -20,7 +21,8 @@ import {
|
|||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
import { BlendTypes } from '../utils/blend';
|
||||
export default class BaseModel implements ILayerModel {
|
||||
export default class BaseModel<ChildLayerStyleOptions = {}>
|
||||
implements ILayerModel {
|
||||
public triangulation: Triangulation;
|
||||
|
||||
protected layer: ILayer;
|
||||
|
@ -60,6 +62,9 @@ export default class BaseModel implements ILayerModel {
|
|||
const { blend = 'normal' } = this.layer.getLayerConfig();
|
||||
return BlendTypes[BlendType[blend]] as IBlendOptions;
|
||||
}
|
||||
public getDefaultStyle(): unknown {
|
||||
return {};
|
||||
}
|
||||
public getUninforms(): IModelUniform {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
|
||||
import BaseLayer from '../core/BaseLayer';
|
||||
import HeatMapModels, { HeatMapModelType } from './models';
|
||||
interface IPointLayerStyleOptions {
|
||||
interface IHeatMapLayerStyleOptions {
|
||||
opacity: number;
|
||||
}
|
||||
export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
|
||||
public type: string = 'HeatMapLayer';
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
|
@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
this.layerModel = new HeatMapModels[shape](this);
|
||||
this.models = this.layerModel.buildModels();
|
||||
}
|
||||
private getModelType(): HeatMapModelType {
|
||||
protected getModelType(): HeatMapModelType {
|
||||
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
|
||||
'shape',
|
||||
);
|
||||
|
|
|
@ -6,6 +6,7 @@ import line_dash_vert from './shaders/line_dash_vert.glsl';
|
|||
interface IDashLineLayerStyleOptions {
|
||||
opacity: number;
|
||||
dashArray: [number, number];
|
||||
lineType: string;
|
||||
}
|
||||
export default class DashLineLayer extends BaseLayer<
|
||||
IDashLineLayerStyleOptions
|
||||
|
@ -25,7 +26,11 @@ export default class DashLineLayer extends BaseLayer<
|
|||
}
|
||||
|
||||
protected renderModels() {
|
||||
const { opacity, dashArray = [10, 5] } = this.getLayerConfig();
|
||||
const {
|
||||
opacity,
|
||||
dashArray = [10, 5],
|
||||
lineType = 'dash',
|
||||
} = this.getLayerConfig();
|
||||
this.models.forEach((model) =>
|
||||
model.draw({
|
||||
uniforms: {
|
||||
|
@ -132,30 +137,30 @@ export default class DashLineLayer extends BaseLayer<
|
|||
},
|
||||
});
|
||||
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'startPos',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_StartPos',
|
||||
buffer: {
|
||||
// give the WebGL driver a hint that this buffer may change
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 3,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const coordinates = feature.coordinates as number[][];
|
||||
const coord = coordinates[0];
|
||||
return coord.length === 3 ? coord : [...coord, 0.0];
|
||||
},
|
||||
},
|
||||
});
|
||||
// this.styleAttributeService.registerStyleAttribute({
|
||||
// name: 'startPos',
|
||||
// type: AttributeType.Attribute,
|
||||
// descriptor: {
|
||||
// name: 'a_StartPos',
|
||||
// buffer: {
|
||||
// // give the WebGL driver a hint that this buffer may change
|
||||
// usage: gl.DYNAMIC_DRAW,
|
||||
// data: [],
|
||||
// type: gl.FLOAT,
|
||||
// },
|
||||
// size: 3,
|
||||
// update: (
|
||||
// feature: IEncodeFeature,
|
||||
// featureIdx: number,
|
||||
// vertex: number[],
|
||||
// attributeIdx: number,
|
||||
// ) => {
|
||||
// const coordinates = feature.coordinates as number[][];
|
||||
// const coord = coordinates[0];
|
||||
// return coord.length === 3 ? coord : [...coord, 0.0];
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'distance',
|
||||
|
|
|
@ -1,9 +1,15 @@
|
|||
import BaseLayer from '../core/BaseLayer';
|
||||
import LineModels, { LineModelType } from './models';
|
||||
interface IPointLayerStyleOptions {
|
||||
opacity: number;
|
||||
export enum LineType {
|
||||
'solid' = 'solid',
|
||||
'dash' = 'dash',
|
||||
}
|
||||
export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
interface ILineLayerStyleOptions {
|
||||
opacity: number;
|
||||
lineType?: keyof typeof LineType;
|
||||
dashArray?: [number, number];
|
||||
}
|
||||
export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
|
||||
public type: string = 'LineLayer';
|
||||
|
||||
private animateStartTime: number = 0;
|
||||
|
@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
this.layerModel = new LineModels[shape](this);
|
||||
this.models = this.layerModel.buildModels();
|
||||
}
|
||||
private getModelType(): LineModelType {
|
||||
protected getModelType(): LineModelType {
|
||||
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
|
||||
'shape',
|
||||
);
|
||||
|
|
|
@ -42,6 +42,7 @@ export default class LineModel extends BaseModel {
|
|||
];
|
||||
}
|
||||
protected registerBuiltinAttributes() {
|
||||
// const lineType = this
|
||||
// point layer size;
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'size',
|
||||
|
|
|
@ -8,6 +8,7 @@ attribute vec3 a_Position;
|
|||
attribute float a_Distance;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
uniform vec2 u_dash_array: [10.0, 5.];
|
||||
uniform float u_line_type: 0.0;
|
||||
uniform float u_dash_offset: 0;
|
||||
|
||||
varying vec4 v_color;
|
||||
|
@ -21,6 +22,7 @@ varying float v_distance_ratio;
|
|||
#pragma include "projection"
|
||||
void main() {
|
||||
|
||||
|
||||
v_distance_ratio = a_Distance / a_Total_Distance;
|
||||
|
||||
v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
|
||||
|
|
|
@ -19,6 +19,19 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
},
|
||||
};
|
||||
}
|
||||
protected getDefaultConfig() {
|
||||
const type = this.getModelType();
|
||||
const defaultConfig = {
|
||||
normal: {
|
||||
blend: 'additive',
|
||||
},
|
||||
fill: {},
|
||||
extrude: {},
|
||||
image: {},
|
||||
text: {},
|
||||
};
|
||||
return defaultConfig[type];
|
||||
}
|
||||
protected renderModels() {
|
||||
if (this.layerModelNeedUpdate) {
|
||||
this.models = this.layerModel.buildModels();
|
||||
|
@ -38,7 +51,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
this.models = this.layerModel.buildModels();
|
||||
}
|
||||
|
||||
private getModelType(): PointType {
|
||||
protected getModelType(): PointType {
|
||||
// pointlayer
|
||||
// 2D、 3d、 shape、image、text、normal、
|
||||
const layerData = this.getEncodedData();
|
||||
|
|
|
@ -11,7 +11,7 @@ import BaseModel from '../../core/BaseModel';
|
|||
import { PointImageTriangulation } from '../../core/triangulation';
|
||||
import pointImageFrag from '../shaders/image_frag.glsl';
|
||||
import pointImageVert from '../shaders/image_vert.glsl';
|
||||
interface IPointLayerStyleOptions {
|
||||
interface IImageLayerStyleOptions {
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
|
@ -19,7 +19,7 @@ export default class ImageModel extends BaseModel {
|
|||
private texture: ITexture2D;
|
||||
|
||||
public getUninforms(): IModelUniform {
|
||||
const { opacity } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
return {
|
||||
u_opacity: opacity || 1.0,
|
||||
u_texture: this.texture,
|
||||
|
|
|
@ -3,6 +3,7 @@ import {
|
|||
BlendType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
ILayerConfig,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
} from '@antv/l7-core';
|
||||
|
@ -27,6 +28,11 @@ export function PointTriangulation(feature: IEncodeFeature) {
|
|||
}
|
||||
|
||||
export default class NormalModel extends BaseModel {
|
||||
public getDefaultStyle(): Partial<IPointLayerStyleOptions & ILayerConfig> {
|
||||
return {
|
||||
blend: 'additive',
|
||||
};
|
||||
}
|
||||
public getUninforms(): IModelUniform {
|
||||
const {
|
||||
opacity = 1,
|
||||
|
@ -79,4 +85,11 @@ export default class NormalModel extends BaseModel {
|
|||
},
|
||||
});
|
||||
}
|
||||
private defaultStyleOptions(): Partial<
|
||||
IPointLayerStyleOptions & ILayerConfig
|
||||
> {
|
||||
return {
|
||||
blend: BlendType.additive,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
|
|||
this.models = this.layerModel.buildModels();
|
||||
}
|
||||
|
||||
private getModelType(): PolygonModelType {
|
||||
protected getModelType(): PolygonModelType {
|
||||
const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
|
||||
'shape',
|
||||
);
|
||||
|
|
|
@ -9,11 +9,11 @@ import BaseLayer from '../core/BaseLayer';
|
|||
import { RasterImageTriangulation } from '../core/triangulation';
|
||||
import rasterImageFrag from './shaders/image_frag.glsl';
|
||||
import rasterImageVert from './shaders/image_vert.glsl';
|
||||
interface IPointLayerStyleOptions {
|
||||
interface IRaterLayerStyleOptions {
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
export default class ImageLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
export default class ImageLayer extends BaseLayer<IRaterLayerStyleOptions> {
|
||||
public type: string = 'ImageLayer';
|
||||
protected texture: ITexture2D;
|
||||
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.21",
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"gl-matrix": "^3.1.0",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
@ -232,7 +232,6 @@ export default class AMapService
|
|||
...rest
|
||||
} = this.config;
|
||||
// 高德地图创建独立的container;
|
||||
|
||||
// tslint:disable-next-line:typedef
|
||||
await new Promise((resolve) => {
|
||||
const resolveMap = () => {
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"inversify-logging": "^0.2.1",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
|
@ -27,6 +27,7 @@
|
|||
"@antv/l7-maps": "^2.0.0-beta.21",
|
||||
"@antv/l7-renderer": "^2.0.0-beta.21",
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"inversify-inject-decorators": "^3.1.0",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.21",
|
||||
"@antv/l7-utils": "^2.0.0-beta.21",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
"@turf/invariant": "^6.1.2",
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"gl-matrix": "^3.1.0",
|
||||
|
|
|
@ -3,6 +3,7 @@ import * as React from 'react';
|
|||
import Arc2DLineDemo from './components/Arc2DLine';
|
||||
import ArcLineDemo from './components/Arcline';
|
||||
import Column from './components/column';
|
||||
import DashLineDemo from './components/dash';
|
||||
import DataUpdate from './components/data_update';
|
||||
import HeatMapDemo from './components/HeatMap';
|
||||
import LightDemo from './components/light';
|
||||
|
@ -24,6 +25,7 @@ storiesOf('图层', module)
|
|||
.add('图片标注', () => <PointImage />)
|
||||
.add('面3d图层', () => <Polygon3D />)
|
||||
.add('线图层', () => <LineLayer />)
|
||||
.add('虚线', () => <DashLineDemo />)
|
||||
.add('3D弧线', () => <ArcLineDemo />)
|
||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||
.add('热力图', () => <HeatMapDemo />)
|
||||
|
|
|
@ -19,11 +19,12 @@ export default class Point3D extends React.Component {
|
|||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
map: new GaodeMap({
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 3,
|
||||
token: 'test',
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
import { DashLineLayer, Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class DashLineDemo extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [102.602992, 23.107329],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 14,
|
||||
}),
|
||||
});
|
||||
const lineLayer = new DashLineLayer()
|
||||
.source(await response.json())
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E8FCFF',
|
||||
'#CFF6FF',
|
||||
'#A1E9ff',
|
||||
'#65CEF7',
|
||||
'#3CB1F0',
|
||||
'#2894E0',
|
||||
'#1772c2',
|
||||
'#105CB3',
|
||||
'#0D408C',
|
||||
'#002466',
|
||||
].reverse(),
|
||||
);
|
||||
|
||||
scene.addLayer(lineLayer);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -18,7 +18,7 @@ export default class Light extends React.Component {
|
|||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [116.405289, 39.904987],
|
||||
|
@ -27,9 +27,7 @@ export default class Light extends React.Component {
|
|||
});
|
||||
this.scene = scene;
|
||||
scene.on('loaded', async () => {
|
||||
const pointLayer = new PointLayer({
|
||||
blend: 'min',
|
||||
})
|
||||
const pointLayer = new PointLayer()
|
||||
.source(pointsData, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
@ -37,8 +35,8 @@ export default class Light extends React.Component {
|
|||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.size(2)
|
||||
.color('#FFFECC')
|
||||
.size(1)
|
||||
.color('#ffa842')
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
|
37
yarn.lock
37
yarn.lock
|
@ -88,10 +88,10 @@
|
|||
d3-timer "~1.0.6"
|
||||
wolfy87-eventemitter "~5.1.0"
|
||||
|
||||
"@antv/gatsby-theme-antv@^0.10.4":
|
||||
version "0.10.7"
|
||||
resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.7.tgz#e2c2620aee959e635c5c95b5d9fa2e9f87812ca9"
|
||||
integrity sha512-hYkdm6Knt+2KxUoNoXXlDC9KQcAIZdRITqXGx25cUNgpz0+GBDtg15D2JWMwjDpgu86cjjIjMM1860jvTcRm5Q==
|
||||
"@antv/gatsby-theme-antv@^0.10.17":
|
||||
version "0.10.24"
|
||||
resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.24.tgz#0a57af29a1fc75c390eb70a0c490181e778ecf82"
|
||||
integrity sha512-MMqDmv4hC8f61rFftrjcoGqGGpr+j+uDkPX+AmwpFEaYWzh+QqDO56I0IZUzwYhLihFwjH5z78JtkLO2bDNk4g==
|
||||
dependencies:
|
||||
"@babel/plugin-transform-modules-umd" "^7.2.0"
|
||||
"@babel/preset-env" "^7.6.3"
|
||||
|
@ -101,7 +101,7 @@
|
|||
"@hot-loader/react-dom" "^16.9.0+4.12.11"
|
||||
"@stackblitz/sdk" "^1.3.0"
|
||||
"@types/classnames" "^2.2.9"
|
||||
"@types/codemirror" "^0.0.80"
|
||||
"@types/codemirror" "^0.0.81"
|
||||
"@types/git-url-parse" "^9.0.0"
|
||||
"@types/lodash-es" "^4.17.3"
|
||||
"@types/parse-github-url" "^1.0.0"
|
||||
|
@ -150,6 +150,7 @@
|
|||
gatsby-transformer-sharp "^2.2.14"
|
||||
git-url-parse "^11.1.2"
|
||||
i18next "^19.0.0"
|
||||
indent-string "^4.0.0"
|
||||
insert-css "^2.0.0"
|
||||
less "^3.10.3"
|
||||
lodash "^4.17.15"
|
||||
|
@ -176,6 +177,7 @@
|
|||
react-use "^13.8.0"
|
||||
release-it "^12.4.3"
|
||||
shallowequal "^1.1.0"
|
||||
slash "^3.0.0"
|
||||
slick-carousel "^1.8.1"
|
||||
ts-jest "^24.1.0"
|
||||
typescript "^3.6.3"
|
||||
|
@ -1032,6 +1034,16 @@
|
|||
resolve "^1.8.1"
|
||||
semver "^5.5.1"
|
||||
|
||||
"@babel/plugin-transform-runtime@^7.7.6":
|
||||
version "7.7.6"
|
||||
resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
|
||||
integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.7.4"
|
||||
"@babel/helper-plugin-utils" "^7.0.0"
|
||||
resolve "^1.8.1"
|
||||
semver "^5.5.1"
|
||||
|
||||
"@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
|
||||
version "7.7.4"
|
||||
resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
|
||||
|
@ -1283,6 +1295,13 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/runtime@^7.7.7":
|
||||
version "7.7.7"
|
||||
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
|
||||
integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/standalone@^7.6.4":
|
||||
version "7.7.4"
|
||||
resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.7.4.tgz#9adcda4b7c33627c65eacf87f5c1f950987294c2"
|
||||
|
@ -3657,10 +3676,10 @@
|
|||
resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b"
|
||||
integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==
|
||||
|
||||
"@types/codemirror@^0.0.80":
|
||||
version "0.0.80"
|
||||
resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.80.tgz#c047bb30462582615c3d51e5be6155315f764427"
|
||||
integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w==
|
||||
"@types/codemirror@^0.0.81":
|
||||
version "0.0.81"
|
||||
resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b"
|
||||
integrity sha512-QoeIb9tn/TZp0IzNyMKlcwHR6pHxNoIW9mKqF7asAsj+AWqpFOEUsxia756L6WKBQNk2psHpu+aFuIFqo3Ac0A==
|
||||
dependencies:
|
||||
"@types/tern" "*"
|
||||
|
||||
|
|
Loading…
Reference in New Issue