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

feat: polygon fill/point wave support raisingHeight、polygon add topsurface/sidesurface (#1074) 

* chore: update version 2.8.30 -> 2.8.31

* feat: polygon fill 支持配置 raisingHeight

* feat: polygon extrude 支持配置 side/top 的显隐

* feat: pointLayer fill/wave support raisingHeight

* style: lint style

* docs: update demo

* feat: update demo
This commit is contained in:
YiQianYao 2022-04-24 14:14:47 +08:00 committed by GitHub
parent 17d7f36cfb
commit 9f075803fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 308 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/layers/src/core/interface.ts
View File

@ -96,6 +96,9 @@ export interface IPolygonLayerStyleOptions {
dir: string;
};
topsurface?: boolean;
sidesurface?: boolean;
mapTexture?: string; // 挤出几何体顶面贴图
raisingHeight?: number; // 挤出几何体抬升高度
sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all)

3
packages/layers/src/point/models/fill.ts
View File

@ -38,6 +38,7 @@ export default class FillModel extends BaseModel {
offsets = [0, 0],
blend,
blur = 0,
raisingHeight = 0,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (
@ -87,6 +88,8 @@ export default class FillModel extends BaseModel {
});
}
return {
u_raisingHeight: Number(raisingHeight),
u_isMeter: Number(this.isMeter),
u_blur: blur,

11
packages/layers/src/point/shaders/fill_vert.glsl
View File

@ -22,6 +22,7 @@ uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
uniform vec2 u_offsets;
uniform float u_blur : 0.0;
uniform float u_raisingHeight: 0.0;
#pragma include "styleMapping"
#pragma include "styleMappingCalOpacity"
@ -153,10 +154,16 @@ void main() {
vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
float raiseHeight = u_raisingHeight;
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
raiseHeight = u_raisingHeight * mapboxZoomScale;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
gl_Position = u_Mvp * vec4(project_pos.xy + offset, raiseHeight, 1.0);
} else {
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, u_raisingHeight, 1.0));
}
if(u_globel > 0.0) {

6
packages/layers/src/polygon/models/extrude.ts
View File

@ -28,6 +28,8 @@ export default class ExtrudeModel extends BaseModel {
opacity = 1,
heightfixed = false,
raisingHeight = 0,
topsurface = true,
sidesurface = true,
sourceColor,
targetColor,
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
@ -73,6 +75,10 @@ export default class ExtrudeModel extends BaseModel {
}
return {
// 控制侧面和顶面的显示隐藏
u_topsurface: Number(topsurface),
u_sidesurface: Number(sidesurface),
u_heightfixed: Number(heightfixed),
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),

4
packages/layers/src/polygon/models/fill.ts
View File

@ -14,6 +14,7 @@ import polygon_vert from '../shaders/polygon_vert.glsl';
export default class FillModel extends BaseModel {
public getUninforms() {
const {
raisingHeight = 0,
opacity = 1,
opacityLinear = {
enable: false,
@ -53,6 +54,9 @@ export default class FillModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
// u_opacity: opacity,
u_raisingHeight: Number(raisingHeight),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacitylinear: Number(opacityLinear.enable),

27
packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl
View File

@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
uniform float u_linearColor: 0;
uniform float u_topsurface: 1.0;
uniform float u_sidesurface: 1.0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
@ -12,11 +16,26 @@ void main() {
float sidey = styleMappingMat[3][0];
float lightWeight = styleMappingMat[3][1];
if(isSide < 1.0 && u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
if(isSide < 1.0) {
// side face
if(u_sidesurface < 1.0) {
discard;
}
if(u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
} else {
gl_FragColor = v_Color;
}
} else {
// top face
if(u_topsurface < 1.0) {
discard;
}
gl_FragColor = v_Color;
}

27
packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl
View File

@ -2,6 +2,10 @@ uniform float u_opacity: 1.0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
uniform float u_linearColor: 0;
uniform float u_topsurface: 1.0;
uniform float u_sidesurface: 1.0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
@ -12,11 +16,26 @@ void main() {
float sidey = styleMappingMat[3][0];
float lightWeight = styleMappingMat[3][1];
if(isSide < 1.0 && u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
if(isSide < 1.0) {
// side face
if(u_sidesurface < 1.0) {
discard;
}
if( u_linearColor == 1.0) {
// side use linear
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
} else {
// side notuse linear
gl_FragColor = v_Color;
}
} else {
// top face
if(u_topsurface < 1.0) {
discard;
}
gl_FragColor = v_Color;
}

7
packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl
View File

@ -54,6 +54,13 @@ void main() {
textureOffset = opacityAndOffset.g;
// cal style mapping - 数据纹理映射部分的计算
if(styleMappingMat[0][3] < 1.0 ) {
// side
styleMappingMat[0][0] = 0.0;
} else {
}
vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
vec4 project_pos = project_position(pos);

27
packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl
View File

@ -2,7 +2,12 @@ uniform sampler2D u_texture;
uniform float u_opacity: 1.0;
uniform vec4 u_sourceColor;
uniform vec4 u_targetColor;
// varying vec4 v_Color;
uniform float u_linearColor: 0;
uniform float u_topsurface: 1.0;
uniform float u_sidesurface: 1.0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
#pragma include "picking"
@ -15,9 +20,25 @@ void main() {
float sidey = styleMappingMat[3][0];
if(isSide < 1.0) {
gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
gl_FragColor.rgb *= lightWeight;
// side face
if(u_sidesurface < 1.0) {
discard;
}
if(u_linearColor == 1.0) {
vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
linearColor.rgb *= lightWeight;
gl_FragColor = linearColor;
} else {
gl_FragColor = v_Color;
}
} else {
// top face
if(u_topsurface < 1.0) {
discard;
}
gl_FragColor = texture2D(u_texture, vec2(topU, topV));
}

5
packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl
View File

@ -4,6 +4,7 @@ precision highp float;
#define diffuseRatio 0.3
#define specularRatio 0.2
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec3 a_Normal;
attribute float a_Size;
@ -11,7 +12,7 @@ attribute vec3 a_uvs;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
// varying vec4 v_Color;
varying vec4 v_Color;
uniform float u_heightfixed: 0.0; // 默认不固定
uniform float u_raisingHeight: 0.0;
uniform float u_opacity: 1.0;
@ -25,6 +26,8 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
#pragma include "picking"
void main() {
v_Color = a_Color;
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - a_Position.z(judge side by a_Position.z)

12
packages/layers/src/polygon/shaders/polygon_linear_vert.glsl
View File

@ -1,13 +1,12 @@
attribute vec4 a_Color;
attribute vec3 a_Position;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
uniform float u_opacity: 1.0;
uniform float u_raisingHeight: 0.0;
varying vec4 v_Color;
uniform float u_opacity: 1.0;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
#pragma include "styleMapping"
@ -57,6 +56,13 @@ styleMappingMat = mat4(
v_Color = a_Color;
vec4 project_pos = project_position(vec4(a_Position, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
project_pos.z += u_raisingHeight;
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
project_pos.z *= mapboxZoomScale;
project_pos.z += u_raisingHeight * mapboxZoomScale;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));

13
packages/layers/src/polygon/shaders/polygon_vert.glsl
View File

@ -1,10 +1,13 @@
attribute vec4 a_Color;
attribute vec3 a_Position;
uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp;
varying vec4 v_Color;
uniform float u_opacity: 1.0;
uniform float u_raisingHeight: 0.0;
varying vec4 v_Color;
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
#pragma include "styleMapping"
@ -44,6 +47,14 @@ styleMappingMat = mat4(
vec4 project_pos = project_position(vec4(a_Position, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
project_pos.z += u_raisingHeight;
if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
project_pos.z *= mapboxZoomScale;
project_pos.z += u_raisingHeight * mapboxZoomScale;
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
} else {

154
stories/Map/components/amap2demo_polygon.tsx
View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_polygon extends React.Component {
@ -11,16 +11,11 @@ export default class Amap2demo_polygon extends React.Component {
}
public async componentDidMount() {
const response = await fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
);
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
// style: 'dark',
center: [-44.40673828125, -18.375379094031825],
map: new GaodeMapV2({
pitch: 40,
center: [120, 30],
zoom: 13,
}),
});
@ -28,42 +23,6 @@ export default class Amap2demo_polygon extends React.Component {
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
[
[
[115.04882812499999, 34.379712580462204],
[114.9609375, 33.46810795527896],
[115.8837890625, 33.50475906922609],
[115.86181640625001, 34.379712580462204],
[115.04882812499999, 34.379712580462204],
],
],
],
},
},
{
type: 'Feature',
properties: {
@ -79,71 +38,6 @@ export default class Amap2demo_polygon extends React.Component {
[113.8623046875, 31.090574094954192],
[113.8623046875, 30.031055426540206],
],
[
[117.26806640625, 32.13840869677249],
[118.36669921875, 32.13840869677249],
[118.36669921875, 32.47269502206151],
[117.26806640625, 32.47269502206151],
[117.26806640625, 32.13840869677249],
],
],
},
},
],
};
const data2 = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
],
},
},
{
type: 'Feature',
properties: {
testOpacity: 0.8,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[113.8623046875, 30.031055426540206],
[116.3232421875, 30.031055426540206],
[116.3232421875, 31.090574094954192],
[113.8623046875, 31.090574094954192],
[113.8623046875, 30.031055426540206],
],
[
[117.26806640625, 32.13840869677249],
[118.36669921875, 32.13840869677249],
[118.36669921875, 32.47269502206151],
[117.26806640625, 32.47269502206151],
[117.26806640625, 32.13840869677249],
],
],
},
},
@ -157,30 +51,28 @@ export default class Amap2demo_polygon extends React.Component {
.shape('fill')
.color('red')
.style({
// opacity: 1.0,
opacity: 'testOpacity',
// opacityLinear: {
// enable: true,
// dir: 'in',
// },
});
scene.addLayer(layer);
setTimeout(() => {
layer
.setData(data2)
.shape('fill')
.color('#0f0');
scene.render();
}, 1000);
// const layer2 = new PolygonLayer({
// autoFit: true,
// })
// .source(data)
// .shape('line')
// .color('#000')
// .style({
// opacity: 1.0,
// });
// scene.addLayer(layer2);
const layer2 = new PolygonLayer({
autoFit: true,
})
.source(data)
.shape('fill')
.color('red')
.style({
opacity: 0.4,
// opacityLinear: {
// enable: true,
// dir: 'out',
// },
raisingHeight: 50000,
});
scene.addLayer(layer2);
}
public render() {

212
stories/Map/components/amap2demo_polygon_extrude.tsx
View File

@ -23,101 +23,53 @@ export default class Amap2demo_polygon_extrude extends React.Component {
map: new GaodeMap({
// map: new GaodeMapV2({
// map: new Mapbox({
// pitch: 0,
style: 'dark',
// center: [-44.40673828125, -18.375379094031825],
// zoom: 13,
center: [120, 29.732983],
zoom: 6.2,
pitch: 60,
}),
});
this.scene = scene;
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
[
[
[115.04882812499999, 34.379712580462204],
[114.9609375, 33.46810795527896],
[115.8837890625, 33.50475906922609],
[115.86181640625001, 34.379712580462204],
[115.04882812499999, 34.379712580462204],
],
],
],
},
},
{
type: 'Feature',
properties: {
testOpacity: 1,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[113.8623046875, 30.031055426540206],
[116.3232421875, 30.031055426540206],
[116.3232421875, 31.090574094954192],
[113.8623046875, 31.090574094954192],
[113.8623046875, 30.031055426540206],
],
[
[117.26806640625, 32.13840869677249],
[118.36669921875, 32.13840869677249],
[118.36669921875, 32.47269502206151],
[117.26806640625, 32.47269502206151],
[117.26806640625, 32.13840869677249],
],
],
},
},
],
};
// const layer = new PolygonLayer({
// autoFit: true,
// })
// .source(data)
// // .shape('fill')
// .shape('extrude')
// .color('red')
// .size(600000)
// .style({
// // pickLight: true,
// heightfixed: true,
// // heightfixed: false,
// opacity: 'testOpacity',
// })
// .active(true);
// scene.addLayer(layer);
const wavePoints = new PointLayer({ zIndex: 2 })
.source(
[
{
lng: 120,
lat: 30,
},
{
lng: 120,
lat: 29,
},
{
lng: 120,
lat: 28,
},
{
lng: 120,
lat: 27,
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.shape('circle')
.color('#ff0')
.size(50)
.animate(true)
.active(true)
.style({
raisingHeight: 200000 + 150000,
});
scene.on('loaded', () => {
scene.addLayer(wavePoints);
// @ts-ignore
let lineDown, lineUp, textLayer;
@ -191,7 +143,24 @@ export default class Amap2demo_polygon_extrude extends React.Component {
});
scene.addLayer(lineLayer);
const provincelayer = new PolygonLayer({})
const provincelayerSide = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
// .active({
// color: 'rgb(100,230,255)',
// })
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
opacity: 0.8,
topsurface: false,
});
scene.addLayer(provincelayerSide);
const provincelayerTop = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
@ -204,44 +173,45 @@ export default class Amap2demo_polygon_extrude extends React.Component {
pickLight: true,
raisingHeight: 200000,
opacity: 0.8,
sidesurface: false,
});
scene.addLayer(provincelayer);
scene.addLayer(provincelayerTop);
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,
// });
// // @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,
});
});
// 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,
// });
// });
});
});
}

99
stories/Map/components/mapCenter.tsx
View File

@ -3,8 +3,6 @@ import { PointLayer, Scene, LineLayer, PolygonLayer, ILayer } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
import * as turf from '@turf/turf';
const aspaceLnglat = [120.11, 30.264701434772807] as [number, number];
export default class GaodeMapComponent extends React.Component {
// @ts-ignore
private scene: Scene;
@ -17,12 +15,8 @@ export default class GaodeMapComponent extends React.Component {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: aspaceLnglat,
// pitch: 0,
// pitch: 40,
// style: 'dark',
center: [120.11, 30.264701434772807],
zoom: 14,
// dragEnable: false
}),
});
// normal = 'normal',
@ -73,10 +67,55 @@ export default class GaodeMapComponent extends React.Component {
.shape('circle')
.size(30);
// layer0.on('mouseout', () => {})
// layer0.on('mousemove', () => {})
let layer01 = new PointLayer({ zIndex: 2 })
.source(
[
{
lng: 120.11,
lat: 30.27,
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.color('#ff0')
.shape('circle')
.size(30)
.style({
// raisingHeight: 50
raisingHeight: 5000,
});
layer0.on('click', () => {});
let layer2 = new PointLayer({}) // blend: 'additive'
.source(
[
{
lng: 120.11,
lat: 30.264701434772807,
name: 'n3',
},
{
lng: 120.111,
lat: 30.264701434772807,
name: 'n3',
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
);
let layer = new PointLayer({}) // blend: 'additive'
.source(
[
@ -120,7 +159,7 @@ export default class GaodeMapComponent extends React.Component {
// enable: false,
// // type: 'www'
// })
// .animate(true)
.animate(true)
.active(true)
// .active({
// color: '#f00',
@ -142,39 +181,23 @@ export default class GaodeMapComponent extends React.Component {
// unit: 'meter',
});
layer2
.shape('circle')
.color('#f00')
.size(50)
.animate(true)
.active(true)
.style({
raisingHeight: 5000,
});
this.scene = scene;
// console.log('layer', layer)
// let layer2 = new PointLayer({})
// .source([
// {
// lng: 120.1025,
// lat: 30.264701434772807,
// name: 'n2'
// }
// ], {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat',
// },
// })
// .shape('circle')
// .size(10)
// .color('#00f')
// .style({
// opacity: 0.5
// })
// scene.addImage(
// '00',
// 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
// );
scene.on('loaded', () => {
scene.addLayer(layer0);
scene.addLayer(layer01);
scene.addLayer(layer);
scene.addLayer(layer2);
scene.on('click', (e) => {
console.log(scene.getPickedLayer());

9
stories/Map/components/polygon_extrudeTex.tsx
View File

@ -38,14 +38,17 @@ export default class Amap2demo_polygon_extrude extends React.Component {
})
.style({
heightfixed: true,
pickLight: true,
// pickLight: true,
raisingHeight: 200000,
// mapTexture:
// 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
mapTexture:
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SOUKQJpw1FYAAAAAAAAAAAAAARQnAQ',
// mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
// opacity: 0.8,
sourceColor: '#f00',
targetColor: '#ff0',
// topsurface: false,
// sidesurface: false
});
scene.addLayer(provincelayer);