fix: 添加l7-maps 地图 umd (#1503)

* fix: 添加l7-maps 地图

* fix: 高德地图抖动问题
This commit is contained in:
@thinkinggis 2022-11-28 11:51:39 +08:00 committed by GitHub
parent f39b6f3653
commit 8e7614c376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 156 additions and 14 deletions

View File

@ -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 (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

View File

@ -0,0 +1,2 @@
### gaodev1
<code src="./demo/gaodev1.tsx"></code>

View File

@ -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 (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

View File

@ -0,0 +1,2 @@
### scale
<code src="./demos/scale.tsx"></code>

View File

@ -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);

View File

@ -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",

View File

@ -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 初始化完成之后添加

View File

@ -7,6 +7,12 @@ export default {
output:'lib'
},
umd: {
output: 'dist',
externals: {
"mapbox-gl": "mapboxgl",
},
},
platform:'browser',
autoprefixer: {
browsers: ['IE 11', 'last 2 versions'],

View File

@ -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",

View File

@ -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 为逆时针