Skip to content

Commit

Permalink
style: lint style
Browse files Browse the repository at this point in the history
  • Loading branch information
@yiiiiiiqianyao
yiiiiiiqianyao committed Apr 20, 2022
1 parent 75fbfd7 commit 9a861ad
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 141 deletions.
60 changes: 28 additions & 32 deletions packages/layers/src/polygon/models/extrude.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,40 +148,36 @@ export default class ExtrudeModel extends BaseModel {
}

protected registerBuiltinAttributes() {
const bbox = this.layer.getSource().extent;
const [minLng, minLat, maxLng, maxLat] = bbox;
const lngLen = maxLng - minLng;
const latLen = maxLat - minLat;
const bbox = this.layer.getSource().extent;
const [minLng, minLat, maxLng, maxLat] = bbox;
const lngLen = maxLng - minLng;
const latLen = maxLat - minLat;

this.styleAttributeService.registerStyleAttribute({
name: 'uvs',
type: AttributeType.Attribute,
descriptor: {
name: 'a_uvs',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.STATIC_DRAW,
data: [],
type: gl.FLOAT,
},
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
normal: number[],
) => {
const lng = vertex[0];
const lat = vertex[1];
return [
(lng - minLng) / lngLen,
(lat - minLat) / latLen,
vertex[4],
];
},
this.styleAttributeService.registerStyleAttribute({
name: 'uvs',
type: AttributeType.Attribute,
descriptor: {
name: 'a_uvs',
buffer: {
// give the WebGL driver a hint that this buffer may change
usage: gl.STATIC_DRAW,
data: [],
type: gl.FLOAT,
},
});
size: 3,
update: (
feature: IEncodeFeature,
featureIdx: number,
vertex: number[],
attributeIdx: number,
normal: number[],
) => {
const lng = vertex[0];
const lat = vertex[1];
return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
},
},
});
// point layer size;
this.styleAttributeService.registerStyleAttribute({
name: 'normal',
Expand Down
208 changes: 100 additions & 108 deletions stories/Map/components/amap2demo_polygon_extrude.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,84 +118,80 @@ export default class Amap2demo_polygon_extrude extends React.Component {
// scene.addLayer(layer);

scene.on('loaded', () => {
// @ts-ignore
let lineDown, lineUp, textLayer;

// @ts-ignore
let lineDown, lineUp, textLayer;
fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
.then((res) => res.json())
.then((data) => {
let texts: any[] = [];

fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
.then((res) => res.json())
.then((data) => {
let texts: any[] = [];

data.features.map((option: any) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
});

textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true,
data.features.map((option: any) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
});
scene.addLayer(textLayer);

lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000,
});
textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true,
});
scene.addLayer(textLayer);

lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000,
});
lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000,
});

scene.addLayer(lineDown);
scene.addLayer(lineUp);
});
lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000,
});

fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
.then((res) => res.json())
.then((data) => {
const lineLayer = new LineLayer()
.source(data)
.shape('wall')
.size(150000)
.style({
heightfixed: true,
opacity: 0.6,
sourceColor: '#0DCCFF',
targetColor: 'rbga(255,255,255, 0)',
});
scene.addLayer(lineLayer);
scene.addLayer(lineDown);
scene.addLayer(lineUp);
});


fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
.then((res) => res.json())
.then((data) => {
const lineLayer = new LineLayer()
.source(data)
.shape('wall')
.size(150000)
.style({
heightfixed: true,
opacity: 0.6,
sourceColor: '#0DCCFF',
targetColor: 'rbga(255,255,255, 0)',
});
scene.addLayer(lineLayer);


const provincelayer = new PolygonLayer({})
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
Expand All @@ -209,49 +205,45 @@ export default class Amap2demo_polygon_extrude extends React.Component {
raisingHeight: 200000,
opacity: 0.8,
});
scene.addLayer(provincelayer);
scene.addLayer(provincelayer);

provincelayer.on('mousemove', () => {
provincelayer.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000 + 100000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000 + 100000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000,
});
provincelayer.on('mousemove', () => {
provincelayer.style({
raisingHeight: 200000 + 100000,
});

provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000 + 100000,
});
})


// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000 + 100000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000,
});
});


});
provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000,
});
// @ts-ignore
lineDown.style({
raisingHeight: 200000,
});
// @ts-ignore
lineUp.style({
raisingHeight: 200000 + 150000,
});
// @ts-ignore
textLayer.style({
raisingHeight: 200000 + 150000 + 10000,
});
});
});
});
}

public render() {
Expand Down
2 changes: 1 addition & 1 deletion stories/Map/components/polygon_extrudeTex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class Amap2demo_polygon_extrude extends React.Component {
.color('#0DCCFF')
.active({
color: 'rgb(255,255,255)',
mix: 0.5
mix: 0.5,
})
.style({
heightfixed: true,
Expand Down

0 comments on commit 9a861ad

Please sign in to comment.