mirror of https://gitee.com/antv-l7/antv-l7
Shihui dev (#850)
* feat: 优化 pointLayer shape 切换时 2d/3d 无法成功切换 * style: lint style
This commit is contained in:
parent
49fba466c6
commit
a4f7c64f1d
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.5.57",
|
||||
"version": "2.5.58",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.5.57';
|
||||
const version = '2.5.58';
|
||||
export { version };
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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/>)
|
||||
|
|
Loading…
Reference in New Issue