diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index bcc4e5c2e3..9caef99a61 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -96,6 +96,9 @@ export interface IPolygonLayerStyleOptions { dir: string; }; + topsurface?: boolean; + sidesurface?: boolean; + mapTexture?: string; // 挤出几何体顶面贴图 raisingHeight?: number; // 挤出几何体抬升高度 sourceColor?: string; // 可选参数、设置渐变色的起始颜色(all) diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index ebcd10afa7..43e1e7867a 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -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, diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index fce915311f..de09e1c2a3 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -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) { diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts index 8e06f73fd0..81ebc9eb6d 100644 --- a/packages/layers/src/polygon/models/extrude.ts +++ b/packages/layers/src/polygon/models/extrude.ts @@ -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(), diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index 894cc7611e..b7ff5ce79e 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -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), diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl index 7f137e3263..8740925379 100644 --- a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl +++ b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl @@ -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; } diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl index e61342dff1..8139c372b1 100644 --- a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl +++ b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl @@ -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; } diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl index 82efbf734c..3c2445b2a1 100644 --- a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl +++ b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl @@ -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); diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl index 63264d8ac3..ad99997d59 100644 --- a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl +++ b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl @@ -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)); } diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl index 9e10ae92e2..2d95d5449a 100644 --- a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl +++ b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl @@ -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) diff --git a/packages/layers/src/polygon/shaders/polygon_linear_vert.glsl b/packages/layers/src/polygon/shaders/polygon_linear_vert.glsl index a971d06a7c..ca280288aa 100644 --- a/packages/layers/src/polygon/shaders/polygon_linear_vert.glsl +++ b/packages/layers/src/polygon/shaders/polygon_linear_vert.glsl @@ -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)); diff --git a/packages/layers/src/polygon/shaders/polygon_vert.glsl b/packages/layers/src/polygon/shaders/polygon_vert.glsl index 19c7b6b148..d8187accf8 100644 --- a/packages/layers/src/polygon/shaders/polygon_vert.glsl +++ b/packages/layers/src/polygon/shaders/polygon_vert.glsl @@ -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 { diff --git a/stories/Map/components/amap2demo_polygon.tsx b/stories/Map/components/amap2demo_polygon.tsx index e1c6e6d8ac..865cdd90b0 100644 --- a/stories/Map/components/amap2demo_polygon.tsx +++ b/stories/Map/components/amap2demo_polygon.tsx @@ -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() { diff --git a/stories/Map/components/amap2demo_polygon_extrude.tsx b/stories/Map/components/amap2demo_polygon_extrude.tsx index 1c0eea8a02..aeb22fd7b9 100644 --- a/stories/Map/components/amap2demo_polygon_extrude.tsx +++ b/stories/Map/components/amap2demo_polygon_extrude.tsx @@ -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, + // }); + // }); }); }); } diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index abd032cb76..8c37d47edc 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -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()); diff --git a/stories/Map/components/polygon_extrudeTex.tsx b/stories/Map/components/polygon_extrudeTex.tsx index 91b0fea0de..484296d4cd 100644 --- a/stories/Map/components/polygon_extrudeTex.tsx +++ b/stories/Map/components/polygon_extrudeTex.tsx @@ -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);