diff --git a/docs/tutorial/data.en.md b/docs/tutorial/data.en.md
index 483c3af048..45470c92aa 100644
--- a/docs/tutorial/data.en.md
+++ b/docs/tutorial/data.en.md
@@ -55,7 +55,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支
}
```
-## 地理统计分析工具
+#### 全国行政区划GeoJON 支持省市县维度
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
## 在线工具
diff --git a/docs/tutorial/data.zh.md b/docs/tutorial/data.zh.md
index ac63abf260..7860943c6e 100644
--- a/docs/tutorial/data.zh.md
+++ b/docs/tutorial/data.zh.md
@@ -66,8 +66,8 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支
## 数据资源
-#### 全国行政区划边界
-[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
+#### 全国行政区划GeoJON 支持省市县维度
+[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
#### HighCharts 全球行政区划数据集
diff --git a/package.json b/package.json
index 7f39d1369f..7cd3690df6 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
"test-live": "cross-env BABEL_ENV=test DEBUG_MODE=1 jest --watch packages/scene/__tests__/index.spec.ts ",
"coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
"tsc": "tsc",
- "watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs NODE_ENV=production babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+ "watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"bundle": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
"bundle:watch": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch",
"glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts
index fd419c2200..533e2d2145 100644
--- a/packages/core/src/services/log/LogService.ts
+++ b/packages/core/src/services/log/LogService.ts
@@ -1,8 +1,8 @@
import { injectable } from 'inversify';
import Probe, { Log } from 'probe.gl';
import { ILogService } from './ILogService';
-
-const Logger = new Log({ id: 'L7' }).enable(false);
+console.log(process.env.NODE_ENV)
+const Logger = new Log({ id: 'L7' }).enable(true);
// // 只输出 debug 级别以上的日志信息
Logger.priority = 5;
diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts
index 52ef208091..006f46230e 100644
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@@ -144,7 +144,7 @@ export default class Scene extends EventEmitter implements ISceneService {
this.markerService.addMarkerLayers();
// 地图初始化之后 才能初始化 container 上的交互
this.interactionService.init();
- this.logger.debug('map loaded');
+ this.logger.debug(`map ${this.id} loaded`);
});
/**
diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts
index be812bff53..ef143e776d 100644
--- a/packages/maps/src/amap/index.ts
+++ b/packages/maps/src/amap/index.ts
@@ -248,43 +248,40 @@ export default class AMapService
this.$mapContainer = this.creatAmapContainer(
id as string | HTMLDivElement,
);
- // @ts-ignore
- this.map = new AMap.Map(this.$mapContainer, {
+
+ const map = new AMap.Map(this.$mapContainer, {
mapStyle: this.getMapStyle(style as string),
zooms: [minZoom, maxZoom],
viewMode: '3D',
...rest,
});
// 监听地图相机事件
- this.map.on('camerachange', this.handleCameraChanged);
- resolve();
+ map.on('camerachange', this.handleCameraChanged);
+ // @ts-ignore
+ this.map = map;
+ setTimeout(() => {
+ resolve();
+ }, 10);
}
};
- if (!document.getElementById(AMAP_SCRIPT_ID) || !mapInstance) {
- // 异步加载高德地图
- // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
- // @ts-ignore
- window.initAMap = (): void => {
- amapLoaded = true;
+ if (!amapLoaded && !mapInstance) {
+ if (token === AMAP_API_KEY) {
+ this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
+ }
+ amapLoaded = true;
+ this.loadAMapScript(
+ `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D${plugin.join(
+ ',',
+ )}`,
+ ).then(() => {
resolveMap();
if (pendingResolveQueue.length) {
pendingResolveQueue.forEach((r) => r());
pendingResolveQueue = [];
}
- };
- if (token === AMAP_API_KEY) {
- this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
- }
- const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D${plugin.join(
- ',',
- )}&callback=initAMap`;
- const $jsapi = document.createElement('script');
- $jsapi.id = AMAP_SCRIPT_ID;
- $jsapi.charset = 'utf-8';
- $jsapi.src = url;
- document.head.appendChild($jsapi);
+ });
} else {
- if (amapLoaded || mapInstance) {
+ if ((amapLoaded && window.AMap) || mapInstance) {
resolveMap();
} else {
pendingResolveQueue.push(resolveMap);
@@ -381,4 +378,15 @@ export default class AMapService
$wrapper.appendChild($amapdiv);
return $amapdiv;
}
+ private loadAMapScript(src: string) {
+ return new Promise((resolve, reject) => {
+ const script = document.createElement('script');
+ script.src = src;
+ script.onload = () => {
+ resolve();
+ };
+ script.onerror = reject;
+ document.head.appendChild(script);
+ });
+ }
}
diff --git a/stories/Layers/components/data_update.tsx b/stories/Layers/components/data_update.tsx
index 4325d7a105..1610e537b8 100644
--- a/stories/Layers/components/data_update.tsx
+++ b/stories/Layers/components/data_update.tsx
@@ -55,13 +55,13 @@ export default class DataUpdate extends React.Component {
scene.addLayer(layer);
layer.setData(pointOnCircle(1000));
scene.render();
- // function animateMarker(timestamp: number) {
- // layer.setData(pointOnCircle(timestamp / 1000));
- // scene.render();
- // requestAnimationFrame(animateMarker);
- // }
+ function animateMarker(timestamp: number) {
+ layer.setData(pointOnCircle(timestamp / 1000));
+ scene.render();
+ requestAnimationFrame(animateMarker);
+ }
// layer.on('inited', () => {
- // animateMarker(0);
+ animateMarker(0);
// });
}
diff --git a/stories/MapAdaptor/components/MultiAMap.tsx b/stories/MapAdaptor/components/MultiAMap.tsx
index 45cbe6cdc8..73837a61af 100644
--- a/stories/MapAdaptor/components/MultiAMap.tsx
+++ b/stories/MapAdaptor/components/MultiAMap.tsx
@@ -1,5 +1,5 @@
// @ts-ignore
-import { Scene } from '@antv/l7';
+import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
@@ -14,26 +14,86 @@ export default class MultiGaodeMap extends React.Component {
public async componentDidMount() {
const response = await fetch(
- 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+ 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
);
+ const data = await response.json();
const scene1 = new Scene({
id: 'map1',
map: new GaodeMap({
- center: [110.19382669582967, 50.258134],
- pitch: 0,
+ center: [121.435159, 31.256971],
+ zoom: 14.89,
style: 'light',
- zoom: 3,
}),
});
const scene2 = new Scene({
id: 'map2',
map: new GaodeMap({
- center: [110.19382669582967, 50.258134],
- pitch: 0,
+ center: [121.435159, 31.256971],
+ zoom: 14.89,
style: 'dark',
- zoom: 3,
}),
});
+
+ const pointLayer = new PointLayer({})
+ .source(data, {
+ parser: {
+ type: 'json',
+ x: 'longitude',
+ y: 'latitude',
+ },
+ })
+ .shape('name', [
+ 'circle',
+ 'triangle',
+ 'square',
+ 'pentagon',
+ 'hexagon',
+ 'octogon',
+ 'hexagram',
+ 'rhombus',
+ 'vesica',
+ ])
+ .size('unit_price', [10, 25])
+ .active(true)
+ .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
+ .style({
+ opacity: 0.3,
+ strokeWidth: 2,
+ });
+
+ const pointLayer2 = new PointLayer({})
+ .source(data, {
+ parser: {
+ type: 'json',
+ x: 'longitude',
+ y: 'latitude',
+ },
+ })
+ .shape('name', [
+ 'circle',
+ 'triangle',
+ 'square',
+ 'pentagon',
+ 'hexagon',
+ 'octogon',
+ 'hexagram',
+ 'rhombus',
+ 'vesica',
+ ])
+ .size('unit_price', [10, 25])
+ .active(true)
+ .color('#5B8FF9')
+ .style({
+ opacity: 0.3,
+ strokeWidth: 2,
+ });
+ scene1.on('loaded', () => {
+ scene1.addLayer(pointLayer);
+ });
+ scene2.on('loaded', () => {
+ scene2.addLayer(pointLayer2);
+ });
+
this.scene1 = scene1;
this.scene2 = scene2;
}