mirror of https://gitee.com/antv-l7/antv-l7
parent
f39b6f3653
commit
8e7614c376
|
@ -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
|
// @ts-ignore
|
||||||
import { LineLayer, Scene } from '@antv/l7';
|
import { LineLayer, Scene } from '@antv/l7';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
import { GaodeMapV1 } from '@antv/l7-maps';
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new GaodeMap({
|
map: new GaodeMapV1({
|
||||||
center: [116.3956, 39.9392],
|
center: [116.3956, 39.9392],
|
||||||
zoom: 10,
|
zoom: 10,
|
||||||
style: 'amap://styles/wine',
|
style:'light'
|
||||||
|
// style: 'amap://styles/wine',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -28,8 +29,8 @@ export default () => {
|
||||||
.color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
|
.color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
|
||||||
.active(true)
|
.active(true)
|
||||||
.style({
|
.style({
|
||||||
lineType: 'dash',
|
// lineType: 'dash',
|
||||||
dashArray: [5, 5],
|
// dashArray: [5, 5],
|
||||||
});
|
});
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
|
|
||||||
|
|
|
@ -168,7 +168,7 @@
|
||||||
"site:publish": "lerna --scope @antv/l7-site exec yarn run site:publish",
|
"site:publish": "lerna --scope @antv/l7-site exec yarn run site:publish",
|
||||||
"async-site": "sh ./scripts/site.sh",
|
"async-site": "sh ./scripts/site.sh",
|
||||||
"prebuild": "yarn clean && run-p tsc lint",
|
"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",
|
"postbuild": "yarn build:declarations",
|
||||||
"build:declarations": "lerna run tsc --stream --no-bail",
|
"build:declarations": "lerna run tsc --stream --no-bail",
|
||||||
"tslint": "tslint packages/**/src/**/*.ts -c tslint.prod.json",
|
"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.map.onCameraChanged((viewport: IViewport) => {
|
||||||
this.cameraService.init();
|
this.cameraService.init();
|
||||||
this.cameraService.update(viewport);
|
this.cameraService.update(viewport);
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -318,8 +317,8 @@ export default class Scene extends EventEmitter implements ISceneService {
|
||||||
this.inited = true;
|
this.inited = true;
|
||||||
} else {
|
} else {
|
||||||
// 尝试初始化未初始化的图层
|
// 尝试初始化未初始化的图层
|
||||||
this.layerService.initLayers();
|
await this.layerService.initLayers();
|
||||||
this.layerService.renderLayers();
|
await this.layerService.renderLayers();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组件需要等待layer 初始化完成之后添加
|
// 组件需要等待layer 初始化完成之后添加
|
||||||
|
|
|
@ -7,6 +7,12 @@ export default {
|
||||||
|
|
||||||
output:'lib'
|
output:'lib'
|
||||||
},
|
},
|
||||||
|
umd: {
|
||||||
|
output: 'dist',
|
||||||
|
externals: {
|
||||||
|
"mapbox-gl": "mapboxgl",
|
||||||
|
},
|
||||||
|
},
|
||||||
platform:'browser',
|
platform:'browser',
|
||||||
autoprefixer: {
|
autoprefixer: {
|
||||||
browsers: ['IE 11', 'last 2 versions'],
|
browsers: ['IE 11', 'last 2 versions'],
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
"types": "es/index.d.ts",
|
"types": "es/index.d.ts",
|
||||||
"unpkg": "dist/l7-maps.js",
|
"unpkg": "dist/l7-maps.min.js",
|
||||||
"sideEffects": false,
|
"sideEffects": false,
|
||||||
"files": [
|
"files": [
|
||||||
"dist",
|
"dist",
|
||||||
|
|
|
@ -529,10 +529,6 @@ export default abstract class AMapBaseService
|
||||||
|
|
||||||
if (this.cameraChangedCallback) {
|
if (this.cameraChangedCallback) {
|
||||||
// resync viewport
|
// resync viewport
|
||||||
// console.log('cameraHeight', height)
|
|
||||||
// console.log('pitch', pitch)
|
|
||||||
// console.log('rotation', rotation)
|
|
||||||
// console.log('zoom', this.map.getZoom())
|
|
||||||
this.viewport.syncWithMapCamera({
|
this.viewport.syncWithMapCamera({
|
||||||
aspect,
|
aspect,
|
||||||
// AMap 定义 rotation 为顺时针方向,而 Mapbox 为逆时针
|
// AMap 定义 rotation 为顺时针方向,而 Mapbox 为逆时针
|
||||||
|
|
Loading…
Reference in New Issue