diff --git a/babel.config.js b/babel.config.js index cae969d36f..90660a79a9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -54,7 +54,7 @@ module.exports = api => { development: isCommonJS } ], - '@babel/preset-typescript', + '@babel/preset-typescript' ], plugins: [ '@babel/plugin-proposal-object-rest-spread', @@ -66,6 +66,11 @@ module.exports = api => { legacy: true } ], + [ '@babel/plugin-transform-runtime', + { + regenerator: true + } + ], [ '@babel/plugin-proposal-class-properties', { 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..cab56dccc9 100644 --- a/docs/tutorial/map/blankmap.zh.md +++ b/docs/tutorial/map/blankmap.zh.md @@ -26,4 +26,10 @@ const scene = new Scene({ 离线，无token使用 - + diff --git a/package.json b/package.json index c44f01e9da..eee9f9911a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@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-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/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/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/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/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..2047a42fbc 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.21" + resolved "https://registry.npm.alibaba-inc.com/@antv/gatsby-theme-antv/download/@antv/gatsby-theme-antv-0.10.21.tgz#2f89811634e632da1b1b0632ea6ca07b1b5e86a4" + integrity sha1-L4mBFjTmMtobGwYy6mygextehqQ= 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.npm.alibaba-inc.com/@babel/plugin-transform-runtime/download/@babel/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61" + integrity sha1-TytUjIiSL7mOwcJCr9RzPuPhL2E= + 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" @@ -3657,10 +3669,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.npm.alibaba-inc.com/@types/codemirror/download/@types/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b" + integrity sha1-POosEAZAaXPUqtIS5hdjjL/Clls= dependencies: "@types/tern" "*"