From 8e7614c3766bfa29c523c86237bdda206af8ccea Mon Sep 17 00:00:00 2001 From: "@thinkinggis" Date: Mon, 28 Nov 2022 11:51:39 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0l7-maps=20=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=20=20umd=20(#1503)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 添加l7-maps 地图 * fix: 高德地图抖动问题 --- dev-demos/bugs/line/demo/gaodev1.tsx | 60 +++++++++++++++ dev-demos/bugs/line/line.md | 2 + dev-demos/bugs/polygon/demos/scale.tsx | 76 +++++++++++++++++++ dev-demos/bugs/polygon/scale.md | 2 + dev-demos/features/line/demos/linedash.tsx | 11 +-- package.json | 2 +- .../core/src/services/scene/SceneService.ts | 5 +- packages/maps/.fatherrc.ts | 6 ++ packages/maps/package.json | 2 +- .../maps/src/utils/amap/AMapBaseService.ts | 4 - 10 files changed, 156 insertions(+), 14 deletions(-) create mode 100644 dev-demos/bugs/line/demo/gaodev1.tsx create mode 100644 dev-demos/bugs/line/line.md create mode 100644 dev-demos/bugs/polygon/demos/scale.tsx create mode 100644 dev-demos/bugs/polygon/scale.md diff --git a/dev-demos/bugs/line/demo/gaodev1.tsx b/dev-demos/bugs/line/demo/gaodev1.tsx new file mode 100644 index 0000000000..fd82357514 --- /dev/null +++ b/dev-demos/bugs/line/demo/gaodev1.tsx @@ -0,0 +1,60 @@ +// @ts-ignore +import { LineLayer, GaodeMapV1,Scene } from '@antv/l7'; +import React, { useEffect } from 'react'; + +export default () => { + useEffect( () => { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV1({ + center: [121.472644, 31.231706], + zoom: 8.15, + style: 'dark', + }), + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/0290a972-eedd-42f6-b69e-50a35e8a0824.json' + ) + .then((res) => res.json()) + .then((data) => { + const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'json', + coordinates: 'coordinates', + }, + }) + .size(0.5) + .shape('line') + .active(true) + .color('length', [ + '#0A3663', + '#1558AC', + '#3771D9', + '#4D89E5', + '#64A5D3', + '#72BED6', + '#83CED6', + '#A6E1E0', + '#B8EFE2', + '#D7F9F0', + ]); + scene.addLayer(layer); + }); + }); + + + + }, []); + return ( +
+ ); + }; + \ No newline at end of file diff --git a/dev-demos/bugs/line/line.md b/dev-demos/bugs/line/line.md new file mode 100644 index 0000000000..f613cd9b35 --- /dev/null +++ b/dev-demos/bugs/line/line.md @@ -0,0 +1,2 @@ +### gaodev1 + \ No newline at end of file diff --git a/dev-demos/bugs/polygon/demos/scale.tsx b/dev-demos/bugs/polygon/demos/scale.tsx new file mode 100644 index 0000000000..7a065c99cb --- /dev/null +++ b/dev-demos/bugs/polygon/demos/scale.tsx @@ -0,0 +1,76 @@ +// + +// @ts-ignore +import { PolygonLayer, Scene } from '@antv/l7'; +// @ts-ignore +import {GaodeMap } from '@antv/l7-maps'; +import React, { useEffect } from 'react'; + +export default () => { + useEffect( () => { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [ 110, 36 ], + style: 'light', + zoom: 3 + }) + }); + const data = fetch('https://gw.alipayobjects.com/os/raptor/1669276113315/33.json').then(res=>res.json()).then((data)=>{ + const features = data.features.map((fe)=>{ + const name = fe.properties.name; + fe.properties.value = name ==='杭州市'? 46:0; + return fe; + }) + + const fill = new PolygonLayer({ + autoFit:true + }) + .source({ + type: 'FeatureCollection', + features, + }) + .shape('fill') + .scale('value',{ + type:'quantile' + }) + .color('value',[ + "rgb(247, 251, 255)", + "rgb(222, 235, 247)", + "rgb(198, 219, 239)", + "rgb(158, 202, 225)", + "rgb(107, 174, 214)", + "rgb(66, 146, 198)", + "rgb(33, 113, 181)", + "rgb(8, 81, 156)", + "rgb(8, 48, 107)" + ]) + .style({ + opacity:1, + + }); + + scene.addLayer(fill); + fill.on('inited',()=>{ + console.log(fill.getLegend('color')) + }) + + console.log(fill); + + }) + + + + + }, []); + return ( +
+ ); + }; + \ No newline at end of file diff --git a/dev-demos/bugs/polygon/scale.md b/dev-demos/bugs/polygon/scale.md new file mode 100644 index 0000000000..08a3790c5e --- /dev/null +++ b/dev-demos/bugs/polygon/scale.md @@ -0,0 +1,2 @@ +### scale + \ No newline at end of file diff --git a/dev-demos/features/line/demos/linedash.tsx b/dev-demos/features/line/demos/linedash.tsx index 15af03a816..6beb4ecf2b 100644 --- a/dev-demos/features/line/demos/linedash.tsx +++ b/dev-demos/features/line/demos/linedash.tsx @@ -1,17 +1,18 @@ // @ts-ignore import { LineLayer, Scene } from '@antv/l7'; // @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMapV1 } from '@antv/l7-maps'; import React, { useEffect } from 'react'; export default () => { useEffect(() => { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new GaodeMapV1({ center: [116.3956, 39.9392], zoom: 10, - style: 'amap://styles/wine', + style:'light' + // style: 'amap://styles/wine', }), }); @@ -28,8 +29,8 @@ export default () => { .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']) .active(true) .style({ - lineType: 'dash', - dashArray: [5, 5], + // lineType: 'dash', + // dashArray: [5, 5], }); scene.addLayer(layer); diff --git a/package.json b/package.json index d32e80f948..82c41f199d 100644 --- a/package.json +++ b/package.json @@ -168,7 +168,7 @@ "site:publish": "lerna --scope @antv/l7-site exec yarn run site:publish", "async-site": "sh ./scripts/site.sh", "prebuild": "yarn clean && run-p tsc lint", - "build": " yarn worker && lerna run build --ignore @antv/l7-site ", + "build": " yarn worker && lerna run build ", "postbuild": "yarn build:declarations", "build:declarations": "lerna run tsc --stream --no-bail", "tslint": "tslint packages/**/src/**/*.ts -c tslint.prod.json", diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index d1c41d2ff1..2fa9f520b0 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -139,7 +139,6 @@ export default class Scene extends EventEmitter implements ISceneService { this.map.onCameraChanged((viewport: IViewport) => { this.cameraService.init(); this.cameraService.update(viewport); - resolve(); }); @@ -318,8 +317,8 @@ export default class Scene extends EventEmitter implements ISceneService { this.inited = true; } else { // 尝试初始化未初始化的图层 - this.layerService.initLayers(); - this.layerService.renderLayers(); + await this.layerService.initLayers(); + await this.layerService.renderLayers(); } // 组件需要等待layer 初始化完成之后添加 diff --git a/packages/maps/.fatherrc.ts b/packages/maps/.fatherrc.ts index 8ba43fc58a..bcbff1c107 100644 --- a/packages/maps/.fatherrc.ts +++ b/packages/maps/.fatherrc.ts @@ -7,6 +7,12 @@ export default { output:'lib' }, + umd: { + output: 'dist', + externals: { + "mapbox-gl": "mapboxgl", + }, + }, platform:'browser', autoprefixer: { browsers: ['IE 11', 'last 2 versions'], diff --git a/packages/maps/package.json b/packages/maps/package.json index 981158a18a..ea4862d1a4 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -5,7 +5,7 @@ "main": "lib/index.js", "module": "es/index.js", "types": "es/index.d.ts", - "unpkg": "dist/l7-maps.js", + "unpkg": "dist/l7-maps.min.js", "sideEffects": false, "files": [ "dist", diff --git a/packages/maps/src/utils/amap/AMapBaseService.ts b/packages/maps/src/utils/amap/AMapBaseService.ts index 3bc212994a..0ce9188518 100644 --- a/packages/maps/src/utils/amap/AMapBaseService.ts +++ b/packages/maps/src/utils/amap/AMapBaseService.ts @@ -529,10 +529,6 @@ export default abstract class AMapBaseService if (this.cameraChangedCallback) { // resync viewport - // console.log('cameraHeight', height) - // console.log('pitch', pitch) - // console.log('rotation', rotation) - // console.log('zoom', this.map.getZoom()) this.viewport.syncWithMapCamera({ aspect, // AMap 定义 rotation 为顺时针方向，而 Mapbox 为逆时针