From 02f76b4d4b2f18625907fe0189429f922e4c83f7 Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Thu, 8 Dec 2022 11:24:07 +0800 Subject: [PATCH] =?UTF-8?q?Fix=20=E6=96=87=E6=9C=AC=E6=9B=B4=E6=96=B0=20(#?= =?UTF-8?q?1530)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 文本更新 * fix: iconfont 更新 * fix: 移除console * docs: scene 增加 setzoom --- dev-demos/bugs/heatmap/demos/map.tsx | 76 +++++++++++++++++++ dev-demos/bugs/heatmap/heatmap.md | 2 + dev-demos/bugs/point/demos/text.tsx | 10 +-- .../features/heatmap/demos/heatmap3d.tsx | 19 ++++- dev-demos/features/point/demos/iconfont.tsx | 2 +- dev-demos/features/point/demos/text.tsx | 25 ++++-- .../core/src/services/layer/ILayerService.ts | 2 +- packages/layers/src/core/BaseModel.ts | 2 +- .../layers/src/plugins/UpdateModelPlugin.ts | 6 +- packages/layers/src/point/models/text.ts | 22 ++++-- packages/site/docs/api/scene.zh.md | 6 ++ 11 files changed, 145 insertions(+), 27 deletions(-) create mode 100644 dev-demos/bugs/heatmap/demos/map.tsx create mode 100644 dev-demos/bugs/heatmap/heatmap.md diff --git a/dev-demos/bugs/heatmap/demos/map.tsx b/dev-demos/bugs/heatmap/demos/map.tsx new file mode 100644 index 0000000000..0bbe4d4b10 --- /dev/null +++ b/dev-demos/bugs/heatmap/demos/map.tsx @@ -0,0 +1,76 @@ +// @ts-ignore +import { Scene,RasterLayer, HeatmapLayer } from '@antv/l7'; +// @ts-ignore +import { Map,GaodeMap } from '@antv/l7-maps'; +import React, { useEffect } from 'react'; + +export default () => { + useEffect(() => { + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + style: 'light', + pitch: 0, + center: [ 114.07737552216226, 22.542656745583486 ], + rotation: 0, + zoom: 12 + }) + }); + scene.on('loaded', () => { + const url1 = + 'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; + + const layer1 = new RasterLayer({ + zIndex: 0, + }).source(url1, { + parser: { + type: 'rasterTile', + tileSize: 256, + zoomOffset: 0, + }, + }); + scene.addLayer(layer1) + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' + ) + .then(res => res.json()) + .then(data => { + const layer = new HeatmapLayer({}) + .source(data) + .shape('heatmap3D') + .size('h12', [0, 1.0]) // weight映射通道 + .style({ + intensity: 2, + radius: 20, + opacity: 1.0, + rampColors: { + colors: [ + '#FF4818', + '#F7B74A', + '#FFF598', + '#F27DEB', + '#8C1EB2', + '#421EB2', + ].reverse(), + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, + }); + scene.addLayer(layer); + scene.render() + }); + }); + + + + }, []); + return ( +
+ ); +}; diff --git a/dev-demos/bugs/heatmap/heatmap.md b/dev-demos/bugs/heatmap/heatmap.md new file mode 100644 index 0000000000..0d9a64ff93 --- /dev/null +++ b/dev-demos/bugs/heatmap/heatmap.md @@ -0,0 +1,2 @@ +### 热力图 + \ No newline at end of file diff --git a/dev-demos/bugs/point/demos/text.tsx b/dev-demos/bugs/point/demos/text.tsx index 26db4c3a44..3fdb061426 100644 --- a/dev-demos/bugs/point/demos/text.tsx +++ b/dev-demos/bugs/point/demos/text.tsx @@ -19,7 +19,7 @@ export default () => { .then(res => res.json()) .then(data => { const pointLayer = new PointLayer({}) - .source([], { + .source(data.list, { parser: { type: 'json', x: 'j', @@ -39,15 +39,9 @@ export default () => { strokeWidth: 0.3, // 描边宽度 strokeOpacity: 1.0 }); - pointLayer.style({ - stroke: '#f00', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - textAllowOverlap: false, - }) scene.addLayer(pointLayer); setTimeout(()=>{ - pointLayer.setData(data.list) + },2000) }); diff --git a/dev-demos/features/heatmap/demos/heatmap3d.tsx b/dev-demos/features/heatmap/demos/heatmap3d.tsx index ce71020c8c..77b3bc9d92 100644 --- a/dev-demos/features/heatmap/demos/heatmap3d.tsx +++ b/dev-demos/features/heatmap/demos/heatmap3d.tsx @@ -1,14 +1,14 @@ // @ts-ignore -import { Scene, HeatmapLayer } from '@antv/l7'; +import { Scene,RasterLayer, HeatmapLayer } from '@antv/l7'; // @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; +import { Map } from '@antv/l7-maps'; import React, { useEffect } from 'react'; export default () => { useEffect(() => { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Map({ center: [120, 30], pitch: 0, zoom: 2, @@ -16,6 +16,19 @@ export default () => { }); scene.on('loaded', () => { + const url1 = + 'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; + + const layer1 = new RasterLayer({ + zIndex: 0, + }).source(url1, { + parser: { + type: 'rasterTile', + tileSize: 256, + zoomOffset: 0, + }, + }); + scene.addLayer(layer1) fetch( 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', ) diff --git a/dev-demos/features/point/demos/iconfont.tsx b/dev-demos/features/point/demos/iconfont.tsx index 7599e56c6f..57e58c09fe 100644 --- a/dev-demos/features/point/demos/iconfont.tsx +++ b/dev-demos/features/point/demos/iconfont.tsx @@ -55,7 +55,7 @@ export default () => { iconfont: true, textAllowOverlap: true, }); - + console.log(imageLayer); scene.addLayer(imageLayer); // } diff --git a/dev-demos/features/point/demos/text.tsx b/dev-demos/features/point/demos/text.tsx index 12c179521a..41c2b1ba80 100644 --- a/dev-demos/features/point/demos/text.tsx +++ b/dev-demos/features/point/demos/text.tsx @@ -18,6 +18,17 @@ export default () => { fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) .then(data => { + const pointLayer1 = new PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('circle') + .size(5) + .color('red') const pointLayer = new PointLayer({}) .source(data.list, { parser: { @@ -39,13 +50,15 @@ export default () => { strokeWidth: 0.3, // 描边宽度 strokeOpacity: 1.0 }); - pointLayer.style({ - stroke: '#f00', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0 - }) + scene.addLayer(pointLayer1); scene.addLayer(pointLayer); - console.log(pointLayer) + setTimeout(()=>{ + pointLayer.style({ + textAnchor:'left' + // textOffset: [ 40, 40 ], // 文本相对锚点的偏移量 [水平, 垂直] + }) + scene.render() + },2000) }); }); diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index ac2894e5b5..b55ed0a111 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -80,7 +80,7 @@ export interface ILayerModel { getAnimateUniforms(): IModelUniform; buildModels(): Promise; initModels(): Promise; - needUpdate(): boolean; + needUpdate():Promise clearModels(refresh?: boolean): void; // canvasLayer diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 35b99a8c93..c67cde504d 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -512,7 +512,7 @@ export default class BaseModel return {}; } - public needUpdate(): boolean { + public async needUpdate(): Promise { return false; } // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/packages/layers/src/plugins/UpdateModelPlugin.ts b/packages/layers/src/plugins/UpdateModelPlugin.ts index 50af6ea511..61902e7ec5 100644 --- a/packages/layers/src/plugins/UpdateModelPlugin.ts +++ b/packages/layers/src/plugins/UpdateModelPlugin.ts @@ -10,7 +10,11 @@ export default class UpdateModelPlugin implements ILayerPlugin { layer.hooks.beforeRender.tap('UpdateModelPlugin', () => { // 处理文本更新 if (layer.layerModel) { - layer.layerModel.needUpdate(); + layer.layerModel.needUpdate().then((flag) => { + if (flag) { + layer.renderLayers(); + } + }); } }); layer.hooks.afterRender.tap('UpdateModelPlugin', () => { diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index bf8c44dc7b..b12551c392 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -103,6 +103,7 @@ export default class TextModel extends BaseModel { stroke = '#fff', strokeWidth = 0, textAnchor = 'center', + textOffset, textAllowOverlap = false, halo = 0.5, gamma = 2.0, @@ -114,9 +115,11 @@ export default class TextModel extends BaseModel { this.updateTexture(); this.textCount = Object.keys(mapping).length; } + this.preTextStyle = { textAnchor, textAllowOverlap, + textOffset, }; if ( @@ -185,10 +188,12 @@ export default class TextModel extends BaseModel { const { textAnchor = 'center', textAllowOverlap = true, + textOffset, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; this.preTextStyle = { textAnchor, textAllowOverlap, + textOffset }; return await this.buildModels(); } @@ -221,11 +226,17 @@ export default class TextModel extends BaseModel { } - public needUpdate() { + public async needUpdate():Promise { const { textAllowOverlap = false, + textAnchor = 'center', + textOffset } = this.layer.getLayerConfig() as IPointLayerStyleOptions; const data = this.layer.getEncodedData(); + if(JSON.stringify(textOffset) !==JSON.stringify(this.preTextStyle.textOffset) ||textAnchor!==this.preTextStyle.textAnchor ) { + await this.mapping(); + return true; + } if(data.length < 5 || textAllowOverlap) { // 小于不做避让 return false; } @@ -240,7 +251,7 @@ export default class TextModel extends BaseModel { textAllowOverlap !== this.preTextStyle.textAllowOverlap ) { // TODO this.mapping 数据未变化，避让 - this.reBuildModel(); + await this.reBuildModel(); return true; } @@ -419,12 +430,12 @@ export default class TextModel extends BaseModel { const { spacing = 2, textAnchor = 'center', - // textOffset, + textOffset, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; const data = this.layer.getEncodedData(); this.glyphInfo = data.map((feature: IEncodeFeature) => { - const { shape = '', id, size = 1, textOffset = [0, 0] } = feature; + const { shape = '', id, size = 1, } = feature; const shaping = shapeText( shape.toString(), @@ -434,7 +445,7 @@ export default class TextModel extends BaseModel { textAnchor, 'left', spacing, - textOffset, + textOffset || feature.textOffset || [0,0], iconfont, ); const glyphQuads = getGlyphQuads(shaping, textOffset, false); @@ -556,6 +567,5 @@ export default class TextModel extends BaseModel { }); // TODO 渲染流程待修改 this.layer.models = [model]; - // this.layerService.throttleRenderLayers(); } } diff --git a/packages/site/docs/api/scene.zh.md b/packages/site/docs/api/scene.zh.md index c5075affc1..cf1a7c4efa 100644 --- a/packages/site/docs/api/scene.zh.md +++ b/packages/site/docs/api/scene.zh.md @@ -373,6 +373,12 @@ export interface ICameraOptions { type ICenter = [number, number]; scene.setZoomAndCenter(zoom, center); ``` +### setZoom(zoom: number): void 设置地图旋转 +设置地图缩放等级 + +```javascript +scene.setZoom(10); +``` ### setRotation(rotation: number): void 设置地图旋转