From fe2d964bddc704402bcfe1bd9c15e17d2029d290 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Fri, 2 Jul 2021 17:35:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E7=BA=BF=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=E5=9C=A8=20Mapbox/GaodeMap/GaodeMaoV2=20=E4=B8=8A?= =?UTF-8?q?=E8=A1=A8=E7=8E=B0=E4=B8=8D=E4=B8=80=E8=87=B4=20=EF=BC=8C?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- .../shaders/line_arc_great_circle_vert.glsl | 2 +- .../src/line/shaders/line_arc_vert.glsl | 2 +- .../layers/src/line/shaders/line_vert.glsl | 9 +++- stories/District/Layer/world.tsx | 24 ++++++---- stories/Map/components/amap2demo.tsx | 1 - stories/Map/components/amap2demo_arcLine.tsx | 1 - .../Map/components/amap2demo_arcLine3DTex.tsx | 1 - .../Map/components/amap2demo_arcLine3d.tsx | 1 - .../components/amap2demo_arcLine3dLinear.tsx | 1 - .../Map/components/amap2demo_arcLineDir.tsx | 21 --------- .../components/amap2demo_arcLineLinear.tsx | 1 - .../Map/components/amap2demo_arcLineTex.tsx | 1 - .../amap2demo_arcLine_greatCircle.tsx | 1 - .../amap2demo_arcLine_greatCircleTex.tsx | 1 - .../Map/components/amap2demo_citybuilding.tsx | 1 - .../components/amap2demo_clustermarker.tsx | 1 - .../Map/components/amap2demo_drawControl.tsx | 3 +- .../Map/components/amap2demo_drilldown.tsx | 1 - stories/Map/components/amap2demo_extrude.tsx | 3 +- stories/Map/components/amap2demo_heatmap.tsx | 1 - .../Map/components/amap2demo_heatmap3D.tsx | 1 - .../Map/components/amap2demo_heatmap_grid.tsx | 1 - .../components/amap2demo_heatmap_hexagon.tsx | 1 - .../amap2demo_heatmap_hexagon_world.tsx | 1 - stories/Map/components/amap2demo_iconfont.tsx | 1 - stories/Map/components/amap2demo_image.tsx | 3 +- .../Map/components/amap2demo_imagelayer.tsx | 1 - stories/Map/components/amap2demo_instance.tsx | 1 - stories/Map/components/amap2demo_lineDash.tsx | 1 - .../Map/components/amap2demo_lineHeight.tsx | 47 +++++++++++-------- .../Map/components/amap2demo_lineLinear.tsx | 2 +- .../Map/components/amap2demo_lineStreet.tsx | 1 - .../Map/components/amap2demo_markerPopup.tsx | 47 +++++++++++++++++++ .../Map/components/amap2demo_markerlayer.tsx | 1 - stories/Map/components/amap2demo_mesh.tsx | 1 - stories/Map/components/amap2demo_mesh2.tsx | 1 - .../Map/components/amap2demo_meshStyleMap.tsx | 1 - stories/Map/components/amap2demo_polygon.tsx | 2 +- .../components/amap2demo_polygon_extrude.tsx | 6 +-- .../Map/components/amap2demo_rasterlayer.tsx | 1 - stories/Map/components/amap2demo_road.tsx | 1 - stories/Map/components/amap2demo_road2.tsx | 1 - stories/Map/components/amap2demo_styleMap.tsx | 1 - stories/Map/components/amap2demo_text.tsx | 3 +- .../Map/components/amap2demo_textOffset.tsx | 1 - .../Map/components/amap2demo_textSelect.tsx | 1 - stories/Map/components/amap2demo_winds.tsx | 1 - stories/Map/components/amapdemo_extrude.tsx | 3 +- stories/Map/map.stories.tsx | 2 + typings.d.ts | 1 + 51 files changed, 112 insertions(+), 105 deletions(-) create mode 100644 stories/Map/components/amap2demo_markerPopup.tsx create mode 100644 typings.d.ts diff --git a/package.json b/package.json index a20a6b11be..7f3e019b3b 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ "devDependencies": { "@antv/g2": "^3.5.9", "@antv/gatsby-theme-antv": "^1.1.1", - "@antv/l7-district": "^2.2.46", + "@antv/l7-district": "^2.3.9", "@antv/l7-draw": "^2.3.40", - "@antv/l7-react": "^2.2.37", + "@antv/l7-react": "^2.3.2", "@babel/cli": "^7.6.4", "@babel/core": "^7.6.4", "@babel/plugin-proposal-decorators": "^7.6.0", diff --git a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl index 2b238bb917..0faf2b2175 100644 --- a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl @@ -196,7 +196,7 @@ void main() { if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap v_arcDistrance = v_arcDistrance * 1000000.0; } - if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) { // mapbox + if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox // v_arcDistrance *= 10.0; v_arcDistrance = project_pixel_allmap(v_arcDistrance); } diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index 0e46d14ec4..437e24781d 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -159,7 +159,7 @@ void main() { if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap v_arcDistrance *= 1000000.0; } - if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT) { // mapbox + if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox // v_arcDistrance *= 8.0; v_arcDistrance = project_pixel_allmap(v_arcDistrance); } diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index d98bbd5435..ca79a89252 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -106,9 +106,14 @@ void main() { if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x // gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y, 1.0)); - gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 10.0, 1.0)); // 额外除 10.0 是为了和gaode1.x的高度兼容 + gl_Position = u_Mvp * (vec4(project_pos.xy + offset, a_Size.y / 8.0, 1.0)); // 额外除 8.0 是为了和gaode1.x的高度兼容 } else { - gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0)); + float lineHeight = a_Size.y; + // 兼容 mapbox 在线高度上的效果表现基本一致 + if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { + lineHeight = lineHeight*2.0/pow(2.0, 20.0 - u_Zoom); + } + gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight, 1.0)); } setPickingColor(a_PickingColor); diff --git a/stories/District/Layer/world.tsx b/stories/District/Layer/world.tsx index 28992fb570..a24e6c6b17 100644 --- a/stories/District/Layer/world.tsx +++ b/stories/District/Layer/world.tsx @@ -48,19 +48,23 @@ export default class Country extends React.Component { field: 'NAME_ENG', padding: [5, 5], }, - popup: { - enable: true, - openTriggerEvent: 'click', - Html: (props: any) => { - return `${props.NAME_CHN + - ':' + - props.value}`; + popup: { + // enable: true, + enable: false, + Html: props => { + return `${props.NAME_CHN}`; }, }, }); - console.time('layer'); - Layer.on('loaded', () => { - console.timeEnd('layer'); + // console.time('layer'); + // Layer.on('loaded', () => { + // console.timeEnd('layer'); + // }); + console.log('======') + Layer.on('click', (e: any) => { + // alert(e); + console.log(e) + // alert(1) }); }); this.scene = scene; diff --git a/stories/Map/components/amap2demo.tsx b/stories/Map/components/amap2demo.tsx index 61b6985368..b758cacc2f 100644 --- a/stories/Map/components/amap2demo.tsx +++ b/stories/Map/components/amap2demo.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene } from '@antv/l7'; import { GaodeMapV2 } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine.tsx b/stories/Map/components/amap2demo_arcLine.tsx index 8998feedf4..991bc8bff7 100644 --- a/stories/Map/components/amap2demo_arcLine.tsx +++ b/stories/Map/components/amap2demo_arcLine.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine3DTex.tsx b/stories/Map/components/amap2demo_arcLine3DTex.tsx index 00f15a83f2..1b9306e962 100644 --- a/stories/Map/components/amap2demo_arcLine3DTex.tsx +++ b/stories/Map/components/amap2demo_arcLine3DTex.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine3d.tsx b/stories/Map/components/amap2demo_arcLine3d.tsx index ea749795b3..bea25fa4dc 100644 --- a/stories/Map/components/amap2demo_arcLine3d.tsx +++ b/stories/Map/components/amap2demo_arcLine3d.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { PointLayer, LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine3dLinear.tsx b/stories/Map/components/amap2demo_arcLine3dLinear.tsx index 28c08d054b..70c19cd5e7 100644 --- a/stories/Map/components/amap2demo_arcLine3dLinear.tsx +++ b/stories/Map/components/amap2demo_arcLine3dLinear.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { PointLayer, LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLineDir.tsx b/stories/Map/components/amap2demo_arcLineDir.tsx index 1d2c5cbbb6..9112bb67a1 100644 --- a/stories/Map/components/amap2demo_arcLineDir.tsx +++ b/stories/Map/components/amap2demo_arcLineDir.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; @@ -11,26 +10,6 @@ export default class Amap2demo_arcLineDir extends React.Component { this.scene.destroy(); } - // [116.478935,39.997761], - // [116.478939,39.997825], - // [116.478912,39.998549], - // [116.478912,39.998549], - // [116.478998,39.998555], - // [116.478998,39.998555], - // [116.479282,39.99856], - // [116.479658,39.998528], - // [116.480151,39.998453], - // [116.480784,39.998302], - // [116.480784,39.998302], - // [116.481149,39.998184], - // [116.481573,39.997997], - // [116.481863,39.997846], - // [116.482072,39.997718], - // [116.482362,39.997718], - // [116.483633,39.998935], - // [116.48367,39.998968], - // [116.484648,39.999861] - public async componentDidMount() { const scene = new Scene({ id: 'map', diff --git a/stories/Map/components/amap2demo_arcLineLinear.tsx b/stories/Map/components/amap2demo_arcLineLinear.tsx index a6fb7bbcdb..fef2b90fd7 100644 --- a/stories/Map/components/amap2demo_arcLineLinear.tsx +++ b/stories/Map/components/amap2demo_arcLineLinear.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLineTex.tsx b/stories/Map/components/amap2demo_arcLineTex.tsx index 4f20e179c8..5025965b02 100644 --- a/stories/Map/components/amap2demo_arcLineTex.tsx +++ b/stories/Map/components/amap2demo_arcLineTex.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine_greatCircle.tsx b/stories/Map/components/amap2demo_arcLine_greatCircle.tsx index f3f246cde2..436d453141 100644 --- a/stories/Map/components/amap2demo_arcLine_greatCircle.tsx +++ b/stories/Map/components/amap2demo_arcLine_greatCircle.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx b/stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx index 193af87df3..f63482df17 100644 --- a/stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx +++ b/stories/Map/components/amap2demo_arcLine_greatCircleTex.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_citybuilding.tsx b/stories/Map/components/amap2demo_citybuilding.tsx index 0c56efc678..dbac79a6a5 100644 --- a/stories/Map/components/amap2demo_citybuilding.tsx +++ b/stories/Map/components/amap2demo_citybuilding.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { CityBuildingLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_clustermarker.tsx b/stories/Map/components/amap2demo_clustermarker.tsx index 9f7f4d3e30..47fb36b031 100644 --- a/stories/Map/components/amap2demo_clustermarker.tsx +++ b/stories/Map/components/amap2demo_clustermarker.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { MarkerLayer, Marker, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_drawControl.tsx b/stories/Map/components/amap2demo_drawControl.tsx index c45e8a7e1c..650ffbdd6e 100644 --- a/stories/Map/components/amap2demo_drawControl.tsx +++ b/stories/Map/components/amap2demo_drawControl.tsx @@ -1,5 +1,4 @@ -//@ts-ignore -import { PointLayer, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import { DrawControl } from '@antv/l7-draw'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_drilldown.tsx b/stories/Map/components/amap2demo_drilldown.tsx index aef75dbd89..22d1943add 100644 --- a/stories/Map/components/amap2demo_drilldown.tsx +++ b/stories/Map/components/amap2demo_drilldown.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene } from '@antv/l7'; import { DrillDownLayer } from '@antv/l7-district'; import { GaodeMap } from '@antv/l7-maps'; diff --git a/stories/Map/components/amap2demo_extrude.tsx b/stories/Map/components/amap2demo_extrude.tsx index dc85fbb830..721015663f 100644 --- a/stories/Map/components/amap2demo_extrude.tsx +++ b/stories/Map/components/amap2demo_extrude.tsx @@ -1,5 +1,4 @@ -// @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_heatmap.tsx b/stories/Map/components/amap2demo_heatmap.tsx index 38496e35ff..20c878bd16 100644 --- a/stories/Map/components/amap2demo_heatmap.tsx +++ b/stories/Map/components/amap2demo_heatmap.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_heatmap3D.tsx b/stories/Map/components/amap2demo_heatmap3D.tsx index 714b81932e..ea602fc584 100644 --- a/stories/Map/components/amap2demo_heatmap3D.tsx +++ b/stories/Map/components/amap2demo_heatmap3D.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_heatmap_grid.tsx b/stories/Map/components/amap2demo_heatmap_grid.tsx index 9b233796e7..6dcb4fcfae 100644 --- a/stories/Map/components/amap2demo_heatmap_grid.tsx +++ b/stories/Map/components/amap2demo_heatmap_grid.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_heatmap_hexagon.tsx b/stories/Map/components/amap2demo_heatmap_hexagon.tsx index 79c584158d..28df1b48f9 100644 --- a/stories/Map/components/amap2demo_heatmap_hexagon.tsx +++ b/stories/Map/components/amap2demo_heatmap_hexagon.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_heatmap_hexagon_world.tsx b/stories/Map/components/amap2demo_heatmap_hexagon_world.tsx index 683a07cfca..3e8469597e 100644 --- a/stories/Map/components/amap2demo_heatmap_hexagon_world.tsx +++ b/stories/Map/components/amap2demo_heatmap_hexagon_world.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_iconfont.tsx b/stories/Map/components/amap2demo_iconfont.tsx index 0e8f6b7e91..806d467a76 100644 --- a/stories/Map/components/amap2demo_iconfont.tsx +++ b/stories/Map/components/amap2demo_iconfont.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_image.tsx b/stories/Map/components/amap2demo_image.tsx index 1c35eb0ab7..7f9e9e15ed 100644 --- a/stories/Map/components/amap2demo_image.tsx +++ b/stories/Map/components/amap2demo_image.tsx @@ -1,5 +1,4 @@ -// @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_imagelayer.tsx b/stories/Map/components/amap2demo_imagelayer.tsx index c52c1cd68d..991bb39abd 100644 --- a/stories/Map/components/amap2demo_imagelayer.tsx +++ b/stories/Map/components/amap2demo_imagelayer.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { ImageLayer, Scene } from '@antv/l7'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_instance.tsx b/stories/Map/components/amap2demo_instance.tsx index 380b27077a..139ed04ac0 100644 --- a/stories/Map/components/amap2demo_instance.tsx +++ b/stories/Map/components/amap2demo_instance.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps'; import AMapLoader from '@amap/amap-jsapi-loader'; diff --git a/stories/Map/components/amap2demo_lineDash.tsx b/stories/Map/components/amap2demo_lineDash.tsx index ad7ee62da1..fb405c2981 100644 --- a/stories/Map/components/amap2demo_lineDash.tsx +++ b/stories/Map/components/amap2demo_lineDash.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_lineHeight.tsx b/stories/Map/components/amap2demo_lineHeight.tsx index e9af5195a8..a3adbd5f6e 100644 --- a/stories/Map/components/amap2demo_lineHeight.tsx +++ b/stories/Map/components/amap2demo_lineHeight.tsx @@ -1,6 +1,5 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_lineHeight extends React.Component { @@ -14,7 +13,7 @@ export default class Amap2demo_lineHeight extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ pitch: 40, style: 'light', center: [102.600579, 23.114887], @@ -30,30 +29,40 @@ export default class Amap2demo_lineHeight extends React.Component { ) .then((res) => res.json()) .then((data) => { + + // let data = { + // "type": "FeatureCollection", + // "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + // "features": [ + // { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } }, + // { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } }, + // ] + // } const layer = new LineLayer({}) .source(data) .size('ELEV', (h) => { - return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 2]; + return [h % 50 === 0 ? 1.0 : 0.5, (h - 1500) * 20]; }) .shape('line') .scale('ELEV', { type: 'quantize', }) - .color( - 'ELEV', - [ - '#E4682F', - '#FF8752', - '#FFA783', - '#FFBEA8', - '#FFDCD6', - '#EEF3FF', - '#C8D7F5', - '#A5C1FC', - '#7FA7F9', - '#5F8AE5', - ].reverse(), - ); + .color('#f00') + // .color( + // 'ELEV', + // [ + // '#E4682F', + // '#FF8752', + // '#FFA783', + // '#FFBEA8', + // '#FFDCD6', + // '#EEF3FF', + // '#C8D7F5', + // '#A5C1FC', + // '#7FA7F9', + // '#5F8AE5', + // ].reverse(), + // ); scene.addLayer(layer); }); }); diff --git a/stories/Map/components/amap2demo_lineLinear.tsx b/stories/Map/components/amap2demo_lineLinear.tsx index 3524b59c7a..d0bce2df14 100644 --- a/stories/Map/components/amap2demo_lineLinear.tsx +++ b/stories/Map/components/amap2demo_lineLinear.tsx @@ -1,4 +1,4 @@ -// @ts-ignore + import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_lineStreet.tsx b/stories/Map/components/amap2demo_lineStreet.tsx index 2770c357dd..49f5329ff4 100644 --- a/stories/Map/components/amap2demo_lineStreet.tsx +++ b/stories/Map/components/amap2demo_lineStreet.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_markerPopup.tsx b/stories/Map/components/amap2demo_markerPopup.tsx new file mode 100644 index 0000000000..8b05eadefe --- /dev/null +++ b/stories/Map/components/amap2demo_markerPopup.tsx @@ -0,0 +1,47 @@ +//@ts-ignore +import { MarkerLayer, Scene } from '@antv/l7'; +import { AMapScene, Marker, Popup } from '@antv/l7-react'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; +import {useState} from 'react' + +const Amap2demo_markerPopup = () => { + const [showPopup , setShowPopup] = useState(false) + return ( + + { + console.log(marker.getElement().children[0].children[0]) + marker.getElement().children[0].children[0].addEventListener('mouseenter', (e) => { + setShowPopup(true) + }) + marker.getElement().children[0].children[0].addEventListener('mouseout', (e) => { + setShowPopup(false) + }); + }} + /> + {showPopup && + 这是个信息框 + } + + ); +} +export default Amap2demo_markerPopup diff --git a/stories/Map/components/amap2demo_markerlayer.tsx b/stories/Map/components/amap2demo_markerlayer.tsx index 55c83240ce..ee834558b9 100644 --- a/stories/Map/components/amap2demo_markerlayer.tsx +++ b/stories/Map/components/amap2demo_markerlayer.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { MarkerLayer, Marker, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_mesh.tsx b/stories/Map/components/amap2demo_mesh.tsx index a3a939e9a6..9d7a5d0ec6 100644 --- a/stories/Map/components/amap2demo_mesh.tsx +++ b/stories/Map/components/amap2demo_mesh.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_mesh2.tsx b/stories/Map/components/amap2demo_mesh2.tsx index b1818a97e2..ebe350a698 100644 --- a/stories/Map/components/amap2demo_mesh2.tsx +++ b/stories/Map/components/amap2demo_mesh2.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_meshStyleMap.tsx b/stories/Map/components/amap2demo_meshStyleMap.tsx index c83073259d..9a6848eb80 100644 --- a/stories/Map/components/amap2demo_meshStyleMap.tsx +++ b/stories/Map/components/amap2demo_meshStyleMap.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_polygon.tsx b/stories/Map/components/amap2demo_polygon.tsx index 03086f06ec..e519db4717 100644 --- a/stories/Map/components/amap2demo_polygon.tsx +++ b/stories/Map/components/amap2demo_polygon.tsx @@ -1,9 +1,9 @@ -// @ts-ignore import { PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_polygon extends React.Component { + // @ts-ignore private scene: Scene; public componentWillUnmount() { diff --git a/stories/Map/components/amap2demo_polygon_extrude.tsx b/stories/Map/components/amap2demo_polygon_extrude.tsx index ba8dccf159..de9a94f4ca 100644 --- a/stories/Map/components/amap2demo_polygon_extrude.tsx +++ b/stories/Map/components/amap2demo_polygon_extrude.tsx @@ -1,7 +1,4 @@ -import { vec2, vec3 } from 'gl-matrix'; -// @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { DrawPolygon } from '@antv/l7-draw'; +import { PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; @@ -16,6 +13,7 @@ function convertRGB2Hex(rgb: number[]) { export default class Amap2demo_polygon_extrude extends React.Component { private gui: dat.GUI; private $stats: Node; + // @ts-ignore private scene: Scene; public componentWillUnmount() { diff --git a/stories/Map/components/amap2demo_rasterlayer.tsx b/stories/Map/components/amap2demo_rasterlayer.tsx index 8c211b1569..aa4aa5c514 100644 --- a/stories/Map/components/amap2demo_rasterlayer.tsx +++ b/stories/Map/components/amap2demo_rasterlayer.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { RasterLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_road.tsx b/stories/Map/components/amap2demo_road.tsx index efdcbbb6ed..5f4a8973d1 100644 --- a/stories/Map/components/amap2demo_road.tsx +++ b/stories/Map/components/amap2demo_road.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_road2.tsx b/stories/Map/components/amap2demo_road2.tsx index 78c8636ff0..03896068e2 100644 --- a/stories/Map/components/amap2demo_road2.tsx +++ b/stories/Map/components/amap2demo_road2.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_styleMap.tsx b/stories/Map/components/amap2demo_styleMap.tsx index 5854ea0a53..15f3d8e4c7 100644 --- a/stories/Map/components/amap2demo_styleMap.tsx +++ b/stories/Map/components/amap2demo_styleMap.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_text.tsx b/stories/Map/components/amap2demo_text.tsx index 55ff5a2f3b..d0ccec170d 100644 --- a/stories/Map/components/amap2demo_text.tsx +++ b/stories/Map/components/amap2demo_text.tsx @@ -1,5 +1,4 @@ -// @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_text extends React.Component { diff --git a/stories/Map/components/amap2demo_textOffset.tsx b/stories/Map/components/amap2demo_textOffset.tsx index 215659c8b6..a40e1b6271 100644 --- a/stories/Map/components/amap2demo_textOffset.tsx +++ b/stories/Map/components/amap2demo_textOffset.tsx @@ -1,4 +1,3 @@ -//@ts-ignore import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_textSelect.tsx b/stories/Map/components/amap2demo_textSelect.tsx index b2fd8d6ff2..c071d514d8 100644 --- a/stories/Map/components/amap2demo_textSelect.tsx +++ b/stories/Map/components/amap2demo_textSelect.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amap2demo_winds.tsx b/stories/Map/components/amap2demo_winds.tsx index 3c89a569db..c8a58d1edf 100644 --- a/stories/Map/components/amap2demo_winds.tsx +++ b/stories/Map/components/amap2demo_winds.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/components/amapdemo_extrude.tsx b/stories/Map/components/amapdemo_extrude.tsx index 755bb866f0..b85afa068c 100644 --- a/stories/Map/components/amapdemo_extrude.tsx +++ b/stories/Map/components/amapdemo_extrude.tsx @@ -1,5 +1,4 @@ -// @ts-ignore -import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index 995461b7c7..a0620ca314 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -45,6 +45,7 @@ import Amap2demo_citybuilding from "./components/amap2demo_citybuilding" import Amap2demo_drilldown from "./components/amap2demo_drilldown" import Amap2demo_markerlayer from "./components/amap2demo_markerlayer" +import Amap2demo_markerPopup from './components/amap2demo_markerPopup'; import Amap2demo_clustermarker from './components/amap2demo_clustermarker'; import Amap2demo_instance from "./components/amap2demo_instance" @@ -104,6 +105,7 @@ storiesOf('地图方法', module) .add('高德地图2.0 点击下钻', () => ) .add('高德地图2.0 Marker图层', () => ) + .add('marker popup', () => ) .add('高德地图2.0 clusterMarker图层', () => ) .add('高德地图2.0 instance实例', () => ) diff --git a/typings.d.ts b/typings.d.ts new file mode 100644 index 0000000000..04d851ef8c --- /dev/null +++ b/typings.d.ts @@ -0,0 +1 @@ +declare module '@antv/l7'; \ No newline at end of file