p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(examples): update examples

This commit is contained in:
thinkinggis 2019-11-15 00:42:35 +08:00
parent d46a58d406 ff3cb25c62
commit 0fe25851ab
40 changed files with 8329 additions and 672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
}

1
examples/heatmap/heatmap/demo/meta.json
View File

@ -6,6 +6,7 @@
"demos": [
{
"filename": "world3d.js",
"title": "经典热力图3D",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
},

1
examples/heatmap/heatmap/demo/world.js
View File

@ -8,6 +8,7 @@ const scene = new Scene({
type: 'mapbox',
zoom: 2.632456779444394
});
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
.then((res) => res.json())
.then((data) => {

1
examples/heatmap/heatmap/demo/world3d.js
View File

@ -8,6 +8,7 @@ const scene = new Scene({
type: 'mapbox',
zoom: 3,
});
window.mapScene = scene;
fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
.then((res) => res.json())

42
examples/line/path/demo/ele.js
View File

@ -1,42 +0,0 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 23.107329],
zoom: 14,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color(
'ELEV',
[ '#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5' ].reverse()
)
scene.addLayer(layer);
console.log(layer);
});

29
examples/line/path/demo/line.js
View File

@ -1,29 +0,0 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 33.107329],
zoom: 3.5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.scale('value',{
type: 'quantile'
})
.size('value', [0.5, 1, 1.5, 2])
.shape('line')
.color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
.animate({enable:true})
scene.addLayer(layer);
console.log(layer);
});

39
examples/marker/basic/demo/line.js
View File

@ -1,39 +0,0 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [102.602992, 23.107329],
zoom: 13,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size(1)
.shape('line')
.color(
'ELEV',
[
'#E8FCFF',
'#CFF6FF',
'#A1E9ff',
'#65CEF7',
'#3CB1F0',
'#2894E0',
'#1772c2',
'#105CB3',
'#0D408C',
'#002466',
].reverse(),
)
scene.addLayer(layer);
console.log(layer);
});

13
examples/marker/basic/demo/meta.json
View File

@ -1,13 +0,0 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "线图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/marker/basic/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 标注
order: 0
---

4
examples/point/scatter/demo/meta.json
View File

@ -15,9 +15,5 @@
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
}
]
}

94
examples/point/scatter/demo/scater.js Normal file
View File

@ -0,0 +1,94 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
type: 'amap',
style: 'light',
center: [-122.80009283836715, 37.05881309947238],
pitch: 0,
zoom: 5.740491857794806
});
const colorObj = {
redyellow: [
'#8A191A', '#AE3235',
'#CC464B', '#E26A5D',
'#EC8765', '#F0A66C',
'#F4BC8F', '#FFCEA7',
'#FFE4CE', '#FFF2E8'
],
yellow: [
'#7B320A', '#B35B21',
'#D2722E', '#F0883A',
'#FBA045', '#FAB04B',
'#FAC760', '#FBD78C',
'#FCE6B3', '#FCF3DB'
],
blue_green: [
'#094D4A', '#146968',
'#1D7F7E', '#289899',
'#34B6B7', '#4AC5AF',
'#5FD3A6', '#7BE39E',
'#A1EDB8', '#CEF8D6'
],
blue: [
'#0A3663', '#1558AC',
'#3771D9', '#4D89E5',
'#64A5D3', '#72BED6',
'#83CED6', '#A6E1E0',
'#B8EFE2', '#D7F9F0'
],
purple: [
'#312B60', '#4A457E',
'#615C99', '#816CAD',
'#A67FB5', '#C997C7',
'#DEB8D4', '#F5D4E6',
'#FAE4F1', '#FFF3FC'
],
color1: [
'#E4682F', '#FF8752',
'#FFA783', '#FFBEA8',
'#FFDCD6', '#EEF3FF',
'#C8D7F5', '#A5C1FC',
'#7FA7F9', '#5F8AE5'
],
color2: [
'#F1646A', '#F48789',
'#F7A9AC', '#FBCCCD',
'#FDEEEE', '#EEF3FF',
'#C8DAFE', '#A5C1FC',
'#80A8FB', '#5B8EF8'
],
color3: [
'#EEF3FF', '#C8DAFE',
'#A5C1FC', '#80A8FB',
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
}
fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
.then((res) => res.text())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data,{
parser:{
type:'csv',
x:'Longitude',
y:'Latitude'
}
})
.shape('circle')
.size(4)
.color('Magnitude',colorObj.yellow)
.style({
opacity: 0.5,
strokeWidth: 0,
})
scene.addLayer(pointLayer);
});

2
examples/polygon/basic/demo/meta.json
View File

@ -11,7 +11,7 @@
},
{
"filename": "fill.js",
"title": "北京房价填充图",
"title": "分类填充图",
"screenshot": ""
}
]

9
examples/scene/map/demo/amap.js
View File

@ -1,9 +0,0 @@
import { Scene } from './node_modules/@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});

0
examples/scene/control/demo/amap.js → examples/tutorial/control/demo/amap.js
View File

4
examples/scene/control/demo/mapbox.js → examples/tutorial/control/demo/mapbox.js
View File

@ -10,7 +10,9 @@ const scene = new Scene({
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
const scaleControl = new Scale({
position:'rightbottom',
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

0
examples/scene/control/demo/meta.json → examples/tutorial/control/demo/meta.json
View File

57
examples/tutorial/control/demo/popup.js Normal file
View File

@ -0,0 +1,57 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
import { Scale, Zoom, Layers } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 0.3,
strokeWidth: 1,
})
scene.addLayer(pointLayer);
var overlayers = {
"围栏填充": pointLayer,
};
var baseLayers = {
"基础地图": pointLayer,
};
const layersControl = new Layers({
overlayers: overlayers,
baseLayers,
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

2
examples/scene/control/index.zh.md → examples/tutorial/control/index.zh.md
View File

@ -1,6 +1,6 @@
---
title: 组件
order: 0
order: 2
---

0
examples/data/basic/demo/line.js → examples/tutorial/data/demo/line.js
View File

0
examples/data/basic/demo/meta.json → examples/tutorial/data/demo/meta.json
View File

2
examples/data/basic/index.zh.md → examples/tutorial/data/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 数据
order: 0
order: 1
---

0
examples/scene/basic/demo/amap.js → examples/tutorial/map/demo/amap.js
View File

0
examples/scene/basic/demo/mapbox.js → examples/tutorial/map/demo/mapbox.js
View File

0
examples/scene/basic/demo/meta.json → examples/tutorial/map/demo/meta.json
View File

0
examples/scene/basic/index.zh.md → examples/tutorial/map/index.zh.md
View File

28
gatsby-config.js
View File

@ -89,22 +89,6 @@ module.exports = {
en: 'Gallery',
},
},
{
slug: 'data',
icon: 'data',
title: {
zh: '数据源',
en: 'data',
},
},
{
slug: 'scene',
icon: 'map',
title: {
zh: '场景',
en: 'Scene',
},
},
{
slug: 'point',
icon: 'point',
@ -147,19 +131,17 @@ module.exports = {
},
},
{
slug: 'marker',
icon: 'mapmarker',
slug: 'tutorial',
icon: 'map',
title: {
zh: '标注',
en: 'Marker',
zh: '教程示例',
en: 'tutorial',
},
}
},
],
exampleContainer: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
playground: {
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
playgroundDidMount: 'console.log("playgroundDidMount");',
playgroundWillUnmount: 'console.log("scene");',
},
},

3
lerna.json
View File

@ -10,7 +10,8 @@
"verifyRegistry": false,
"allowBranch": [
"master",
"develop"
"develop",
"next"
],
"message": "chore: publish"
}

6
package.json
View File

@ -50,6 +50,8 @@
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.0.0-beta6",
"gatsby": "^2.17.7",
"gatsby-remark-prettier": "^1.0.0",
"geotiff": "^1.0.0-beta.6",
"gh-pages": "^2.1.1",
"gl": "^4.4.0",
"html-webpack-plugin": "^3.2.0",
@ -62,7 +64,7 @@
"npm-run-all": "^4.1.5",
"postcss": "^7.0.18",
"postcss-plugin": "^1.0.0",
"prettier": "^1.18.2",
"prettier": "^1.19.1",
"raw-loader": "^1.0.0",
"react": "^16.8.6",
"react-docgen-typescript-loader": "^3.1.0",
@ -97,7 +99,7 @@
"site:deploy": "npm run site:build && gh-pages -d public",
"prebuild": "run-p tsc lint",
"build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
"postbuild": "yarn build:declarations",
"todo:postbuild": "yarn build:declarations",
"fix": "run-p -c 'lint:ts-* --fix'",
"lint:css": "stylelint 'packages/**/*.ts{,x}'",
"lint:ts-prod": "tslint --config tslint.prod.json 'packages/**/*.ts{,x}'",

3
packages/component/src/control/layer.ts
View File

@ -220,7 +220,8 @@ export default class Layers extends Control {
const obj = this.layerService.getLayer(e.target.layerId);
const type = obj.overlay
// @ts-ignore
const type = obj?.overlay
? e.type === 'add'
? 'overlayadd'
: 'overlayremove'

2
packages/core/src/services/layer/LayerService.ts
View File

@ -26,8 +26,6 @@ export default class LayerService implements ILayerService {
this.layers.push(layer);
this.initPlugin(layer);
layer.init();
// 添加完成需要触发重绘
// this.renderLayers();
}
public initLayers() {

6
packages/core/src/services/map/IMapService.ts
View File

@ -20,9 +20,9 @@ export interface IMapService {
getMarkerContainer(): HTMLElement;
// MapEvent // 定义事件类型
on(type: string, hander: (...args: any[]) => void): void;
off(type: string, hander: (...args: any[]) => void): void;
once(type: string, hander: (...args: any[]) => void): void;
on(type: string, handler: (...args: any[]) => void): void;
off(type: string, handler: (...args: any[]) => void): void;
once(type: string, handler: (...args: any[]) => void): void;
// get dom
getContainer(): HTMLElement | null;
getSize(): [number, number];

26
packages/core/src/services/scene/SceneService.ts
View File

@ -59,7 +59,8 @@ export default class Scene extends EventEmitter implements ISceneService {
/**
* 是否首次渲染
*/
private inited: boolean;
private inited: boolean = false;
private initPromise: Promise<void>;
/**
* canvas 容器
@ -87,6 +88,8 @@ export default class Scene extends EventEmitter implements ISceneService {
public init(globalConfig: IGlobalConfig) {
this.initClear();
this.configService.setAndCheckConfig(globalConfig);
// 初始化 ShaderModule
this.shaderModule.registerBuiltinModules();
// 初始化资源管理 图片
this.iconService.init();
@ -116,6 +119,9 @@ export default class Scene extends EventEmitter implements ISceneService {
// 重新绑定非首次相机更新事件
this.map.onCameraChanged(this.handleMapCameraChanged);
this.logger.info('map loaded');
// scene 创建完成自动调用render 方法
this.render();
});
/**
@ -134,9 +140,6 @@ export default class Scene extends EventEmitter implements ISceneService {
this.logger.error('容器 id 不存在');
}
// 初始化 ShaderModule
this.shaderModule.registerBuiltinModules();
// 初始化 container 上的交互
this.interactionService.init();
@ -144,29 +147,30 @@ export default class Scene extends EventEmitter implements ISceneService {
});
// TODO：init worker, fontAtlas...
// 执行异步并行初始化任务
this.initPromise = this.hooks.init.promise(this.configService.getConfig());
}
public addLayer(layer: ILayer) {
this.logger.info(`add layer ${layer.name}`);
this.layerService.add(layer);
}
public async render() {
// 首次初始化，或者地图的容器被强制销毁的需要重新初始化
if (!this.inited) {
// 首次渲染需要等待底图、相机初始化
await this.hooks.init.promise(this.configService.getConfig());
// 初始化marker 容器
// 还未初始化完成需要等待
await this.initPromise;
// 初始化 marker 容器 TODO: 可以放到 map 初始化方法中？
this.map.addMarkerContainer();
this.logger.info(' render inited');
this.inited = true;
this.layerService.renderLayers();
this.emit('loaded');
}
this.layerService.renderLayers();
// this.logger.info('render');
this.logger.info('render');
}
public destroy() {

6
packages/layers/src/core/triangulation.ts
View File

@ -13,6 +13,7 @@ import {
ShapeType2D,
ShapeType3D,
} from './shape/Path';
type IShape = ShapeType2D & ShapeType3D;
interface IGeometryCache {
[key: string]: IExtrudeGeomety;
}
@ -94,10 +95,7 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
export function HeatmapGridTriangulation(feature: IEncodeFeature) {
const { shape } = feature;
const { positions, index } = getHeatmapGeometry(
shape as ShapeType2D | ShapeType3D,
);
const { positions, index } = getHeatmapGeometry(shape as IShape);
return {
vertices: positions, // [ x, y, z ] 多边形顶点
indices: index,

1
packages/layers/src/plugins/FeatureScalePlugin.ts
View File

@ -192,7 +192,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
return styleScale;
}
const firstValue = data!.find((d) => !isNil(d[field]))?.[field];
// 常量 Scale
if (this.isNumber(field) || (isNil(firstValue) && !scaleOption)) {
styleScale.scale = d3.scaleOrdinal([field]);

22
packages/maps/src/amap/index.ts
View File

@ -34,7 +34,7 @@ export default class AMapService implements IMapService {
@inject(TYPES.ICoordinateSystemService)
private readonly coordinateSystemService: ICoordinateSystemService;
@inject(TYPES.IEventEmitter)
private eventEmitter: IEventEmitter;
private eventEmitter: any;
private markerContainer: HTMLElement;
private $mapContainer: HTMLElement | null;
private $jsapi: HTMLScriptElement;
@ -58,15 +58,19 @@ export default class AMapService implements IMapService {
}
// map event
public on(type: string, handle: (...args: any[]) => void): void {
public on(type: string, handler: (...args: any[]) => void): void {
if (MapServiceEvent.indexOf(type) !== -1) {
this.eventEmitter.on(type, handle);
this.eventEmitter.on(type, handler);
} else {
this.map.on(type, handle);
this.map.on(type, handler);
}
}
public off(type: string, handle: (...args: any[]) => void): void {
this.map.off(type, handle);
public off(type: string, handler: (...args: any[]) => void): void {
if (MapServiceEvent.indexOf(type) !== -1) {
this.eventEmitter.off(type, handler);
} else {
this.map.off(type, handler);
}
}
public getContainer(): HTMLElement | null {
@ -203,7 +207,7 @@ export default class AMapService implements IMapService {
});
// 监听地图相机时间
this.map.on('camerachange', this.handleCameraChanged);
this.map.on('camerachange', this.handlerCameraChanged);
this.emit('mapload');
resolve();
};
@ -241,7 +245,7 @@ export default class AMapService implements IMapService {
this.cameraChangedCallback = callback;
}
private handleCameraChanged = (e: IAMapEvent): void => {
private handlerCameraChanged = (e: IAMapEvent): void => {
const {
fov,
near,
@ -273,7 +277,7 @@ export default class AMapService implements IMapService {
// set coordinate system
// if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
// // TODO:偏移坐标系高德地图不支持 pith bear 同步
// // TODO:偏移坐标系高德地图不支持 pitch bear 同步
// this.coordinateSystemService.setCoordinateSystem(
// CoordinateSystem.P20_OFFSET,
// );

34
packages/maps/src/map.ts
View File

@ -1,34 +0,0 @@
import {
Bounds,
container,
CoordinateSystem,
ICoordinateSystemService,
ILngLat,
IMapConfig,
IMapService,
IPoint,
IViewport,
MapType,
TYPES,
} from '@l7/core';
import { DOM } from '@l7/utils';
import { inject, injectable } from 'inversify';
import { IAMapEvent, IAMapInstance } from '../typings/index';
@injectable()
export default class MapService<MapInstance> implements IMapService {
public map: MapInstance;
@inject(TYPES.ICoordinateSystemService)
protected readonly coordinateSystemService: ICoordinateSystemService;
@inject(TYPES.IEventEmitter)
protected eventEmitter: IEventEmitter;
protected markerContainer: HTMLElement;
protected $mapContainer: HTMLElement | null;
private cameraChangedCallback: (viewport: IViewport) => void;
public getMarkerContainer(): HTMLElement {
return this.markerContainer;
}
}

2
packages/maps/src/mapbox/index.ts
View File

@ -40,7 +40,7 @@ export default class MapboxService implements IMapService {
private readonly coordinateSystemService: ICoordinateSystemService;
@inject(TYPES.IEventEmitter)
private eventEmitter: IEventEmitter;
private eventEmitter: any;
private viewport: Viewport;
private markerContainer: HTMLElement;
private cameraChangedCallback: (viewport: IViewport) => void;

12
packages/scene/src/index.ts
View File

@ -102,15 +102,16 @@ class Scene {
// 依赖注入
this.sceneService = container.get<ISceneService>(TYPES.ISceneService);
this.sceneService.init(config);
this.mapService = container.get<IMapService>(TYPES.IMapService);
this.iconService = container.get<IIconService>(TYPES.IIconService);
this.controlService = container.get<IControlService>(TYPES.IControlService);
this.layerService = container.get<ILayerService>(TYPES.ILayerService);
mapType = this.mapService.getType();
// 初始化 scene
this.init();
// 初始化 scene
this.sceneService.init(config);
// 初始化组件
this.initControl();
}
public getMapService(): IMapService {
@ -265,11 +266,6 @@ class Scene {
// TODO: 清理其他 Service 例如 IconService
}
private init(): void {
this.initControl();
this.render();
}
private initControl(): void {
this.addControl(new Logo());
}

1
stories/MapAdaptor/components/Mapbox.tsx
View File

@ -64,7 +64,6 @@ export default class Mapbox extends React.Component {
.addTo(scene);
scene.addControl(zoomControl);
scene.addControl(scaleControl);
console.log(layer);
// layer.fitBounds();
});
}

8541
yarn.lock
View File

File diff suppressed because it is too large Load Diff