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

fix: amap repeat js load

This commit is contained in:
thinkinggis 2020-01-19 19:40:25 +08:00
parent 25d74cbc5a
commit 178fb36c9e
8 changed files with 112 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/tutorial/data.en.md
View File

@ -55,7 +55,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
}
```
## 地理统计分析工具
#### 全国行政区划GeoJON 支持省市县维度 
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
## 在线工具

4
docs/tutorial/data.zh.md
View File

@ -66,8 +66,8 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />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 全球行政区划数据集

2
package.json
View File

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

4
packages/core/src/services/log/LogService.ts
View File

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

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

@ -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`);
});
/**

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

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

12
stories/Layers/components/data_update.tsx
View File

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

76
stories/MapAdaptor/components/MultiAMap.tsx
View File

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