fix: 高德地图底图模式,事件交互注册顺序的问题导致不生效

This commit is contained in:
thinkinggis 2019-12-26 11:42:09 +08:00
parent 853f66671a
commit 4d98324f24
5 changed files with 52 additions and 54 deletions

View File

@ -68,7 +68,6 @@ export default class InteractionService extends EventEmitter
this.logger.debug('add event listeners on canvas');
}
}
private removeEventListenerOnMap() {
const $containter = this.mapService.getMapContainer();
if ($containter) {

View File

@ -137,6 +137,8 @@ export default class Scene extends EventEmitter implements ISceneService {
this.map.addMarkerContainer();
// 初始化未加载的marker;
this.markerService.addMarkers();
// 地图初始化之后 才能初始化 container 上的交互
this.interactionService.init();
this.logger.debug('map loaded');
});
@ -160,8 +162,6 @@ export default class Scene extends EventEmitter implements ISceneService {
this.logger.error('容器 id 不存在');
}
// 初始化 container 上的交互
this.interactionService.init();
this.logger.debug(`scene ${this.id} renderer loaded`);
});
// TODOinit worker, fontAtlas...

View File

@ -47,7 +47,7 @@ export function PointExtrudeTriangulation(feature: IEncodeFeature) {
indices: index,
normals,
// normals: Array.from(computeVertexNormals(positions, index, 3, false)),
size: 3,
size: 5,
};
}

View File

@ -114,7 +114,7 @@ export default class AMapService
}
public getZoom(): number {
// 统一返回 Mapbox 缩放等级
return this.map.getZoom();
return this.map.getZoom() - 1;
}
public setZoom(zoom: number): void {

View File

@ -24,59 +24,58 @@ export default class Point3D extends React.Component {
pitch: 0,
style: 'dark',
zoom: 3,
token: 'test',
}),
});
scene.on('loaded', () => {
const pointLayer = new PointLayer({})
.source(pointsData, {
cluster: true,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
pointLayer.on('mousemove', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
// scene.on('loaded', () => {
const pointLayer = new PointLayer({})
.source(pointsData, {
cluster: true,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
.color('yellow')
.style({
opacity: 0.5,
strokeWidth: 1,
});
pointLayer.on('mousedown', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('mouseup', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('click', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('contextmenu', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('unpick', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
this.scene = scene;
scene.addLayer(pointLayer);
pointLayer.on('mousemove', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('mousedown', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('mouseup', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('click', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('contextmenu', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('unpick', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
this.scene = scene;
// });
}
public render() {