mirror of https://gitee.com/antv-l7/antv-l7
chore(map): update version
This commit is contained in:
commit
bb167de24b
|
@ -80,4 +80,4 @@ packages/l7/package_bak.json
|
|||
|
||||
stories/Test
|
||||
packages/draw/node_modules/@turf
|
||||
packages/district/src/data
|
||||
packages/district/src/data
|
||||
|
|
|
@ -317,10 +317,13 @@ scene.setPitch(pitch);
|
|||
|
||||
参数 :
|
||||
|
||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112, 32, 114, 35]);
|
||||
scene.fitBounds([
|
||||
[112, 32],
|
||||
[114, 35],
|
||||
]);
|
||||
```
|
||||
|
||||
### getContainer
|
||||
|
|
|
@ -351,10 +351,13 @@ scene.setPitch(pitch);
|
|||
|
||||
参数 :
|
||||
|
||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112, 32, 114, 35]);
|
||||
scene.fitBounds([
|
||||
[112, 32],
|
||||
[114, 35],
|
||||
]);
|
||||
```
|
||||
|
||||
### removeLayer
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-district",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "L7 district moudules",
|
||||
"keywords": [],
|
||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
||||
|
@ -34,7 +34,7 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7": "2.2.21",
|
||||
"@antv/l7": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/circle": "^6.0.1",
|
||||
"@turf/distance": "^6.0.1",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -23,7 +23,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
|
@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter
|
|||
|
||||
private clickTimer: number;
|
||||
|
||||
private $containter: HTMLElement;
|
||||
|
||||
public init() {
|
||||
// 注册事件在地图底图上
|
||||
this.addEventListenerOnMap();
|
||||
this.$containter = this.mapService.getMapContainer() as HTMLElement;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
|
@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter
|
|||
const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
|
||||
return { x: clientX, y: clientY, lngLat, type };
|
||||
}
|
||||
private onHover = ({ x, y, type }: MouseEvent) => {
|
||||
private onHover = (event: MouseEvent) => {
|
||||
let { x, y } = event;
|
||||
const type = event.type;
|
||||
|
||||
const $containter = this.mapService.getMapContainer();
|
||||
if ($containter) {
|
||||
const { top, left } = $containter.getBoundingClientRect();
|
||||
|
|
|
@ -46,8 +46,12 @@ export default class PickingService implements IPickingService {
|
|||
createTexture2D,
|
||||
createFramebuffer,
|
||||
getViewportSize,
|
||||
getContainer,
|
||||
} = this.rendererService;
|
||||
const { width, height } = getViewportSize();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = (getContainer() as HTMLElement).getBoundingClientRect();
|
||||
this.pickBufferScale =
|
||||
this.configService.getSceneConfig(id).pickBufferScale || 1;
|
||||
// 创建 picking framebuffer,后续实时 resize
|
||||
|
@ -76,9 +80,16 @@ export default class PickingService implements IPickingService {
|
|||
this.alreadyInPicking = false;
|
||||
}
|
||||
private async pickingLayers(target: IInteractionTarget) {
|
||||
const { getViewportSize, useFramebuffer, clear } = this.rendererService;
|
||||
const { width, height } = getViewportSize();
|
||||
|
||||
const {
|
||||
getViewportSize,
|
||||
useFramebuffer,
|
||||
clear,
|
||||
getContainer,
|
||||
} = this.rendererService;
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = (getContainer() as HTMLElement).getBoundingClientRect();
|
||||
if (this.width !== width || this.height !== height) {
|
||||
this.pickingFBO.resize({
|
||||
width: Math.round(width / this.pickBufferScale),
|
||||
|
@ -113,8 +124,11 @@ export default class PickingService implements IPickingService {
|
|||
{ x, y, lngLat, type }: IInteractionTarget,
|
||||
) => {
|
||||
let isPicked = false;
|
||||
const { getViewportSize, readPixels } = this.rendererService;
|
||||
const { width, height } = getViewportSize();
|
||||
const { getViewportSize, readPixels, getContainer } = this.rendererService;
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = (getContainer() as HTMLElement).getBoundingClientRect();
|
||||
const { enableHighlight, enableSelect } = layer.getLayerConfig();
|
||||
|
||||
const xInDevicePixel = x * window.devicePixelRatio;
|
||||
|
|
|
@ -225,13 +225,13 @@ export default class StyleAttributeService implements IStyleAttributeService {
|
|||
verticesForCurrentFeature.length / vertexSize;
|
||||
|
||||
// 记录三角化结果,用于后续精确更新指定 feature
|
||||
// this.featureLayout.sizePerElement = size;
|
||||
// this.featureLayout.elements.push({
|
||||
// featureIdx,
|
||||
// vertices: verticesForCurrentFeature,
|
||||
// normals: normalsForCurrentFeature as number[],
|
||||
// offset: verticesNum,
|
||||
// });
|
||||
this.featureLayout.sizePerElement = size;
|
||||
this.featureLayout.elements.push({
|
||||
featureIdx,
|
||||
vertices: verticesForCurrentFeature,
|
||||
normals: normalsForCurrentFeature as number[],
|
||||
offset: verticesNum,
|
||||
});
|
||||
|
||||
verticesNum += verticesNumForCurrentFeature;
|
||||
// 根据 position 顶点生成其他顶点数据
|
||||
|
|
|
@ -42,7 +42,7 @@ export interface IReadPixelsOptions {
|
|||
}
|
||||
|
||||
export interface IRendererService {
|
||||
init($container: HTMLDivElement, cfg: IRenderConfig): Promise<void>;
|
||||
init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
|
||||
clear(options: IClearOptions): void;
|
||||
createModel(options: IModelInitializationOptions): IModel;
|
||||
createAttribute(options: IAttributeInitializationOptions): IAttribute;
|
||||
|
|
|
@ -100,6 +100,8 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
*/
|
||||
private $container: HTMLDivElement | null;
|
||||
|
||||
private canvas: HTMLCanvasElement;
|
||||
|
||||
private hooks: {
|
||||
init: AsyncParallelHook;
|
||||
};
|
||||
|
@ -170,11 +172,17 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
this.configService.getSceneConfig(this.id).id || '',
|
||||
);
|
||||
this.$container = $container;
|
||||
|
||||
if ($container) {
|
||||
this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement;
|
||||
this.setCanvas();
|
||||
await this.rendererService.init(
|
||||
$container,
|
||||
// @ts-ignore
|
||||
this.canvas,
|
||||
this.configService.getSceneConfig(this.id) as IRenderConfig,
|
||||
);
|
||||
// this.initContainer();
|
||||
// window.addEventListener('resize', this.handleWindowResized);
|
||||
elementResizeEvent(
|
||||
this.$container as HTMLDivElement,
|
||||
this.handleWindowResized,
|
||||
|
@ -279,35 +287,43 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
this.emit('resize');
|
||||
// @ts-check
|
||||
if (this.$container) {
|
||||
// recalculate the viewport's size and call gl.viewport
|
||||
// @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38
|
||||
const pixelRatio = window.devicePixelRatio;
|
||||
let w = window.innerWidth;
|
||||
let h = window.innerHeight;
|
||||
if (this.$container !== document.body) {
|
||||
const bounds = this.$container.getBoundingClientRect();
|
||||
w = bounds.right - bounds.left;
|
||||
h = bounds.bottom - bounds.top;
|
||||
}
|
||||
const canvas = this.$container?.getElementsByTagName('canvas')[0];
|
||||
// this.$container.
|
||||
this.rendererService.viewport({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pixelRatio * w,
|
||||
height: pixelRatio * h,
|
||||
});
|
||||
// 触发 Map, canvas
|
||||
this.initContainer();
|
||||
DOM.triggerResize();
|
||||
this.coordinateSystemService.needRefresh = true;
|
||||
if (canvas) {
|
||||
canvas.width = w * pixelRatio;
|
||||
canvas.height = h * pixelRatio;
|
||||
}
|
||||
|
||||
// repaint layers
|
||||
this.render();
|
||||
}
|
||||
};
|
||||
private initContainer() {
|
||||
const pixelRatio = window.devicePixelRatio;
|
||||
const w = this.$container?.clientWidth || 400;
|
||||
const h = this.$container?.clientHeight || 300;
|
||||
const canvas = this.canvas;
|
||||
if (canvas) {
|
||||
canvas.width = w * pixelRatio;
|
||||
canvas.height = h * pixelRatio;
|
||||
canvas.style.width = `${w}px`;
|
||||
canvas.style.height = `${h}px`;
|
||||
}
|
||||
this.rendererService.viewport({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pixelRatio * w,
|
||||
height: pixelRatio * h,
|
||||
});
|
||||
}
|
||||
|
||||
private setCanvas() {
|
||||
const pixelRatio = window.devicePixelRatio;
|
||||
const w = this.$container?.clientWidth || 400;
|
||||
const h = this.$container?.clientHeight || 300;
|
||||
const canvas = this.canvas;
|
||||
canvas.width = w * pixelRatio;
|
||||
canvas.height = h * pixelRatio;
|
||||
canvas.style.width = `${w}px`;
|
||||
canvas.style.height = `${h}px`;
|
||||
}
|
||||
|
||||
private handleMapCameraChanged = (viewport: IViewport) => {
|
||||
this.cameraService.update(viewport);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-draw",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "L7 Draw moudules",
|
||||
"keywords": [],
|
||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
||||
|
@ -35,7 +35,7 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7": "2.2.21",
|
||||
"@antv/l7": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/circle": "^6.0.1",
|
||||
"@turf/distance": "^6.0.1",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -24,12 +24,12 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "2.2.21",
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-layers": "2.2.21",
|
||||
"@antv/l7-maps": "2.2.21",
|
||||
"@antv/l7-scene": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-component": "2.2.24",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-layers": "2.2.24",
|
||||
"@antv/l7-maps": "2.2.24",
|
||||
"@antv/l7-scene": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.2.21';
|
||||
const version = '2.2.24';
|
||||
export { version };
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -23,9 +23,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-source": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-source": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.2.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -25,9 +25,8 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-map": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@types/amap-js-api": "^1.4.6",
|
||||
"gl-matrix": "^3.1.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-react",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7": "2.2.21",
|
||||
"@antv/l7-maps": "2.2.21",
|
||||
"@antv/l7": "2.2.24",
|
||||
"@antv/l7-maps": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"load-styles": "^2.0.0"
|
||||
},
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -25,7 +25,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
|
@ -35,6 +35,6 @@ export default class ReglElements implements IElements {
|
|||
}
|
||||
|
||||
public destroy() {
|
||||
this.elements.destroy();
|
||||
// this.elements.destroy();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -36,19 +36,21 @@ import ReglTexture2D from './ReglTexture2D';
|
|||
export default class ReglRendererService implements IRendererService {
|
||||
private gl: regl.Regl;
|
||||
private $container: HTMLDivElement | null;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private width: number;
|
||||
private height: number;
|
||||
private isDirty: boolean;
|
||||
|
||||
public async init(
|
||||
$container: HTMLDivElement,
|
||||
canvas: HTMLCanvasElement,
|
||||
cfg: IRenderConfig,
|
||||
): Promise<void> {
|
||||
this.$container = $container;
|
||||
// this.$container = $container;
|
||||
this.canvas = canvas;
|
||||
// tslint:disable-next-line:typedef
|
||||
this.gl = await new Promise((resolve, reject) => {
|
||||
regl({
|
||||
container: $container,
|
||||
canvas: this.canvas,
|
||||
attributes: {
|
||||
alpha: true,
|
||||
// use TAA instead of MSAA
|
||||
|
@ -141,13 +143,6 @@ export default class ReglRendererService implements IRendererService {
|
|||
}) => {
|
||||
// use WebGL context directly
|
||||
// @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
|
||||
const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
|
||||
if (renderCanvas) {
|
||||
renderCanvas.width = width;
|
||||
renderCanvas.height = height;
|
||||
renderCanvas.style.width = width / 2 + 'px';
|
||||
renderCanvas.style.height = height / 2 + 'px';
|
||||
}
|
||||
this.gl._gl.viewport(x, y, width, height);
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
@ -176,11 +171,12 @@ export default class ReglRendererService implements IRendererService {
|
|||
};
|
||||
|
||||
public getContainer = () => {
|
||||
return this.$container;
|
||||
return this.canvas?.parentElement;
|
||||
};
|
||||
|
||||
public getCanvas = () => {
|
||||
return this.$container?.getElementsByTagName('canvas')[0] || null;
|
||||
// return this.$container?.getElementsByTagName('canvas')[0] || null;
|
||||
return this.canvas;
|
||||
};
|
||||
|
||||
public getGLContext = () => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -22,11 +22,11 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "2.2.21",
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-maps": "2.2.21",
|
||||
"@antv/l7-renderer": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-component": "2.2.24",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-maps": "2.2.24",
|
||||
"@antv/l7-renderer": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
@ -25,8 +25,8 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "2.2.21",
|
||||
"@antv/l7-utils": "2.2.21",
|
||||
"@antv/l7-core": "2.2.24",
|
||||
"@antv/l7-utils": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-three",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "three for L7 ",
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
@ -43,7 +43,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7": "2.2.21",
|
||||
"@antv/l7": "2.2.24",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"rollup": "^2.3.3",
|
||||
"rollup-plugin-less": "^1.1.2"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.2.21",
|
||||
"version": "2.2.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
@ -14,7 +14,7 @@ export default class AnimatePoint extends React.Component {
|
|||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: document.getElementById('map') as HTMLDivElement,
|
||||
map: new GaodeMap({
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [112, 23.69],
|
||||
|
@ -61,6 +61,7 @@ export default class AnimatePoint extends React.Component {
|
|||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
transform: 'scale(1.5)',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -72,6 +72,7 @@ export default class PointImage extends React.Component {
|
|||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
transform: 'scale(0.8)',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -123,41 +123,27 @@ export default class TextLayerDemo extends React.Component {
|
|||
});
|
||||
scene.on('loaded', () => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
})
|
||||
.shape('extrude')
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.scale('childrenNum', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('childrenNum', [10, 100000000])
|
||||
// .color('red')
|
||||
// .color('childrenNum', [
|
||||
// '#D92568',
|
||||
// '#E3507E',
|
||||
// '#FC7AAB',
|
||||
// '#F1D3E5',
|
||||
// '#A7B5E3',
|
||||
// '#F2EEFF',
|
||||
// ])
|
||||
.color('childrenNum*name', (childrenNum, name) => {
|
||||
console.log(childrenNum, name);
|
||||
return 'red';
|
||||
})
|
||||
.color('childrenNum', [
|
||||
'#D92568',
|
||||
'#E3507E',
|
||||
'#FC7AAB',
|
||||
'#F1D3E5',
|
||||
'#A7B5E3',
|
||||
'#F2EEFF',
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
setTimeout(() => {
|
||||
layer.setData(data);
|
||||
console.log('update');
|
||||
}, 2000);
|
||||
layer.on('click', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
layer.on('remapping', () => {
|
||||
console.log('remapinbg event');
|
||||
});
|
||||
const gui = new dat.GUI();
|
||||
this.gui = gui;
|
||||
const styleOptions = {
|
||||
|
@ -206,6 +192,7 @@ export default class TextLayerDemo extends React.Component {
|
|||
])
|
||||
.onChange((color: any) => {
|
||||
layer.color('childrenNum', RMBColor[color] as string[]);
|
||||
// layer.shape('fill');
|
||||
scene.render();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue