mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
commit
f6926e8557
|
@ -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',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### gaodev1
|
||||
<code src="./demo/gaodev1.tsx"></code>
|
|
@ -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',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
### scale
|
||||
<code src="./demos/scale.tsx"></code>
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 初始化完成之后添加
|
||||
|
|
|
@ -7,6 +7,12 @@ export default {
|
|||
|
||||
output:'lib'
|
||||
},
|
||||
umd: {
|
||||
output: 'dist',
|
||||
externals: {
|
||||
"mapbox-gl": "mapboxgl",
|
||||
},
|
||||
},
|
||||
platform:'browser',
|
||||
autoprefixer: {
|
||||
browsers: ['IE 11', 'last 2 versions'],
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 为逆时针
|
||||
|
|
Loading…
Reference in New Issue