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

fix: many bugs 

- marker offsets
- layer update color,size,shape
- 官网压缩
- 数据映射 回调函数
This commit is contained in:
thinkinggis 2020-02-06 21:05:49 +08:00
parent ab5f654149
commit 82e64eed85
14 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/component/marker.en.md
View File

@ -16,7 +16,7 @@ Marker
- color        `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 marker 的颜色
- element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
- offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
### 添加到 Scene

2
docs/api/component/marker.zh.md
View File

@ -17,7 +17,7 @@ Marker
![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
- element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
- offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
- extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
## 方法

2
package.json
View File

@ -119,7 +119,7 @@
"scripts": {
"start": "yarn run site:clean && yarn run site:develop",
"site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify",
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
"site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public",
"site:publish": "gh-pages -d public",

12
packages/component/src/marker.ts
View File

@ -9,7 +9,7 @@ export interface IMarkerOption {
element: HTMLElement | undefined;
anchor: anchorType;
color: string;
offset: number[];
offsets: number[];
draggable: boolean;
extData?: any;
}
@ -35,7 +35,7 @@ export default class Marker extends EventEmitter {
return {
element: undefined, // DOM element
anchor: anchorType.BOTTOM,
offset: [0, 0],
offsets: [0, 0],
color: '#5B8FF9',
draggable: false,
};
@ -174,7 +174,7 @@ export default class Marker extends EventEmitter {
}
public getOffset(): number[] {
return this.markerOption.offset;
return this.markerOption.offsets;
}
public setDraggable(draggable: boolean) {
@ -213,12 +213,12 @@ export default class Marker extends EventEmitter {
if (!this.mapsService) {
return;
}
const { element } = this.markerOption;
const { element, offsets } = this.markerOption;
const { lng, lat } = this.lngLat;
const pos = this.mapsService.lngLatToContainer([lng, lat]);
if (element) {
element.style.left = pos.x + 'px';
element.style.top = pos.y + 'px';
element.style.left = pos.x + offsets[0] + 'px';
element.style.top = pos.y - offsets[1] + 'px';
}
}

8
packages/core/src/services/layer/IStyleAttributeService.ts
View File

@ -60,7 +60,7 @@ export interface IScaleOptions {
}
export interface IStyleScale {
scale: any;
field: string;
field: string | number;
type: StyleScaleType;
option: IScaleOption | undefined;
}
@ -112,7 +112,7 @@ export interface IVertexAttributeDescriptor
type Position = number[];
type Color = [number, number, number, number];
type CallBack = (...args: any[]) => any;
export type StyleAttributeField = string | string[];
export type StyleAttributeField = string | string[] | number[];
export type StyleAttributeOption = string | number | boolean | any[] | CallBack;
export type StyleAttrField = string | string[] | number | number[];
@ -122,11 +122,11 @@ export interface IStyleAttributeInitializationOptions {
scale?: {
field: StyleAttributeField;
values: unknown[] | string;
names: string[];
names: string[] | number[];
type: StyleScaleType;
callback?: (...args: any[]) => [];
scalers?: Array<{
field: string;
field: string | number;
func: unknown;
}>;
};

2
packages/core/src/services/layer/StyleAttribute.ts
View File

@ -58,7 +58,7 @@ export default class StyleAttribute implements IStyleAttribute {
*/
if (this.scale?.callback) {
// 使用用户返回的值处理
const ret = this.scale?.callback(params);
const ret = this.scale?.callback(...params);
if (!isNil(ret)) {
return [ret];
}

81
packages/layers/src/core/BaseLayer.ts
View File

@ -259,13 +259,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// 完成样式服务注册完成前添加的属性
this.pendingStyleAttributes.forEach(
({
attributeName,
attributeField,
attributeValues,
defaultName,
updateOptions,
}) => {
({ attributeName, attributeField, attributeValues, updateOptions }) => {
this.styleAttributeService.updateStyleAttribute(
attributeName,
{
@ -276,7 +270,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// @ts-ignore
attributeValues,
// @ts-ignore
this.getLayerConfig()[defaultName || attributeName],
this.getLayerConfig()[attributeName],
),
},
},
@ -338,13 +332,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
// 设置 color、size、shape、style 时由于场景服务尚未完成（并没有调用 scene.addLayer），因此暂时加入待更新属性列表
this.pendingStyleAttributes.push({
attributeName: 'color',
attributeField: field,
attributeValues: values,
defaultName: 'colors',
updateOptions,
});
this.updateStyleAttribute('color', field, values, updateOptions);
// this.pendingStyleAttributes.push({
// attributeName: 'color',
// attributeField: field,
// attributeValues: values,
// defaultName: 'colors',
// updateOptions,
// });
return this;
}
@ -353,12 +349,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
this.pendingStyleAttributes.push({
attributeName: 'size',
attributeField: field,
attributeValues: values,
updateOptions,
});
this.updateStyleAttribute('size', field, values, updateOptions);
return this;
}
// 对mapping后的数据过滤，scale保持不变
@ -367,12 +358,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
this.pendingStyleAttributes.push({
attributeName: 'filter',
attributeField: field,
attributeValues: values,
updateOptions,
});
this.updateStyleAttribute('filter', field, values, updateOptions);
this.dataState.dataMappingNeedUpdate = true;
return this;
}
@ -382,12 +368,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
this.pendingStyleAttributes.push({
attributeName: 'shape',
attributeField: field,
attributeValues: values,
updateOptions,
});
this.updateStyleAttribute('shape', field, values, updateOptions);
return this;
}
public label(
@ -856,4 +837,38 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
};
}
private updateStyleAttribute(
type: string,
field: StyleAttributeField,
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
if (!this.inited) {
this.pendingStyleAttributes.push({
attributeName: type,
attributeField: field,
attributeValues: values,
updateOptions,
});
} else {
this.styleAttributeService.updateStyleAttribute(
type,
{
// @ts-ignore
scale: {
field,
...this.splitValuesAndCallbackInAttribute(
// @ts-ignore
values,
// @ts-ignore
this.getLayerConfig()[field],
),
},
},
// @ts-ignore
updateOptions,
);
}
}
}

1
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -121,6 +121,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
record.hasOwnProperty(field) ||
attribute.scale?.type === 'variable'
) {
// TODO:多字段，常量
params.push(record[field]);
}
});

19
packages/layers/src/plugins/FeatureScalePlugin.ts
View File

@ -106,11 +106,10 @@ export default class FeatureScalePlugin implements ILayerPlugin {
const attributeScale = attribute.scale;
const type = attribute.name;
attributeScale.names = this.parseFields(attribute!.scale!.field || []);
const scales: IStyleScale[] = attributeScale.names.map(
(field: string) => {
return this.getOrCreateScale(field, attribute, dataArray);
},
);
const scales: IStyleScale[] = [];
attributeScale.names.forEach((field: string | number) => {
scales.push(this.getOrCreateScale(field, attribute, dataArray));
});
// 为scales 设置值区间
if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) {
@ -155,7 +154,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
});
}
private getOrCreateScale(
field: string,
field: string | number,
attribute: IStyleAttribute,
dataArray: IParseDataItem[],
) {
@ -175,7 +174,9 @@ export default class FeatureScalePlugin implements ILayerPlugin {
* 'w*h' => ['w', 'h']
* 'w' => ['w']
*/
private parseFields(field: string[] | string): string[] {
private parseFields(
field: string[] | string | number[],
): string[] | number[] {
if (Array.isArray(field)) {
return field;
}
@ -186,7 +187,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
}
private createScale(
field: string,
field: string | number,
values: unknown[] | string | undefined,
data?: IParseDataItem[],
): IStyleScale {
@ -239,7 +240,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
private createDefaultScaleConfig(
type: ScaleTypeName,
field: string,
field: string | number,
data?: IParseDataItem[],
) {
const cfg: IScale = {

4
packages/layers/src/point/shaders/image_vert.glsl
View File

@ -1,4 +1,3 @@
precision highp float;
attribute vec3 a_Position;
attribute vec4 a_Color;
@ -21,6 +20,7 @@ void main() {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
setPickingColor(a_PickingColor);
setPickingColor(a_PickingColor);
}

4
stories/Components/components/Marker.tsx
View File

@ -30,7 +30,9 @@ export default class MarkerComponent extends React.Component {
offsets: [0, 20],
}).setText('hello');
const marker = new Marker()
const marker = new Marker({
offsets: [0, -20],
})
.setLnglat({
lng: 120.184824,
lat: 30.248341,

8
stories/Layers/components/Line.tsx
View File

@ -18,11 +18,14 @@ export default class LineDemo extends React.Component {
id: 'map',
map: new Mapbox({
center: [-74.006, 40.7128],
zoom: 15,
zoom: 11.5,
style: 'dark',
}),
});
const lineLayer = new LineLayer()
const lineLayer = new LineLayer({
minZoom: 12,
maxZoom: 15,
})
.source(await response.json(), {
parser: {
type: 'json',
@ -31,6 +34,7 @@ export default class LineDemo extends React.Component {
})
.size(3)
.shape('line')
.active(true)
.color('color', (v) => {
return `rgb(${v[0]})`;
})

5
stories/Layers/components/Point3D.tsx
View File

@ -31,6 +31,11 @@ export default class Point3D extends React.Component {
.active({ color: 'blue' })
.size([15, 10]);
scene.addLayer(pointLayer);
setTimeout(() => {
pointLayer.size([20, 100]);
scene.render();
console.log('update size');
}, 2000);
scene.render();
this.scene = scene;
}

1
stories/Layers/components/PointImage.tsx
View File

@ -45,6 +45,7 @@ export default class PointImage extends React.Component {
},
})
.shape('name', ['00', '01', '02'])
.active(true)
.size(30);
scene.addLayer(imageLayer);
imageLayer.on('click', (e) => {