Shihui dev (#850)

* feat: 优化 pointLayer shape 切换时 2d/3d 无法成功切换

* style: lint style
This commit is contained in:
YiQianYao 2021-11-24 17:38:44 +08:00 committed by GitHub
parent 49fba466c6
commit a4f7c64f1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 197 additions and 47 deletions

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.5.57",
"version": "2.5.58",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.5.57",
"version": "2.5.58",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.5.57",
"@antv/l7-core": "^2.5.57",
"@antv/l7-layers": "^2.5.57",
"@antv/l7-maps": "^2.5.57",
"@antv/l7-scene": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-component": "^2.5.58",
"@antv/l7-core": "^2.5.58",
"@antv/l7-layers": "^2.5.58",
"@antv/l7-maps": "^2.5.58",
"@antv/l7-scene": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,2 +1,2 @@
const version = '2.5.57';
const version = '2.5.58';
export { version };

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.57",
"version": "2.5.58",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/geo-coord": "^1.0.8",
"@antv/l7-core": "^2.5.57",
"@antv/l7-source": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-source": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

View File

@ -51,6 +51,7 @@ import { isFunction, isObject } from 'lodash';
import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
import { BlendTypes } from '../utils/blend';
import { handleStyleDataMapping } from '../utils/dataMappingStyle';
import { updateShape } from '../utils/updateShape';
import baseLayerSchema from './schema';
/**
* layer id
@ -423,7 +424,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
const lastShape = this.styleAttributeService?.getLayerStyleAttribute(
'shape',
)?.scale?.field;
const currentShape = field;
this.updateStyleAttribute('shape', field, values, updateOptions);
// TODO: 根据 shape 判断是否需要更新 model
updateShape(this, lastShape, currentShape);
return this;
}
public label(

View File

@ -0,0 +1,33 @@
import { ILayer, StyleAttributeField } from '@antv/l7-core';
// TODO: shapeUpdateList 存储一系列的 shape 类型
// 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
const shapeUpdateList = [
// PointLayer
['circle', 'cylinder'],
['square', 'cylinder'],
['triangle', 'cylinder'],
['pentagon', 'cylinder'],
['hexagon', 'cylinder'],
['octogon', 'cylinder'],
['hexagram', 'cylinder'],
['rhombus', 'cylinder'],
['vesica', 'cylinder'],
];
export function updateShape(
layer: ILayer,
lastShape: StyleAttributeField | undefined,
currentShape: StyleAttributeField | undefined,
): void {
if (
typeof lastShape === 'string' &&
typeof currentShape === 'string' &&
lastShape !== currentShape
) {
shapeUpdateList.map((shapes) => {
if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
// TODO: dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
layer.dataState.dataSourceNeedUpdate = true;
}
});
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.57",
"version": "2.5.58",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.5.57",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.5.57",
"@antv/l7-map": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-map": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-mini",
"version": "2.5.57",
"version": "2.5.58",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,11 +25,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-core": "^2.5.57",
"@antv/l7-layers": "^2.5.57",
"@antv/l7-maps": "^2.5.57",
"@antv/l7-scene": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-layers": "^2.5.58",
"@antv/l7-maps": "^2.5.58",
"@antv/l7-scene": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.16",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.5.57",
"@antv/l7-core": "^2.5.57",
"@antv/l7-layers": "^2.5.57",
"@antv/l7-maps": "^2.5.57",
"@antv/l7-renderer": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-component": "^2.5.58",
"@antv/l7-core": "^2.5.58",
"@antv/l7-layers": "^2.5.58",
"@antv/l7-maps": "^2.5.58",
"@antv/l7-renderer": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.5.57",
"@antv/l7-utils": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-utils": "^2.5.58",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.5.57",
"version": "2.5.58",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.5.57",
"@antv/l7-layers": "^2.5.57",
"@antv/l7-scene": "^2.5.57",
"@antv/l7-core": "^2.5.58",
"@antv/l7-layers": "^2.5.58",
"@antv/l7-scene": "^2.5.58",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"reflect-metadata": "^0.1.13",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.5.57",
"version": "2.5.58",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

View File

@ -0,0 +1,106 @@
// @ts-ignore
import { PointLayer, Scene, ILayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class ShapeUpdate extends React.Component {
// @ts-ignore
private scene: Scene;
public pointLayer: ILayer;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [121.107846, 30.267069],
pitch: 40,
style: 'normal',
zoom: 20,
animateEnable: false,
}),
});
this.pointLayer = new PointLayer()
.source(
[
{
lng: 121.107846,
lat: 30.267069,
},
{
lng: 121.107,
lat: 30.267069,
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
// 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
// .shape('circle')
.shape('vesica')
// .shape('cylinder')
.color('blue')
.size(20)
// .size([10, 10, 50])
.style({
stroke: '#fff',
storkeWidth: 2,
// offsets: [100, 100],
});
scene.addLayer(this.pointLayer);
scene.render();
this.scene = scene;
}
public updateShape() {
this.pointLayer
.shape('cylinder')
// .shape('hexagon')
// .shape('triangle')
// .shape('hexagram')
.size([10, 10, 50]);
// .shape('triangle')
this.scene.render();
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
<button
onClick={() => {
this.updateShape();
}}
style={{
position: 'absolute',
top: '20px',
right: '20px',
zIndex: 10,
}}
>
update shape
</button>
</>
);
}
}

View File

@ -62,6 +62,8 @@ import Amap2demo_styleMap from "./components/amap2demo_styleMap"
import Amap2demo_textOffset from "./components/amap2demo_textOffset"
import ShapeUpdate from './components/shapeUpdate'
// @ts-ignore
storiesOf('地图方法', module)
.add('高德地图 point/demo', () => <MapCenter />)
@ -125,3 +127,5 @@ storiesOf('地图方法', module)
.add('高德地图 样式映射 文字偏移', () => <Amap2demo_textOffset/>)
.add('测试销毁', () => <Amap2demo_destroy/>)
.add('ShapeUpdate', () => <ShapeUpdate/>)