diff --git a/babel.config.js b/babel.config.js index cae969d36f..1486c08675 100644 --- a/babel.config.js +++ b/babel.config.js @@ -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', { diff --git a/docs/api/layer/point_layer/marker.zh.md b/docs/api/layer/point_layer/marker.zh.md index fd22bcf63f..59af362de6 100644 --- a/docs/api/layer/point_layer/marker.zh.md +++ b/docs/api/layer/point_layer/marker.zh.md @@ -5,5 +5,4 @@ order: 7 可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 ## 使用 - [Marker 文档](../../component) diff --git a/docs/api/layer/point_layer/symbol.zh.md b/docs/api/layer/point_layer/symbol.zh.md index 5861234beb..c0c8730ab5 100644 --- a/docs/api/layer/point_layer/symbol.zh.md +++ b/docs/api/layer/point_layer/symbol.zh.md @@ -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也支持数据映射 diff --git a/docs/api/map.en.md b/docs/api/map.en.md index 678c72209a..fcc8748431 100644 --- a/docs/api/map.en.md +++ b/docs/api/map.en.md @@ -42,12 +42,12 @@ const scene = new Scene({ id: 'map', map: new Mapbox({ style: 'dark', - center: [ 103.83735604457024, 1.360253881403068 ], + center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, - rotation: 19.313180925794313 - token:'xxxx - token' - }) + rotation: 19.313180925794313, + token: 'xxxx - token', + }), }); ``` diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md index 9e09896f0a..26a06120e7 100644 --- a/docs/api/map.zh.md +++ b/docs/api/map.zh.md @@ -42,12 +42,12 @@ const scene = new Scene({ id: 'map', map: new Mapbox({ style: 'dark', - center: [ 103.83735604457024, 1.360253881403068 ], + center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, - rotation: 19.313180925794313 - token:'xxxx - token' - }) + rotation: 19.313180925794313, + token: 'xxxx - token', + }), }); ``` diff --git a/docs/tutorial/map/blankmap.en.md b/docs/tutorial/map/blankmap.en.md index 9206c91b78..fa116e72fc 100644 --- a/docs/tutorial/map/blankmap.en.md +++ b/docs/tutorial/map/blankmap.en.md @@ -27,4 +27,10 @@ const scene = new Scene({ 离线，无token使用 - + diff --git a/docs/tutorial/map/blankmap.zh.md b/docs/tutorial/map/blankmap.zh.md index a528daf71e..f87c7cf8c7 100644 --- a/docs/tutorial/map/blankmap.zh.md +++ b/docs/tutorial/map/blankmap.zh.md @@ -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使用 - + diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js index f93a386b80..dd04be4a47 100644 --- a/examples/gallery/basic/demo/bus_dark.js +++ b/examples/gallery/basic/demo/bus_dark.js @@ -1,3 +1,5 @@ +// Data Source https://busrouter.sg/visualization/ + import { Scene, LineLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js index 95b40e2686..99f18a9e78 100644 --- a/examples/line/path/demo/bus_dark.js +++ b/examples/line/path/demo/bus_dark.js @@ -1,3 +1,5 @@ +// Data Source https://busrouter.sg/visualization/ + import { Scene, LineLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js index 693331944f..4df4774e4c 100644 --- a/examples/line/path/demo/bus_light.js +++ b/examples/line/path/demo/bus_light.js @@ -1,3 +1,5 @@ +// Data Source https://busrouter.sg/visualization/ + import { Scene, LineLayer } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; diff --git a/package.json b/package.json index c44f01e9da..40e7773869 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/component/package.json b/packages/component/package.json index 7a1a0063ba..c6bb016a73 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -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", diff --git a/packages/core/package.json b/packages/core/package.json index a21540e7f0..5e5141b29e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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", diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index 4ff7d497ad..55c3c43a62 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/packages/core/src/services/config/ConfigService.ts @@ -60,7 +60,7 @@ const defaultLayerConfig: Partial = { enableSelect: false, highlightColor: 'red', selectColor: 'blue', - enableTAA: true, + enableTAA: false, jitterScale: 1, enableLighting: false, }; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index b376a83104..e0e6eaf9f7 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -52,7 +52,7 @@ export interface ILayerModelInitializationOptions { export interface ILayerModel { render(): void; getUninforms(): IModelUniform; - getBlend(): IBlendOptions; + getDefaultStyle(): unknown; buildModels(): IModel[]; } export interface IModelUniform { diff --git a/packages/layers/package.json b/packages/layers/package.json index 8dfa4d41d4..94707c60cd 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -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", diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index c2e6a4dc1d..4a8f213200 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -221,7 +221,7 @@ export default class BaseLayer extends EventEmitter public init() { // 设置配置项 const sceneId = this.container.get(TYPES.SceneID); - this.configService.setLayerConfig(sceneId, this.id, this.rawConfig); + this.configService.setLayerConfig(sceneId, this.id, {}); // 全局容器服务 this.iconService = this.container.get(TYPES.IIconService); @@ -298,7 +298,11 @@ export default class BaseLayer 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 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[], diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index f21ae3b67e..e90c8f0d7e 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -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 + 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.'); } diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts index f10463232b..0569550ee7 100644 --- a/packages/layers/src/heatmap/index.ts +++ b/packages/layers/src/heatmap/index.ts @@ -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 { +export default class HeatMapLayer extends BaseLayer { public type: string = 'HeatMapLayer'; protected getConfigSchema() { return { @@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer { this.layerModel = new HeatMapModels[shape](this); this.models = this.layerModel.buildModels(); } - private getModelType(): HeatMapModelType { + protected getModelType(): HeatMapModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/line/dash.ts b/packages/layers/src/line/dash.ts index 212e7ba0bd..7eca2e28f0 100644 --- a/packages/layers/src/line/dash.ts +++ b/packages/layers/src/line/dash.ts @@ -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', diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index 5a6b613e71..2daa0fbce6 100644 --- a/packages/layers/src/line/index.ts +++ b/packages/layers/src/line/index.ts @@ -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 { +interface ILineLayerStyleOptions { + opacity: number; + lineType?: keyof typeof LineType; + dashArray?: [number, number]; +} +export default class LineLayer extends BaseLayer { public type: string = 'LineLayer'; private animateStartTime: number = 0; @@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer { this.layerModel = new LineModels[shape](this); this.models = this.layerModel.buildModels(); } - private getModelType(): LineModelType { + protected getModelType(): LineModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 5b574f2da8..9cc28bfc00 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -42,6 +42,7 @@ export default class LineModel extends BaseModel { ]; } protected registerBuiltinAttributes() { + // const lineType = this // point layer size; this.styleAttributeService.registerStyleAttribute({ name: 'size', diff --git a/packages/layers/src/line/shaders/line_dash_vert.glsl b/packages/layers/src/line/shaders/line_dash_vert.glsl index 43f0332b00..ec7c3590d6 100644 --- a/packages/layers/src/line/shaders/line_dash_vert.glsl +++ b/packages/layers/src/line/shaders/line_dash_vert.glsl @@ -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; diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts index 62fd5bdea3..232d05edde 100644 --- a/packages/layers/src/point/index.ts +++ b/packages/layers/src/point/index.ts @@ -19,6 +19,19 @@ export default class PointLayer extends BaseLayer { }, }; } + 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 { this.models = this.layerModel.buildModels(); } - private getModelType(): PointType { + protected getModelType(): PointType { // pointlayer // 2D、 3d、 shape、image、text、normal、 const layerData = this.getEncodedData(); diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index b3878a62b5..1b35976989 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -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, diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index c0ea63c2e6..4dd82398a9 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -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 { + 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, + }; + } } diff --git a/packages/layers/src/polygon/index.ts b/packages/layers/src/polygon/index.ts index 9e0dbd380b..55e46cd1b3 100644 --- a/packages/layers/src/polygon/index.ts +++ b/packages/layers/src/polygon/index.ts @@ -36,7 +36,7 @@ export default class PolygonLayer extends BaseLayer { this.models = this.layerModel.buildModels(); } - private getModelType(): PolygonModelType { + protected getModelType(): PolygonModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/raster/image.ts b/packages/layers/src/raster/image.ts index ad48fcf4c9..341d1af340 100644 --- a/packages/layers/src/raster/image.ts +++ b/packages/layers/src/raster/image.ts @@ -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 { +export default class ImageLayer extends BaseLayer { public type: string = 'ImageLayer'; protected texture: ITexture2D; diff --git a/packages/maps/package.json b/packages/maps/package.json index 688716cde1..9b9ae86a42 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -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", diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index a88a5eadc3..fd26e3731e 100644 --- a/packages/maps/src/amap/index.ts +++ b/packages/maps/src/amap/index.ts @@ -232,7 +232,6 @@ export default class AMapService ...rest } = this.config; // 高德地图创建独立的container； - // tslint:disable-next-line:typedef await new Promise((resolve) => { const resolveMap = () => { diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 44c45dc81f..5dcaac0e68 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -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", diff --git a/packages/scene/package.json b/packages/scene/package.json index 7d1e8e861c..c7d76e538c 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -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", diff --git a/packages/source/package.json b/packages/source/package.json index 710e1af1b3..23545ff7cb 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -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", diff --git a/packages/utils/package.json b/packages/utils/package.json index c82d39d4cf..ba1fdeaf4d 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -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", diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 7def7130ca..4fd56d0c2f 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -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('图片标注', () => ) .add('面3d图层', () => ) .add('线图层', () => ) + .add('虚线', () => ) .add('3D弧线', () => ) .add('2D弧线', () => ) .add('热力图', () => ) diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index d8404f77ca..23642bcb1b 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -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', () => { diff --git a/stories/Layers/components/dash.tsx b/stories/Layers/components/dash.tsx new file mode 100644 index 0000000000..f06b9d94de --- /dev/null +++ b/stories/Layers/components/dash.tsx @@ -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 ( +
+ ); + } +} diff --git a/stories/Layers/components/light.tsx b/stories/Layers/components/light.tsx index 1385f732c1..045eb87dc9 100644 --- a/stories/Layers/components/light.tsx +++ b/stories/Layers/components/light.tsx @@ -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, }); diff --git a/yarn.lock b/yarn.lock index 9facb1642f..8be28793e8 100644 --- a/yarn.lock +++ b/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" "*"