diff --git a/docs/api/component/marker.zh.md b/docs/api/component/marker.zh.md index 0e1b0b2ae4..d8cd796085 100644 --- a/docs/api/component/marker.zh.md +++ b/docs/api/component/marker.zh.md @@ -11,10 +11,11 @@ Marker
`const Marker = new L7.Marker(option)` #### option -- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 marker 的颜色 +- color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 +- extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息 ## 方法 @@ -50,11 +51,19 @@ Marker
`const Marker = new L7.Marker(option)` 获取 marker 弹出框 +#### getExtData() + +获取用户自定义数据 + +#### setExtData(data) + +设置用户自定义数据 + ## 示例代码 #### 默认 Marker -\*\*
`const marker = new L7.Marker({color:'blue'})` +`const marker = new L7.Marker({color:'blue'})` #### 自定义 Marker @@ -84,3 +93,26 @@ new L7.Marker({ .setPopup(popup) .addTo(scene); ``` + +## 事件 + +### 鼠标事件 + +- mousemove +- click +- mousedown +- mouseup +- dblclick +- contextmenu +- mouseover +- mouseout + +事件返回数据 + +- target 事件触发源 +- data extData 用户自定义数据 +- lnglat marker 经纬度 + +```javascript +marker.on('click', (e) => {}); +``` diff --git a/docs/api/layer/line_layer/linelayer.zh.md b/docs/api/layer/line_layer/linelayer.zh.md index 7f04671c9d..9f1374c15a 100644 --- a/docs/api/layer/line_layer/linelayer.zh.md +++ b/docs/api/layer/line_layer/linelayer.zh.md @@ -68,3 +68,14 @@ order: 0 lineLayer.size(1); // 线的宽度为 1 lineLayer.size([1, 2]); // 宽度为1，高度2 ``` +### style + +- lineType dash | solid 线类型实线和虚线 +- dashArray 虚线配置项 ```[ 5, 5]``` + +```javascript + layer .style({ + lineType: 'dash', + dashArray: [ 5, 5 ] + }) +``` diff --git a/examples/gallery/basic/demo/animate.js b/examples/gallery/basic/demo/animate.js new file mode 100644 index 0000000000..82104725ab --- /dev/null +++ b/examples/gallery/basic/demo/animate.js @@ -0,0 +1,43 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 110.19382669582967, 40.258134 ], + pitch: 0, + zoom: 3, + style: 'dark' + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json' +) + .then(res => res.json()) + .then(data => { + data.features = data.features.map(function(fe) { + if (fe.properties.saldo < 0) { + fe.geometry.coordinates = fe.geometry.coordinates.reverse(); + } + return fe; + }); + const layer = new LineLayer({ + autoFit: true + }) + .source(data) + .shape('line') + .size('saldo', [ 1, 2 ]) + .color('saldo', function(v) { + return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)'; + }) + .animate({ + enable: true, + interval: 0.1, + duration: 3, + trailLength: 1 + }) + .style({ + opacity: 0.8 + }); + scene.addLayer(layer); + }); diff --git a/examples/gallery/basic/demo/build.js b/examples/gallery/basic/demo/build.js new file mode 100644 index 0000000000..3fd8301fd2 --- /dev/null +++ b/examples/gallery/basic/demo/build.js @@ -0,0 +1,36 @@ +import { Scene, CityBuildingLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'dark', + center: [ 121.507674, 31.223043 ], + pitch: 65.59312320916906, + zoom: 15.4, + minZoom: 15, + maxZoom: 18 + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json' +) + .then(res => res.json()) + .then(data => { + const layer = new CityBuildingLayer(); + layer + .source(data) + .size('floor', [ 0, 500 ]) + .color('rgba(242,246,250,1.0)') + .animate({ + enable: true + }) + .style({ + opacity: 1.0, + baseColor: 'rgb(16,16,16)', + windowColor: 'rgb(30,60,89)', + brightColor: 'rgb(255,176,38)' + }); + scene.addLayer(layer); + }); diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json index 2510cc7524..5999b8faa8 100644 --- a/examples/gallery/basic/demo/meta.json +++ b/examples/gallery/basic/demo/meta.json @@ -4,6 +4,16 @@ "en": "Gallery" }, "demos": [ + { + "filename": "animate.js", + "title": "轨迹动画", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "build.js", + "title": "点亮城市", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ" + }, { "filename": "column_dark.js", "title": "3D柱图深色", diff --git a/examples/line/path/demo/meta.json b/examples/line/path/demo/meta.json index 72baa0d4fe..b9c242aeb0 100644 --- a/examples/line/path/demo/meta.json +++ b/examples/line/path/demo/meta.json @@ -23,6 +23,11 @@ "filename": "road_dark.js", "title": "路径", "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "road_dark_dash.js", + "title": "路径虚线", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/line/path/demo/road_dark_dash.js b/examples/line/path/demo/road_dark_dash.js new file mode 100644 index 0000000000..c3155ec904 --- /dev/null +++ b/examples/line/path/demo/road_dark_dash.js @@ -0,0 +1,31 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ 116.3956, 39.9392 ], + pitch: 0, + zoom: 10, + rotation: 0, + style: 'dark' + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' +) + .then(res => res.json()) + .then(data => { + const layer = new LineLayer({}) + .source(data) + .size(1.5) + .shape('line') + .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]) + .style({ + lineType: 'dash', + dashArray: [ 5, 5 ] + }) + ; + scene.addLayer(layer); + }); diff --git a/examples/raster/basic/demo/light.js b/examples/raster/basic/demo/light.js index 2cb13323cf..e6cb73ec1f 100644 --- a/examples/raster/basic/demo/light.js +++ b/examples/raster/basic/demo/light.js @@ -44,13 +44,13 @@ async function addLayer() { }) .style({ opacity: 1.0, - clampLow: false, - clampHigh: false, + clampLow: true, + clampHigh: true, domain: [ 0, 90 ], nodataValue: 0, rampColors: { - colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ], - positions: [ 0, 0.25, 0.5, 0.75, 1.0 ] + colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ], + positions: [ 0, 0.1, 0.25, 0.5, 1.0 ] } }); diff --git a/examples/raster/basic/demo/meta.json b/examples/raster/basic/demo/meta.json index 714f3230d9..3d64ca4131 100644 --- a/examples/raster/basic/demo/meta.json +++ b/examples/raster/basic/demo/meta.json @@ -17,11 +17,12 @@ { "filename": "dem.js", "title": "地形图", - "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oinmTJIlmbMAAAAAAAAAAABkARQnAQ" }, { "filename": "light.js", - "title": "夜光图" + "title": "夜光图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ" }, { "filename": "ndvi.js", diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 2998eb867c..c4f8aa349d 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -133,6 +133,14 @@ export default class Marker extends EventEmitter { return this.markerOption.draggable; } + public getExtData() { + return this.markerOption.extData; + } + + public setExtData(data: any) { + this.markerOption.extData = data; + } + private update() { if (!this.mapsService) { return; diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 372aa824ef..e6a6cf95a9 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/packages/core/src/services/scene/ISceneService.ts @@ -10,6 +10,7 @@ export interface ISceneService { addLayer(layer: ILayer): void; render(): void; getSceneContainer(): HTMLDivElement; + ExportMap2Png(): string; destroy(): void; } // scene 事件 diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 7f5332bb28..dc1064a0f6 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -218,6 +218,13 @@ export default class Scene extends EventEmitter implements ISceneService { return this.$container as HTMLDivElement; } + public ExportMap2Png(): string { + const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; + this.render(); + const layersPng = renderCanvas?.toDataURL() as string; + return layersPng; + } + public destroy() { this.emit('destroy'); this.inited = false; diff --git a/packages/layers/src/citybuliding/shaders/build_frag.glsl b/packages/layers/src/citybuliding/shaders/build_frag.glsl index 0bfd15324d..727e421606 100644 --- a/packages/layers/src/citybuliding/shaders/build_frag.glsl +++ b/packages/layers/src/citybuliding/shaders/build_frag.glsl @@ -82,7 +82,7 @@ void main() { if(ux == targetColId){ n =0.; } - float timeP = min(0.75, abs ( sin(u_time/6.0) ) ); + float timeP = min(0.75, abs ( sin(u_time/3.0) ) ); float hot = smoothstep(1.0,0.0,timeP); vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s); //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0); diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 7a5ca9169d..f4f66dd808 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -300,13 +300,12 @@ export default class BaseLayer extends EventEmitter // 触发 init 生命周期插件 this.hooks.init.call(); this.inited = true; - - this.hooks.afterInit.call(); // 更新 model 样式 this.updateLayerConfig({ ...(this.getDefaultConfig() as object), ...this.rawConfig, }); + this.hooks.afterInit.call(); // 启动动画 const { animateOption } = this.getLayerConfig(); if (animateOption?.enable) { diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index 0303e815b2..5ae4b8a93b 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -31,8 +31,8 @@ void main() { float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; alpha = smoothstep(0., 1., alpha); - float alpha2 = exp(-abs(v_side)); - gl_FragColor.a *= alpha * blur * alpha2; + // float alpha2 = exp(-abs(v_side)); + gl_FragColor.a *= alpha * blur; // gl_FragColor.a = fract(u_time); } // dash line diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 305b57bf52..1939d16f79 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -99,6 +99,9 @@ class Scene public getMapService(): IMapService { return this.mapService; } + public ExportMap2Png(): string { + return this.sceneService.ExportMap2Png(); + } public get map() { return this.mapService.map;