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

fix(district): fix polygon layer setData 样式不生效 & 增加下钻上取地图

This commit is contained in:
thinkinggis 2020-05-11 18:58:46 +08:00
parent 6120d0904d
commit b6a92b1994
9 changed files with 167 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/district/src/layer/baseLayer.ts
View File

@ -12,10 +12,16 @@ import { EventEmitter } from 'eventemitter3';
// @ts-ignore
import geobuf from 'geobuf';
// tslint:disable-next-line: no-submodule-imports
import merge from 'lodash/merge';
import merge from 'lodash/mergeWith';
// @ts-ignore
import Pbf from 'pbf';
import { IDistrictLayerOption } from './interface';
function mergeCustomizer(objValue: any, srcValue: any) {
if (Array.isArray(srcValue)) {
return srcValue;
}
}
export default class BaseLayer extends EventEmitter {
public fillLayer: ILayer;
public lineLayer: ILayer;
@ -28,7 +34,7 @@ export default class BaseLayer extends EventEmitter {
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
super();
this.scene = scene;
this.options = merge({}, this.getDefaultOption(), option);
this.options = merge(this.getDefaultOption(), option, mergeCustomizer);
}
public destroy() {
@ -82,8 +88,10 @@ export default class BaseLayer extends EventEmitter {
countyStroke: 'rgba(255,255,255,0.6)',
coastlineStroke: '#4190da',
coastlineWidth: 1,
nationalStroke: 'gray',
nationalWidth: 1,
nationalStroke: '#c994c7',
nationalWidth: 0.5,
chinaNationalStroke: 'gray',
chinaNationalWidth: 1,
popup: {
enable: true,
triggerEvent: 'mousemove',
@ -156,6 +164,13 @@ export default class BaseLayer extends EventEmitter {
}
protected addLabelLayer(labelData: any, type: string = 'json') {
const labelLayer = this.addLabel(labelData, type);
this.scene.addLayer(labelLayer);
this.layers.push(labelLayer);
this.labelLayer = labelLayer;
}
protected addLabel(labelData: any, type: string = 'json') {
const { label, zIndex } = this.options;
const labelLayer = new PointLayer({
zIndex: zIndex + 2,
@ -175,9 +190,7 @@ export default class BaseLayer extends EventEmitter {
strokeWidth: label.strokeWidth,
textAllowOverlap: label.textAllowOverlap,
});
this.scene.addLayer(labelLayer);
this.layers.push(labelLayer);
this.labelLayer = labelLayer;
return labelLayer;
}
protected addPopup() {

58
packages/district/src/layer/country.ts
View File

@ -17,7 +17,12 @@ export default class CountryLayer extends BaseLayer {
this.loadData().then(([fillData, fillLabel]) => {
this.addFillLayer(fillData);
if (fillLabel && this.options.label?.enable) {
this.addLabelLayer(fillLabel);
this.addLabelLayer(
fillLabel.filter((v: any) => {
return v.name !== '澳门';
}),
);
this.addMCLabel();
}
});
const countryConfig = DataConfig.country.CHN[depth];
@ -88,6 +93,8 @@ export default class CountryLayer extends BaseLayer {
const {
nationalStroke,
nationalWidth,
chinaNationalStroke,
chinaNationalWidth,
coastlineStroke,
coastlineWidth,
stroke,
@ -105,7 +112,7 @@ export default class CountryLayer extends BaseLayer {
} else if (v === '2') {
return coastlineWidth;
} else if (v === '0') {
return nationalWidth;
return chinaNationalWidth;
} else {
return '#fff';
}
@ -117,7 +124,7 @@ export default class CountryLayer extends BaseLayer {
} else if (v === '2') {
return coastlineStroke;
} else if (v === '0') {
return nationalStroke;
return chinaNationalStroke;
} else {
return '#fff';
}
@ -158,7 +165,6 @@ export default class CountryLayer extends BaseLayer {
// 县级边界
private async addCountryBorder(cfg: any) {
// const bordConfig = DataConfig.country.CHN[3];
const border1 = await this.fetchData(cfg);
const { countyStrokeWidth, countyStroke } = this.options;
const cityline = new LineLayer({
@ -173,4 +179,48 @@ export default class CountryLayer extends BaseLayer {
this.scene.addLayer(cityline);
this.layers.push(cityline);
}
private addMCLabel() {
const data = [
{
name: '澳门',
center: [113.537747, 22.187009],
},
];
const labelLayer1 = this.addText(data, { maxZoom: 3 }, [-45, -10]);
const labelLayer2 = this.addText(data, { minZoom: 3, maxZoom: 4 }, [
-35,
-10,
]);
const labelLayer = this.addText(data, { minZoom: 4 }, [0, 0]);
this.scene.addLayer(labelLayer);
this.scene.addLayer(labelLayer1);
this.scene.addLayer(labelLayer2);
this.layers.push(labelLayer, labelLayer1);
}
private addText(labelData: any, option: any, offset: [number, number]) {
const { label, zIndex } = this.options;
const labelLayer = new PointLayer({
zIndex: zIndex + 2,
...option,
})
.source(labelData, {
parser: {
type: 'json',
coordinates: 'center',
},
})
.color(label.color as StyleAttrField)
.shape(label.field as StyleAttrField, 'text')
.size(10)
.style({
opacity: label.opacity,
stroke: label.stroke,
strokeWidth: label.strokeWidth,
textAllowOverlap: label.textAllowOverlap,
textOffset: offset,
});
return labelLayer;
}
}

53
packages/district/src/layer/drillDown.ts
View File

@ -8,30 +8,71 @@ export default class DrillDownLayer {
private provinceLayer: ProvinceLayer;
private cityLayer: CityLayer;
private countryLayer: CountryLayer;
private scene: Scene;
constructor(scene: Scene, option: Partial<IDistrictLayerOption>) {
const cfg = this.getDefaultOption();
this.scene = scene;
this.countryLayer = new CountryLayer(scene, option);
this.provinceLayer = new ProvinceLayer(scene, cfg.city);
// this.cityLayer = new CityLayer(scene);
// this.provinceLayer.hide();
// this.cityLayer.hide();
this.cityLayer = new CityLayer(scene, cfg.county);
this.scene.setMapStatus({ doubleClickZoom: false });
this.countryLayer.on('loaded', () => {
this.addCountryEvent();
});
this.provinceLayer.on('loaded', () => {
this.addProvinceEvent();
});
this.cityLayer.on('loaded', () => {
this.addCityEvent();
});
}
public getDefaultOption() {
return {
province: {},
city: {
adcode: '',
adcode: [],
},
county: {
adcode: [],
},
};
}
public addCountryEvent() {
this.countryLayer.fillLayer.on('click', (e: any) => {
this.countryLayer.hide();
// 更新市级行政区划
this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
});
}
public addProvinceEvent() {
// this.countryLayer.fillLayer.on('click', (e: any) => {
// });
this.provinceLayer.fillLayer.on('undblclick', () => {
this.countryLayer.show();
this.countryLayer.fillLayer.fitBounds();
this.provinceLayer.hide();
});
this.provinceLayer.fillLayer.on('click', (e: any) => {
this.provinceLayer.hide();
let adcode = e.feature.properties.adcode.toFixed(0);
if (adcode.substr(2, 2) === '00') {
adcode = adcode.substr(0, 2) + '0100';
}
// 更新县级行政区划
this.cityLayer.updateDistrict([adcode]);
});
}
public addCityEvent() {
this.cityLayer.fillLayer.on('undblclick', () => {
this.provinceLayer.show();
this.provinceLayer.fillLayer.fitBounds();
this.cityLayer.hide();
});
}
public destroy() {
this.countryLayer.destroy();
this.provinceLayer.destroy();
this.cityLayer.destroy();
}
}

2
packages/district/src/layer/interface.ts
View File

@ -35,6 +35,8 @@ export interface IDistrictLayerOption {
coastlineWidth: number;
nationalStroke: string;
nationalWidth: number;
chinaNationalStroke: string;
chinaNationalWidth: number;
popup: Partial<{
enable: boolean;
triggerEvent: 'mousemove' | 'click';

34
packages/district/src/layer/world.ts
View File

@ -13,7 +13,6 @@ export default class WorldLayer extends BaseLayer {
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
super(scene, option);
this.loadData().then(([fillData, lineData, fillLabel]) => {
// this.addWorldBorder(border1, border2, island);
this.addFillLayer(fillData);
this.addFillLine(lineData);
if (this.options.label?.enable) {
@ -28,18 +27,21 @@ export default class WorldLayer extends BaseLayer {
return (
feature.properties.type === '10' ||
feature.properties.type === '1' ||
feature.properties.type === '11'
feature.properties.type === '11' ||
feature.properties.type === '8'
);
});
const bordFc = {
type: 'FeatureCollection',
features: bord1,
};
// 已确定国界
const nationalBorder = data.features.filter((feature: any) => {
return (
feature.properties.type !== '10' &&
feature.properties.type !== '1' &&
feature.properties.type !== '11'
feature.properties.type !== '11' &&
feature.properties.type !== '8'
);
});
const nationalFc = {
@ -62,6 +64,8 @@ export default class WorldLayer extends BaseLayer {
nationalStroke,
nationalWidth,
coastlineStroke,
chinaNationalStroke,
chinaNationalWidth,
coastlineWidth,
zIndex,
} = this.options;
@ -73,15 +77,13 @@ export default class WorldLayer extends BaseLayer {
.size(0.6)
.color('type', (v: string) => {
if (v === '0') {
return 'rgb(99,100, 99)'; // 中国国界线
} else if (v === '2') {
return 'rgb(0,136, 191)'; // 中国海岸线
} else if (v === '9') {
return 'rgb(0,136, 191)'; // 国外海岸线
return chinaNationalStroke; // 中国国界线
} else if (v === '2' || v === '9') {
return coastlineStroke; // 中国海岸线
} else if (v === '7') {
return '#9ecae1'; // 国外国界
return nationalStroke; // 国外国界
} else {
return '#9ecae1';
return nationalStroke;
}
});
// 添加未定国界
@ -89,13 +91,19 @@ export default class WorldLayer extends BaseLayer {
zIndex: zIndex + 1,
})
.source(boundaries2)
.size(nationalWidth)
.size('type', (v: string) => {
if (v === '1') {
return chinaNationalWidth;
} else {
return nationalWidth;
}
})
.shape('line')
.color('type', (v: string) => {
if (v === '1') {
return 'rgb(99,100, 99)';
return chinaNationalStroke;
} else {
return '#9ecae1';
return nationalStroke;
}
})
.style({

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

@ -684,6 +684,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
const source = this.getSource();
const extent = source.extent;
const isValid = extent.some((v) => Math.abs(v) === Infinity);
if (isValid) {
return this;
}
this.mapService.fitBounds(
[
[extent[0], extent[1]],

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

@ -61,6 +61,9 @@ export default class FeatureScalePlugin implements ILayerPlugin {
this.scaleOptions = layer.getScaleOptions();
const attributes = styleAttributeService.getLayerStyleAttributes();
const { dataArray } = layer.getSource().data;
if (dataArray.length === 0) {
return;
}
this.caculateScalesForAttributes(attributes || [], dataArray);
});
@ -69,6 +72,9 @@ export default class FeatureScalePlugin implements ILayerPlugin {
this.scaleOptions = layer.getScaleOptions();
const attributes = styleAttributeService.getLayerStyleAttributes();
const { dataArray } = layer.getSource().data;
if (dataArray.length === 0) {
return;
}
this.caculateScalesForAttributes(attributes || [], dataArray);
return true;
});
@ -78,6 +84,9 @@ export default class FeatureScalePlugin implements ILayerPlugin {
const attributes = styleAttributeService.getLayerStyleAttributes();
if (attributes) {
const { dataArray } = layer.getSource().data;
if (dataArray.length === 0) {
return;
}
const attributesToRescale = attributes.filter(
(attribute) => attribute.needRescale,
);

2
stories/District/Layer/Country.tsx
View File

@ -19,7 +19,7 @@ export default class Country extends React.Component {
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
minZoom: 0,
maxZoom: 10,
}),
});

10
stories/Layers/components/polygon.tsx
View File

@ -112,8 +112,12 @@ export default class TextLayerDemo extends React.Component {
});
scene.on('loaded', () => {
const layer = new PolygonLayer({})
.source(data)
.source({
type: 'FeatureCollection',
features: [],
})
.shape('fill')
// .color('red')
.color('childrenNum', [
'rgb(247,252,240)',
'rgb(224,243,219)',
@ -128,6 +132,10 @@ export default class TextLayerDemo extends React.Component {
opacity: 1.0,
});
scene.addLayer(layer);
setTimeout(() => {
layer.setData(data);
console.log('update');
}, 2000);
layer.on('click', (e) => {
console.log(e);
});