From 8f486b0e3831f745b66a38f416e7f81bbd3a982e Mon Sep 17 00:00:00 2001 From: lvisei Date: Wed, 12 Jun 2024 16:23:31 +0800 Subject: [PATCH] chore: delete legacy files (#2537) --- legacy/build/bundle.ts | 2 - legacy/build/rollup-plugin-glsl.js | 33 - legacy/build/rollup-plugin-inline-worker.js | 16 - legacy/build/rollup-plugin-miniapp.js | 48 - legacy/build/rollup.config.js | 100 - legacy/build/rollup.config.worker.js | 64 - legacy/dev-demos/.gitignore | 10 - legacy/dev-demos/.umirc.ts | 137 - legacy/dev-demos/index.md | 2 - legacy/dev-demos/package.json | 41 - .../src/bugs/heatmap/demos/hexagon.tsx | 81 - .../dev-demos/src/bugs/heatmap/demos/map.tsx | 76 - legacy/dev-demos/src/bugs/heatmap/heatmap.md | 2 - legacy/dev-demos/src/bugs/heatmap/hexagon.md | 2 - legacy/dev-demos/src/bugs/index.md | 1 - .../src/bugs/larkmap/demos/polygon.tsx | 98 - .../src/bugs/larkmap/demos/rastertile.tsx | 45 - legacy/dev-demos/src/bugs/larkmap/polygon.md | 2 - .../dev-demos/src/bugs/larkmap/rastertile.md | 2 - legacy/dev-demos/src/bugs/line/arc_linear.md | 2 - .../src/bugs/line/demo/arc_linear.tsx | 58 - .../dev-demos/src/bugs/line/demo/gaodev1.tsx | 60 - .../dev-demos/src/bugs/line/demo/setdata.tsx | 98 - legacy/dev-demos/src/bugs/line/line.md | 2 - legacy/dev-demos/src/bugs/line/setdata.md | 2 - legacy/dev-demos/src/bugs/marker/demo.tsx | 38 - legacy/dev-demos/src/bugs/marker/event.md | 2 - legacy/dev-demos/src/bugs/marker/index.md | 2 - legacy/dev-demos/src/bugs/marker/marker1.tsx | 39 - legacy/dev-demos/src/bugs/point/circle.md | 2 - legacy/dev-demos/src/bugs/point/cluster.md | 2 - .../dev-demos/src/bugs/point/demos/circle.tsx | 96 - .../src/bugs/point/demos/cluster.tsx | 69 - .../dev-demos/src/bugs/point/demos/image.tsx | 69 - .../src/bugs/point/demos/imagesize.tsx | 72 - .../src/bugs/point/demos/pointstroke.tsx | 134 - .../src/bugs/point/demos/pointupdate.tsx | 126 - .../dev-demos/src/bugs/point/demos/shape.tsx | 77 - .../dev-demos/src/bugs/point/demos/text.tsx | 62 - legacy/dev-demos/src/bugs/point/image.md | 2 - legacy/dev-demos/src/bugs/point/imagesize.md | 2 - legacy/dev-demos/src/bugs/point/shape.md | 2 - legacy/dev-demos/src/bugs/point/stroke.md | 3 - legacy/dev-demos/src/bugs/point/text.md | 3 - legacy/dev-demos/src/bugs/point/update.md | 8 - legacy/dev-demos/src/bugs/polygon/active.md | 2 - .../src/bugs/polygon/demos/district.tsx | 59 - .../src/bugs/polygon/demos/highlight.tsx | 77 - .../src/bugs/polygon/demos/polygon.tsx | 2624 -------- .../src/bugs/polygon/demos/polygon_active.tsx | 2588 -------- .../src/bugs/polygon/demos/polygonzindex.tsx | 75 - .../src/bugs/polygon/demos/quantile.tsx | 74 - .../src/bugs/polygon/demos/scale.tsx | 299 - .../src/bugs/polygon/demos/select.tsx | 2613 -------- legacy/dev-demos/src/bugs/polygon/district.md | 2 - .../dev-demos/src/bugs/polygon/highlight.md | 2 - legacy/dev-demos/src/bugs/polygon/polygon.md | 2 - .../src/bugs/polygon/polygonindex.md | 2 - legacy/dev-demos/src/bugs/polygon/quantile.md | 2 - legacy/dev-demos/src/bugs/polygon/scale.md | 2 - legacy/dev-demos/src/bugs/polygon/select.md | 2 - legacy/dev-demos/src/bugs/scene/bmap.md | 3 - .../dev-demos/src/bugs/scene/demos/bmap.tsx | 70 - .../src/bugs/scene/demos/exportimg.tsx | 91 - .../src/bugs/scene/demos/multiMap.tsx | 66 - .../src/bugs/scene/demos/removelayer.tsx | 65 - .../src/bugs/scene/demos/testDestroy.tsx | 82 - legacy/dev-demos/src/bugs/scene/exportimg.md | 3 - legacy/dev-demos/src/bugs/scene/multiMap.md | 3 - .../dev-demos/src/bugs/scene/removelayer.md | 2 - .../dev-demos/src/bugs/scene/testDestroy.md | 3 - .../src/bugs/source/demos/source-geometry.tsx | 53 - .../src/bugs/source/demos/source-update.tsx | 140 - legacy/dev-demos/src/bugs/source/source.md | 3 - .../dev-demos/src/bugs/source/sourceUpdate.md | 3 - .../dev-demos/src/bugs/three/demo/marker.tsx | 213 - legacy/dev-demos/src/bugs/three/marker.md | 3 - .../src/component/control/exportImage.md | 6 - .../src/component/control/exportImage.tsx | 88 - .../src/component/control/fullscreen.md | 6 - .../src/component/control/fullscreen.tsx | 39 - .../dev-demos/src/component/control/hide.md | 6 - .../dev-demos/src/component/control/hide.tsx | 59 - .../src/component/control/layerSwitch.md | 8 - .../src/component/control/layerSwitch.tsx | 163 - .../src/component/control/layerSwitch1.tsx | 77 - .../dev-demos/src/component/control/logo.md | 6 - .../dev-demos/src/component/control/logo.tsx | 71 - .../src/component/control/mapTheme.md | 6 - .../src/component/control/mapTheme.tsx | 52 - .../src/component/control/mouseLocation.md | 6 - .../src/component/control/mouseLocation.tsx | 43 - .../src/component/control/navigation.md | 6 - .../src/component/control/navigation.tsx | 48 - .../src/component/control/position.md | 6 - .../src/component/control/position.tsx | 95 - .../dev-demos/src/component/control/remove.md | 6 - .../src/component/control/remove.tsx | 64 - .../dev-demos/src/component/control/scale.md | 6 - .../dev-demos/src/component/control/scale.tsx | 64 - .../src/component/control/setOptions.md | 6 - .../src/component/control/setOptions.tsx | 56 - .../dev-demos/src/component/control/swipe.md | 6 - .../dev-demos/src/component/control/swipe.tsx | 161 - .../dev-demos/src/component/control/zoom.md | 6 - .../dev-demos/src/component/control/zoom.tsx | 82 - .../dev-demos/src/component/marker/marker.md | 7 - .../dev-demos/src/component/marker/marker.tsx | 52 - .../src/component/marker/markerLayer.md | 6 - .../src/component/marker/markerLayer.tsx | 102 - .../src/component/popup/layerPopup.md | 6 - .../src/component/popup/layerPopup.tsx | 182 - legacy/dev-demos/src/component/popup/popup.md | 6 - .../dev-demos/src/component/popup/popup.tsx | 265 - .../src/component/scene/boxSelect.md | 6 - .../src/component/scene/boxSelect.tsx | 71 - .../src/component/sync-scene/helper.ts | 147 - .../src/component/sync-scene/syncScene.tsx | 55 - .../src/component/sync-scene/syncSene.md | 6 - .../src/component/sync-scene/types.ts | 10 - legacy/dev-demos/src/draw/control.md | 6 - legacy/dev-demos/src/draw/demo/destroy.tsx | 62 - legacy/dev-demos/src/draw/demo/draw.tsx | 39 - .../dev-demos/src/draw/demo/drawControl.tsx | 67 - legacy/dev-demos/src/draw/demo/drawline.tsx | 38 - .../dev-demos/src/draw/demo/drawpolygon.tsx | 71 - legacy/dev-demos/src/draw/destroy.md | 9 - legacy/dev-demos/src/draw/line.md | 9 - legacy/dev-demos/src/draw/line_area.md | 10 - legacy/dev-demos/src/draw/polygon.md | 9 - .../src/features/canvasLayer/canvas2d.md | 3 - .../src/features/canvasLayer/canvas2d.tsx | 61 - .../src/features/citybuilding/amap1.md | 2 - .../src/features/citybuilding/amap1.tsx | 125 - .../src/features/citybuilding/amap2.md | 2 - .../src/features/citybuilding/amap2.tsx | 125 - .../src/features/citybuilding/mapbox.md | 2 - .../src/features/citybuilding/mapbox.tsx | 124 - .../src/features/customLayer/marker-layer.md | 143 - .../src/features/customLayer/marker.md | 78 - legacy/dev-demos/src/features/earth/earth.md | 2 - legacy/dev-demos/src/features/earth/earth.tsx | 66 - .../dev-demos/src/features/fix/demos/fix.tsx | 214 - .../dev-demos/src/features/fix/demos/fix2.tsx | 142 - legacy/dev-demos/src/features/fix/fix.md | 2 - legacy/dev-demos/src/features/fix/fix2.md | 2 - .../src/features/geometry/billboard.md | 2 - .../src/features/geometry/demos/billboard.tsx | 74 - .../src/features/geometry/demos/plane.tsx | 42 - .../src/features/geometry/demos/sprite.tsx | 62 - .../dev-demos/src/features/geometry/plane.md | 2 - .../dev-demos/src/features/geometry/sprite.md | 2 - .../src/features/heatmap/demos/grid.tsx | 91 - .../src/features/heatmap/demos/grid3d.tsx | 94 - .../src/features/heatmap/demos/heatmap.tsx | 76 - .../src/features/heatmap/demos/heatmap3d.tsx | 72 - .../src/features/heatmap/demos/hexagon.tsx | 72 - legacy/dev-demos/src/features/heatmap/grid.md | 2 - .../dev-demos/src/features/heatmap/grid3d.md | 2 - .../dev-demos/src/features/heatmap/heatmap.md | 2 - .../src/features/heatmap/heatmap3d.md | 2 - .../dev-demos/src/features/heatmap/hexagon.md | 2 - .../src/features/imageLayer/image.md | 2 - .../src/features/imageLayer/image.tsx | 90 - .../src/features/imageLayer/raster.md | 2 - .../src/features/imageLayer/raster.tsx | 80 - legacy/dev-demos/src/features/legend/cat.md | 3 - legacy/dev-demos/src/features/legend/cat.tsx | 86 - .../dev-demos/src/features/legend/useLine.ts | 144 - .../src/features/line/demos/arc_deg.tsx | 267 - .../src/features/line/demos/flowline.tsx | 150 - .../features/line/demos/greatcircleline.tsx | 97 - .../src/features/line/demos/line.tsx | 96 - .../src/features/line/demos/lineAnimate.tsx | 70 - .../src/features/line/demos/lineArc3d.tsx | 138 - .../src/features/line/demos/lineArcLinear.tsx | 142 - .../src/features/line/demos/lineArcPlane.tsx | 125 - .../src/features/line/demos/lineArrow.tsx | 159 - .../features/line/demos/linePopulation.tsx | 165 - .../src/features/line/demos/lineTexture.tsx | 71 - .../src/features/line/demos/lineWorker.tsx | 55 - .../src/features/line/demos/line_stroke.tsx | 100 - .../src/features/line/demos/linearc.tsx | 152 - .../src/features/line/demos/lineblur.tsx | 45 - .../src/features/line/demos/linedash.tsx | 88 - .../src/features/line/demos/lineheight.tsx | 62 - .../src/features/line/demos/linelinear.tsx | 99 - .../src/features/line/demos/linewall.tsx | 73 - .../src/features/line/demos/simplelines.tsx | 263 - .../dev-demos/src/features/line/flowline.md | 2 - legacy/dev-demos/src/features/line/line.md | 2 - .../src/features/line/lineAnimate.md | 2 - legacy/dev-demos/src/features/line/lineArc.md | 2 - .../dev-demos/src/features/line/lineArc3d.md | 2 - .../src/features/line/lineArc3dEarth.md | 95 - .../dev-demos/src/features/line/lineArcDeg.md | 2 - .../src/features/line/lineArcLinear.md | 2 - .../src/features/line/lineArcPlane.md | 2 - .../dev-demos/src/features/line/lineArrow.md | 2 - .../src/features/line/lineGreatcircle.md | 2 - .../src/features/line/linePopulation.md | 2 - .../src/features/line/lineTexture.md | 2 - .../dev-demos/src/features/line/lineWorker.md | 2 - .../src/features/line/line_stroke.md | 2 - .../dev-demos/src/features/line/linearline.md | 2 - .../dev-demos/src/features/line/lineblur.md | 2 - .../dev-demos/src/features/line/linedash.md | 2 - .../dev-demos/src/features/line/lineheight.md | 2 - .../dev-demos/src/features/line/linewall.md | 2 - .../src/features/line/simpleLine_linear.md | 103 - .../dev-demos/src/features/line/simpleline.md | 2 - .../src/features/marker/demos/marker.tsx | 70 - .../dev-demos/src/features/marker/marker.md | 2 - .../src/features/mask/demos/heatmap.tsx | 112 - .../src/features/mask/demos/heatmapgrid.tsx | 118 - .../src/features/mask/demos/heatmapgrid3d.tsx | 105 - .../src/features/mask/demos/hexgon.tsx | 117 - .../src/features/mask/demos/image.tsx | 87 - .../src/features/mask/demos/raster.tsx | 105 - .../src/features/mask/demos/raster_point.tsx | 147 - .../src/features/mask/demos/singleMask.tsx | 118 - .../src/features/mask/demos/text.tsx | 98 - .../src/features/mask/demos/wind.tsx | 102 - legacy/dev-demos/src/features/mask/heatmap.md | 2 - .../src/features/mask/heatmapgrid.md | 2 - .../src/features/mask/heatmapgrid3d.md | 2 - legacy/dev-demos/src/features/mask/hexgon.md | 2 - legacy/dev-demos/src/features/mask/image.md | 2 - legacy/dev-demos/src/features/mask/raster.md | 2 - .../src/features/mask/raster_point.md | 2 - .../dev-demos/src/features/mask/singleMask.md | 2 - legacy/dev-demos/src/features/mask/text.md | 2 - legacy/dev-demos/src/features/mask/wind.md | 2 - legacy/dev-demos/src/features/point/circle.md | 8 - .../src/features/point/demos/billboard.tsx | 91 - .../features/point/demos/circle-device.tsx | 77 - .../features/point/demos/circle-webgpu.tsx | 77 - .../src/features/point/demos/circlemeter.tsx | 65 - .../src/features/point/demos/column.tsx | 60 - .../src/features/point/demos/cylinder.tsx | 66 - .../src/features/point/demos/fill-image.tsx | 85 - .../src/features/point/demos/iconfont.tsx | 89 - .../src/features/point/demos/icons.tsx | 83 - .../features/point/demos/normal-device.tsx | 61 - .../src/features/point/demos/normal.tsx | 52 - .../src/features/point/demos/radar.tsx | 162 - .../src/features/point/demos/simple.tsx | 79 - .../src/features/point/demos/text.tsx | 87 - .../src/features/point/demos/text2.tsx | 81 - .../src/features/point/pointBillboard.md | 2 - .../src/features/point/pointCircle.md | 79 - .../src/features/point/pointCircleWebGPU.md | 3 - .../src/features/point/pointColumn.md | 9 - .../src/features/point/pointCylinder.md | 2 - .../src/features/point/pointEarthfill.md | 119 - .../src/features/point/pointFillImage.md | 3 - .../src/features/point/pointIconfont.md | 4 - .../src/features/point/pointIcons.md | 2 - .../src/features/point/pointImage.md | 81 - .../src/features/point/pointNormal.md | 2 - .../src/features/point/pointNormalDevice.md | 3 - .../src/features/point/pointRadar.md | 2 - .../src/features/point/pointSimple.md | 2 - .../dev-demos/src/features/point/pointText.md | 3 - .../src/features/point/pointText2.md | 3 - .../dev-demos/src/features/point/pointWave.md | 78 - .../src/features/polygon/demos/extrude.tsx | 179 - .../src/features/polygon/demos/fill.tsx | 97 - .../src/features/polygon/demos/fill_3d.tsx | 91 - .../src/features/polygon/demos/indoor.tsx | 64 - .../src/features/polygon/demos/ocean.tsx | 63 - .../src/features/polygon/demos/texture.tsx | 68 - .../src/features/polygon/demos/water.tsx | 65 - .../dev-demos/src/features/polygon/extrude.md | 2 - legacy/dev-demos/src/features/polygon/fill.md | 2 - .../dev-demos/src/features/polygon/fill_3d.md | 2 - .../dev-demos/src/features/polygon/indoor.md | 2 - .../dev-demos/src/features/polygon/ocean.md | 2 - .../dev-demos/src/features/polygon/texture.md | 2 - .../dev-demos/src/features/polygon/water.md | 2 - .../src/features/something/demos/wind.tsx | 61 - .../dev-demos/src/features/something/wind.md | 2 - .../dev-demos/src/features/threejs/amap1.md | 90 - .../dev-demos/src/features/threejs/amap2.md | 115 - .../dev-demos/src/features/threejs/amapCar.md | 250 - legacy/dev-demos/src/features/threejs/map.md | 139 - .../dev-demos/src/features/threejs/mapbox.md | 113 - legacy/dev-demos/src/features/tile/basemap.md | 3 - .../src/features/tile/basemap/basemap.tsx | 191 - .../tile/basemap/chinadistrictmap.tsx | 91 - .../src/features/tile/basemap/chinamap.tsx | 122 - .../src/features/tile/basemap/data.ts | 1 - .../src/features/tile/basemap/vectormap.tsx | 167 - .../src/features/tile/basemap/vectormap2.tsx | 174 - .../src/features/tile/basemap/worldmap.tsx | 101 - .../dev-demos/src/features/tile/hillshade.md | 3 - legacy/dev-demos/src/features/tile/mask.md | 5 - .../src/features/tile/minedatamap.md | 4 - .../features/tile/raster/imageDataMapping.tsx | 68 - .../dev-demos/src/features/tile/rasterData.md | 10 - .../features/tile/rasterData/hillShading.tsx | 205 - .../features/tile/rasterData/loadImage.tsx | 92 - .../tile/rasterData/loadImageMask.tsx | 98 - .../features/tile/rasterData/loadImageRGB.tsx | 94 - .../src/features/tile/rasterData/loadLerc.tsx | 68 - .../tile/rasterData/loadMultiTiff.tsx | 171 - .../src/features/tile/rasterData/loadTiff.tsx | 148 - .../src/features/tile/rasterData/update.tsx | 141 - .../src/features/tile/rasterDataImage.md | 5 - .../src/features/tile/rasterDataMask.md | 5 - .../src/features/tile/rasterDataMul.md | 4 - .../src/features/tile/rasterDataRGB.md | 5 - .../src/features/tile/rasterDataUpdate.md | 4 - legacy/dev-demos/src/features/tile/vector.md | 13 - .../src/features/tile/vector/debugLayer.tsx | 33 - .../src/features/tile/vector/geojson-vt.tsx | 78 - .../src/features/tile/vector/line.tsx | 92 - .../src/features/tile/vector/mask.tsx | 65 - .../src/features/tile/vector/point.tsx | 118 - .../dev-demos/src/features/tile/vectormap.md | 3 - .../dev-demos/src/features/tile/worldmap.md | 3 - .../dev-demos/src/features/tile/worldmap.tsx | 54 - .../src/gallery/map/demo/3d_base_map.tsx | 370 -- .../dev-demos/src/gallery/map/demo/fujian.tsx | 226 - legacy/dev-demos/src/gallery/map/fujian.md | 3 - .../src/gallery/map/suspension-map.md | 3 - legacy/dev-demos/src/gallery/scale/cat.md | 3 - legacy/dev-demos/src/gallery/scale/cat.tsx | 65 - .../dev-demos/src/gallery/scale/diverging.md | 2 - .../dev-demos/src/gallery/scale/diverging.tsx | 72 - legacy/dev-demos/src/gallery/scale/index.md | 74 - legacy/dev-demos/src/gallery/scale/linear.md | 2 - legacy/dev-demos/src/gallery/scale/linear.tsx | 54 - legacy/dev-demos/src/gallery/scale/map.md | 2 - legacy/dev-demos/src/gallery/scale/map.tsx | 112 - .../dev-demos/src/gallery/scale/quantile.md | 2 - .../dev-demos/src/gallery/scale/quantile.tsx | 61 - .../dev-demos/src/gallery/scale/quantize.md | 2 - .../dev-demos/src/gallery/scale/quantize.tsx | 57 - .../dev-demos/src/gallery/scale/sequential.md | 2 - .../src/gallery/scale/sequential.tsx | 57 - .../dev-demos/src/gallery/scale/threshold.md | 3 - .../dev-demos/src/gallery/scale/threshold.tsx | 58 - legacy/dev-demos/src/gallery/scale/useLine.ts | 143 - legacy/dev-demos/src/raster/demos/ndvi.tsx | 314 - .../dev-demos/src/raster/demos/rasterFile.tsx | 74 - .../src/raster/image/demos/image.tsx | 59 - legacy/dev-demos/src/raster/image/image.md | 8 - legacy/dev-demos/src/raster/multiband/432.md | 11 - legacy/dev-demos/src/raster/multiband/cog.md | 7 - .../src/raster/multiband/demos/cog.tsx | 144 - .../raster/multiband/demos/rasterFile2.tsx | 86 - .../src/raster/multiband/demos/rasterNDVI.tsx | 113 - .../src/raster/multiband/lc_08/432.tsx | 130 - .../src/raster/multiband/lc_08/NDBI.tsx | 88 - .../src/raster/multiband/lc_08/NDVI.tsx | 111 - .../src/raster/multiband/lc_08/NDWI.tsx | 88 - .../src/raster/multiband/lc_08/multfile.tsx | 102 - .../src/raster/multiband/lc_08/rgb.tsx | 91 - legacy/dev-demos/src/raster/multiband/ndbi.md | 7 - legacy/dev-demos/src/raster/multiband/ndvi.md | 7 - legacy/dev-demos/src/raster/multiband/ndwi.md | 7 - .../src/raster/multiband/rasterNDVI.md | 7 - legacy/dev-demos/src/raster/multiband/rgb.md | 9 - legacy/dev-demos/src/raster/ndvi.md | 2 - legacy/dev-demos/src/raster/rasterFile.md | 2 - .../src/raster/single/demos/light.tsx | 114 - .../src/raster/single/demos/rasterFile.tsx | 97 - legacy/dev-demos/src/raster/single/light.md | 7 - .../dev-demos/src/raster/single/rasterFile.md | 7 - .../dev-demos/src/tile/BaseMap/Sentinel-2.md | 8 - .../dev-demos/src/tile/BaseMap/customimage.md | 8 - legacy/dev-demos/src/tile/BaseMap/dem.md | 11 - .../src/tile/BaseMap/demos/Sentinel-2.tsx | 45 - .../src/tile/BaseMap/demos/customImage.tsx | 99 - .../dev-demos/src/tile/BaseMap/demos/dem.tsx | 78 - .../src/tile/BaseMap/demos/exportImage.tsx | 111 - .../src/tile/BaseMap/demos/hillshade.tsx | 204 - .../dev-demos/src/tile/BaseMap/demos/mask.tsx | 201 - .../src/tile/BaseMap/demos/mask2.tsx | 162 - .../src/tile/BaseMap/demos/normal.tsx | 61 - .../src/tile/BaseMap/demos/raster.tsx | 110 - .../src/tile/BaseMap/demos/rasterupdate.tsx | 51 - .../src/tile/BaseMap/demos/terrain.tsx | 53 - .../dev-demos/src/tile/BaseMap/demos/wms.tsx | 44 - .../dev-demos/src/tile/BaseMap/demos/wmts.tsx | 86 - .../src/tile/BaseMap/demos/zelda.tsx | 47 - legacy/dev-demos/src/tile/BaseMap/export.md | 8 - .../dev-demos/src/tile/BaseMap/hillshader.md | 8 - legacy/dev-demos/src/tile/BaseMap/mask.md | 10 - legacy/dev-demos/src/tile/BaseMap/mask2.md | 10 - legacy/dev-demos/src/tile/BaseMap/normal.md | 11 - legacy/dev-demos/src/tile/BaseMap/raster.md | 8 - .../src/tile/BaseMap/rasterupdate.md | 8 - legacy/dev-demos/src/tile/BaseMap/terrain.md | 8 - legacy/dev-demos/src/tile/BaseMap/wmsmap.md | 8 - legacy/dev-demos/src/tile/BaseMap/wmts.md | 9 - legacy/dev-demos/src/tile/BaseMap/zelda.md | 9 - .../src/tile/Mask/demos/raster_roller.tsx | 207 - .../src/tile/Mask/demos/vector_raster.tsx | 84 - .../dev-demos/src/tile/Mask/raster_roller.md | 8 - .../dev-demos/src/tile/Mask/vector_raster.md | 8 - .../dev-demos/src/tile/Raster/demos/image.tsx | 63 - .../src/tile/Raster/demos/imageRGB.tsx | 96 - .../src/tile/Raster/demos/multiRgb.tsx | 101 - .../src/tile/Raster/demos/mutiraster.tsx | 122 - .../src/tile/Raster/demos/rasterData.tsx | 137 - .../src/tile/Raster/demos/terrainRgb.tsx | 66 - legacy/dev-demos/src/tile/Raster/image.md | 8 - legacy/dev-demos/src/tile/Raster/imageRGB.md | 8 - .../dev-demos/src/tile/Raster/multiRaster.md | 7 - legacy/dev-demos/src/tile/Raster/multirgb.md | 7 - .../dev-demos/src/tile/Raster/rasterData.md | 9 - .../dev-demos/src/tile/Raster/terrainrgb.md | 9 - legacy/dev-demos/src/tile/Vector/chinacity.md | 9 - .../src/tile/Vector/chinadistrict.md | 9 - legacy/dev-demos/src/tile/Vector/citytile.md | 9 - legacy/dev-demos/src/tile/Vector/debug.md | 13 - .../tile/Vector/demos/chinadistrictmap.tsx | 94 - .../src/tile/Vector/demos/chinamap.tsx | 139 - .../src/tile/Vector/demos/citytile.tsx | 101 - .../dev-demos/src/tile/Vector/demos/data.ts | 1 - .../dev-demos/src/tile/Vector/demos/debug.tsx | 39 - .../dev-demos/src/tile/Vector/demos/event.tsx | 77 - .../src/tile/Vector/demos/farmland.tsx | 128 - .../tile/Vector/demos/geojonsvt_update.tsx | 63 - .../src/tile/Vector/demos/geojson-vt.tsx | 61 - .../src/tile/Vector/demos/pmtiles.tsx | 142 - .../dev-demos/src/tile/Vector/demos/point.tsx | 53 - .../src/tile/Vector/demos/polygon.tsx | 136 - .../src/tile/Vector/demos/simpleLine.tsx | 66 - .../dev-demos/src/tile/Vector/demos/text.tsx | 55 - .../src/tile/Vector/demos/vector_join.tsx | 83 - .../src/tile/Vector/demos/vectormask.tsx | 109 - .../src/tile/Vector/demos/worldmap.tsx | 136 - legacy/dev-demos/src/tile/Vector/event.md | 13 - legacy/dev-demos/src/tile/Vector/farmland.md | 9 - legacy/dev-demos/src/tile/Vector/geojsonvt.md | 9 - .../src/tile/Vector/geojsonvt_update.md | 9 - legacy/dev-demos/src/tile/Vector/pmtiles.md | 13 - legacy/dev-demos/src/tile/Vector/point.md | 13 - legacy/dev-demos/src/tile/Vector/polygon.md | 13 - .../dev-demos/src/tile/Vector/simpleLine.md | 13 - legacy/dev-demos/src/tile/Vector/text.md | 13 - .../dev-demos/src/tile/Vector/vector_join.md | 9 - .../dev-demos/src/tile/Vector/vectormask.md | 9 - legacy/dev-demos/src/tile/Vector/worldmap.md | 13 - legacy/dev-demos/src/webgpu/device/boids.md | 2 - .../src/webgpu/device/compute_texture.md | 3 - .../src/webgpu/device/demos/boids.tsx | 258 - .../webgpu/device/demos/compute_texture.tsx | 277 - .../src/webgpu/device/demos/g-device.tsx | 404 -- .../src/webgpu/device/demos/rect.tsx | 158 - .../src/webgpu/device/demos/texture.tsx | 211 - .../dev-demos/src/webgpu/device/demos/uv.tsx | 214 - .../dev-demos/src/webgpu/device/g-device.md | 3 - legacy/dev-demos/src/webgpu/device/rect.md | 3 - legacy/dev-demos/src/webgpu/device/texture.md | 3 - legacy/dev-demos/src/webgpu/raw/boids.md | 3 - .../src/webgpu/raw/demos/boids/boids.tsx | 291 - .../src/webgpu/raw/demos/boids/sprite.wgsl | 31 - .../webgpu/raw/demos/boids/updateSprites.wgsl | 83 - legacy/dev-demos/src/webgpu/raw/demos/raw.tsx | 110 - .../dev-demos/src/webgpu/raw/demos/utils.ts | 5803 ----------------- legacy/dev-demos/src/webgpu/raw/raw.md | 3 - ...15\345\212\241\350\257\264\346\230\216.md" | 167 - ...77\347\224\250\346\226\271\346\263\225.md" | 204 - legacy/scripts/merge_js_ts.sh | 21 - legacy/scripts/merge_md.sh | 21 - 469 files changed, 40349 deletions(-) delete mode 100644 legacy/build/bundle.ts delete mode 100644 legacy/build/rollup-plugin-glsl.js delete mode 100644 legacy/build/rollup-plugin-inline-worker.js delete mode 100644 legacy/build/rollup-plugin-miniapp.js delete mode 100644 legacy/build/rollup.config.js delete mode 100644 legacy/build/rollup.config.worker.js delete mode 100644 legacy/dev-demos/.gitignore delete mode 100644 legacy/dev-demos/.umirc.ts delete mode 100644 legacy/dev-demos/index.md delete mode 100644 legacy/dev-demos/package.json delete mode 100644 legacy/dev-demos/src/bugs/heatmap/demos/hexagon.tsx delete mode 100644 legacy/dev-demos/src/bugs/heatmap/demos/map.tsx delete mode 100644 legacy/dev-demos/src/bugs/heatmap/heatmap.md delete mode 100644 legacy/dev-demos/src/bugs/heatmap/hexagon.md delete mode 100644 legacy/dev-demos/src/bugs/index.md delete mode 100644 legacy/dev-demos/src/bugs/larkmap/demos/polygon.tsx delete mode 100644 legacy/dev-demos/src/bugs/larkmap/demos/rastertile.tsx delete mode 100644 legacy/dev-demos/src/bugs/larkmap/polygon.md delete mode 100644 legacy/dev-demos/src/bugs/larkmap/rastertile.md delete mode 100644 legacy/dev-demos/src/bugs/line/arc_linear.md delete mode 100644 legacy/dev-demos/src/bugs/line/demo/arc_linear.tsx delete mode 100644 legacy/dev-demos/src/bugs/line/demo/gaodev1.tsx delete mode 100644 legacy/dev-demos/src/bugs/line/demo/setdata.tsx delete mode 100644 legacy/dev-demos/src/bugs/line/line.md delete mode 100644 legacy/dev-demos/src/bugs/line/setdata.md delete mode 100644 legacy/dev-demos/src/bugs/marker/demo.tsx delete mode 100644 legacy/dev-demos/src/bugs/marker/event.md delete mode 100644 legacy/dev-demos/src/bugs/marker/index.md delete mode 100644 legacy/dev-demos/src/bugs/marker/marker1.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/circle.md delete mode 100644 legacy/dev-demos/src/bugs/point/cluster.md delete mode 100644 legacy/dev-demos/src/bugs/point/demos/circle.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/cluster.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/image.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/imagesize.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/pointstroke.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/pointupdate.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/shape.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/demos/text.tsx delete mode 100644 legacy/dev-demos/src/bugs/point/image.md delete mode 100644 legacy/dev-demos/src/bugs/point/imagesize.md delete mode 100644 legacy/dev-demos/src/bugs/point/shape.md delete mode 100644 legacy/dev-demos/src/bugs/point/stroke.md delete mode 100644 legacy/dev-demos/src/bugs/point/text.md delete mode 100644 legacy/dev-demos/src/bugs/point/update.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/active.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/district.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/highlight.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/polygon.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/polygon_active.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/polygonzindex.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/quantile.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/scale.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/demos/select.tsx delete mode 100644 legacy/dev-demos/src/bugs/polygon/district.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/highlight.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/polygon.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/polygonindex.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/quantile.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/scale.md delete mode 100644 legacy/dev-demos/src/bugs/polygon/select.md delete mode 100644 legacy/dev-demos/src/bugs/scene/bmap.md delete mode 100644 legacy/dev-demos/src/bugs/scene/demos/bmap.tsx delete mode 100644 legacy/dev-demos/src/bugs/scene/demos/exportimg.tsx delete mode 100644 legacy/dev-demos/src/bugs/scene/demos/multiMap.tsx delete mode 100644 legacy/dev-demos/src/bugs/scene/demos/removelayer.tsx delete mode 100644 legacy/dev-demos/src/bugs/scene/demos/testDestroy.tsx delete mode 100644 legacy/dev-demos/src/bugs/scene/exportimg.md delete mode 100644 legacy/dev-demos/src/bugs/scene/multiMap.md delete mode 100644 legacy/dev-demos/src/bugs/scene/removelayer.md delete mode 100644 legacy/dev-demos/src/bugs/scene/testDestroy.md delete mode 100644 legacy/dev-demos/src/bugs/source/demos/source-geometry.tsx delete mode 100644 legacy/dev-demos/src/bugs/source/demos/source-update.tsx delete mode 100644 legacy/dev-demos/src/bugs/source/source.md delete mode 100644 legacy/dev-demos/src/bugs/source/sourceUpdate.md delete mode 100644 legacy/dev-demos/src/bugs/three/demo/marker.tsx delete mode 100644 legacy/dev-demos/src/bugs/three/marker.md delete mode 100644 legacy/dev-demos/src/component/control/exportImage.md delete mode 100644 legacy/dev-demos/src/component/control/exportImage.tsx delete mode 100644 legacy/dev-demos/src/component/control/fullscreen.md delete mode 100644 legacy/dev-demos/src/component/control/fullscreen.tsx delete mode 100644 legacy/dev-demos/src/component/control/hide.md delete mode 100644 legacy/dev-demos/src/component/control/hide.tsx delete mode 100644 legacy/dev-demos/src/component/control/layerSwitch.md delete mode 100644 legacy/dev-demos/src/component/control/layerSwitch.tsx delete mode 100644 legacy/dev-demos/src/component/control/layerSwitch1.tsx delete mode 100644 legacy/dev-demos/src/component/control/logo.md delete mode 100644 legacy/dev-demos/src/component/control/logo.tsx delete mode 100644 legacy/dev-demos/src/component/control/mapTheme.md delete mode 100644 legacy/dev-demos/src/component/control/mapTheme.tsx delete mode 100644 legacy/dev-demos/src/component/control/mouseLocation.md delete mode 100644 legacy/dev-demos/src/component/control/mouseLocation.tsx delete mode 100644 legacy/dev-demos/src/component/control/navigation.md delete mode 100644 legacy/dev-demos/src/component/control/navigation.tsx delete mode 100644 legacy/dev-demos/src/component/control/position.md delete mode 100644 legacy/dev-demos/src/component/control/position.tsx delete mode 100644 legacy/dev-demos/src/component/control/remove.md delete mode 100644 legacy/dev-demos/src/component/control/remove.tsx delete mode 100644 legacy/dev-demos/src/component/control/scale.md delete mode 100644 legacy/dev-demos/src/component/control/scale.tsx delete mode 100644 legacy/dev-demos/src/component/control/setOptions.md delete mode 100644 legacy/dev-demos/src/component/control/setOptions.tsx delete mode 100644 legacy/dev-demos/src/component/control/swipe.md delete mode 100644 legacy/dev-demos/src/component/control/swipe.tsx delete mode 100644 legacy/dev-demos/src/component/control/zoom.md delete mode 100644 legacy/dev-demos/src/component/control/zoom.tsx delete mode 100644 legacy/dev-demos/src/component/marker/marker.md delete mode 100644 legacy/dev-demos/src/component/marker/marker.tsx delete mode 100644 legacy/dev-demos/src/component/marker/markerLayer.md delete mode 100644 legacy/dev-demos/src/component/marker/markerLayer.tsx delete mode 100644 legacy/dev-demos/src/component/popup/layerPopup.md delete mode 100644 legacy/dev-demos/src/component/popup/layerPopup.tsx delete mode 100644 legacy/dev-demos/src/component/popup/popup.md delete mode 100644 legacy/dev-demos/src/component/popup/popup.tsx delete mode 100644 legacy/dev-demos/src/component/scene/boxSelect.md delete mode 100644 legacy/dev-demos/src/component/scene/boxSelect.tsx delete mode 100644 legacy/dev-demos/src/component/sync-scene/helper.ts delete mode 100644 legacy/dev-demos/src/component/sync-scene/syncScene.tsx delete mode 100644 legacy/dev-demos/src/component/sync-scene/syncSene.md delete mode 100644 legacy/dev-demos/src/component/sync-scene/types.ts delete mode 100644 legacy/dev-demos/src/draw/control.md delete mode 100644 legacy/dev-demos/src/draw/demo/destroy.tsx delete mode 100644 legacy/dev-demos/src/draw/demo/draw.tsx delete mode 100644 legacy/dev-demos/src/draw/demo/drawControl.tsx delete mode 100644 legacy/dev-demos/src/draw/demo/drawline.tsx delete mode 100644 legacy/dev-demos/src/draw/demo/drawpolygon.tsx delete mode 100644 legacy/dev-demos/src/draw/destroy.md delete mode 100644 legacy/dev-demos/src/draw/line.md delete mode 100644 legacy/dev-demos/src/draw/line_area.md delete mode 100644 legacy/dev-demos/src/draw/polygon.md delete mode 100644 legacy/dev-demos/src/features/canvasLayer/canvas2d.md delete mode 100644 legacy/dev-demos/src/features/canvasLayer/canvas2d.tsx delete mode 100644 legacy/dev-demos/src/features/citybuilding/amap1.md delete mode 100644 legacy/dev-demos/src/features/citybuilding/amap1.tsx delete mode 100644 legacy/dev-demos/src/features/citybuilding/amap2.md delete mode 100644 legacy/dev-demos/src/features/citybuilding/amap2.tsx delete mode 100644 legacy/dev-demos/src/features/citybuilding/mapbox.md delete mode 100644 legacy/dev-demos/src/features/citybuilding/mapbox.tsx delete mode 100644 legacy/dev-demos/src/features/customLayer/marker-layer.md delete mode 100644 legacy/dev-demos/src/features/customLayer/marker.md delete mode 100644 legacy/dev-demos/src/features/earth/earth.md delete mode 100644 legacy/dev-demos/src/features/earth/earth.tsx delete mode 100644 legacy/dev-demos/src/features/fix/demos/fix.tsx delete mode 100644 legacy/dev-demos/src/features/fix/demos/fix2.tsx delete mode 100644 legacy/dev-demos/src/features/fix/fix.md delete mode 100644 legacy/dev-demos/src/features/fix/fix2.md delete mode 100644 legacy/dev-demos/src/features/geometry/billboard.md delete mode 100644 legacy/dev-demos/src/features/geometry/demos/billboard.tsx delete mode 100644 legacy/dev-demos/src/features/geometry/demos/plane.tsx delete mode 100644 legacy/dev-demos/src/features/geometry/demos/sprite.tsx delete mode 100644 legacy/dev-demos/src/features/geometry/plane.md delete mode 100644 legacy/dev-demos/src/features/geometry/sprite.md delete mode 100644 legacy/dev-demos/src/features/heatmap/demos/grid.tsx delete mode 100644 legacy/dev-demos/src/features/heatmap/demos/grid3d.tsx delete mode 100644 legacy/dev-demos/src/features/heatmap/demos/heatmap.tsx delete mode 100644 legacy/dev-demos/src/features/heatmap/demos/heatmap3d.tsx delete mode 100644 legacy/dev-demos/src/features/heatmap/demos/hexagon.tsx delete mode 100644 legacy/dev-demos/src/features/heatmap/grid.md delete mode 100644 legacy/dev-demos/src/features/heatmap/grid3d.md delete mode 100644 legacy/dev-demos/src/features/heatmap/heatmap.md delete mode 100644 legacy/dev-demos/src/features/heatmap/heatmap3d.md delete mode 100644 legacy/dev-demos/src/features/heatmap/hexagon.md delete mode 100644 legacy/dev-demos/src/features/imageLayer/image.md delete mode 100644 legacy/dev-demos/src/features/imageLayer/image.tsx delete mode 100644 legacy/dev-demos/src/features/imageLayer/raster.md delete mode 100644 legacy/dev-demos/src/features/imageLayer/raster.tsx delete mode 100644 legacy/dev-demos/src/features/legend/cat.md delete mode 100644 legacy/dev-demos/src/features/legend/cat.tsx delete mode 100644 legacy/dev-demos/src/features/legend/useLine.ts delete mode 100644 legacy/dev-demos/src/features/line/demos/arc_deg.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/flowline.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/greatcircleline.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/line.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineAnimate.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineArc3d.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineArcLinear.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineArcPlane.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineArrow.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/linePopulation.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineTexture.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineWorker.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/line_stroke.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/linearc.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineblur.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/linedash.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/lineheight.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/linelinear.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/linewall.tsx delete mode 100644 legacy/dev-demos/src/features/line/demos/simplelines.tsx delete mode 100644 legacy/dev-demos/src/features/line/flowline.md delete mode 100644 legacy/dev-demos/src/features/line/line.md delete mode 100644 legacy/dev-demos/src/features/line/lineAnimate.md delete mode 100644 legacy/dev-demos/src/features/line/lineArc.md delete mode 100644 legacy/dev-demos/src/features/line/lineArc3d.md delete mode 100644 legacy/dev-demos/src/features/line/lineArc3dEarth.md delete mode 100644 legacy/dev-demos/src/features/line/lineArcDeg.md delete mode 100644 legacy/dev-demos/src/features/line/lineArcLinear.md delete mode 100644 legacy/dev-demos/src/features/line/lineArcPlane.md delete mode 100644 legacy/dev-demos/src/features/line/lineArrow.md delete mode 100644 legacy/dev-demos/src/features/line/lineGreatcircle.md delete mode 100644 legacy/dev-demos/src/features/line/linePopulation.md delete mode 100644 legacy/dev-demos/src/features/line/lineTexture.md delete mode 100644 legacy/dev-demos/src/features/line/lineWorker.md delete mode 100644 legacy/dev-demos/src/features/line/line_stroke.md delete mode 100644 legacy/dev-demos/src/features/line/linearline.md delete mode 100644 legacy/dev-demos/src/features/line/lineblur.md delete mode 100644 legacy/dev-demos/src/features/line/linedash.md delete mode 100644 legacy/dev-demos/src/features/line/lineheight.md delete mode 100644 legacy/dev-demos/src/features/line/linewall.md delete mode 100644 legacy/dev-demos/src/features/line/simpleLine_linear.md delete mode 100644 legacy/dev-demos/src/features/line/simpleline.md delete mode 100644 legacy/dev-demos/src/features/marker/demos/marker.tsx delete mode 100644 legacy/dev-demos/src/features/marker/marker.md delete mode 100644 legacy/dev-demos/src/features/mask/demos/heatmap.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/heatmapgrid.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/heatmapgrid3d.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/hexgon.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/image.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/raster.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/raster_point.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/singleMask.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/text.tsx delete mode 100644 legacy/dev-demos/src/features/mask/demos/wind.tsx delete mode 100644 legacy/dev-demos/src/features/mask/heatmap.md delete mode 100644 legacy/dev-demos/src/features/mask/heatmapgrid.md delete mode 100644 legacy/dev-demos/src/features/mask/heatmapgrid3d.md delete mode 100644 legacy/dev-demos/src/features/mask/hexgon.md delete mode 100644 legacy/dev-demos/src/features/mask/image.md delete mode 100644 legacy/dev-demos/src/features/mask/raster.md delete mode 100644 legacy/dev-demos/src/features/mask/raster_point.md delete mode 100644 legacy/dev-demos/src/features/mask/singleMask.md delete mode 100644 legacy/dev-demos/src/features/mask/text.md delete mode 100644 legacy/dev-demos/src/features/mask/wind.md delete mode 100644 legacy/dev-demos/src/features/point/circle.md delete mode 100644 legacy/dev-demos/src/features/point/demos/billboard.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/circle-device.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/circle-webgpu.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/circlemeter.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/column.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/cylinder.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/fill-image.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/iconfont.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/icons.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/normal-device.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/normal.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/radar.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/simple.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/text.tsx delete mode 100644 legacy/dev-demos/src/features/point/demos/text2.tsx delete mode 100644 legacy/dev-demos/src/features/point/pointBillboard.md delete mode 100644 legacy/dev-demos/src/features/point/pointCircle.md delete mode 100644 legacy/dev-demos/src/features/point/pointCircleWebGPU.md delete mode 100644 legacy/dev-demos/src/features/point/pointColumn.md delete mode 100644 legacy/dev-demos/src/features/point/pointCylinder.md delete mode 100644 legacy/dev-demos/src/features/point/pointEarthfill.md delete mode 100644 legacy/dev-demos/src/features/point/pointFillImage.md delete mode 100644 legacy/dev-demos/src/features/point/pointIconfont.md delete mode 100644 legacy/dev-demos/src/features/point/pointIcons.md delete mode 100644 legacy/dev-demos/src/features/point/pointImage.md delete mode 100644 legacy/dev-demos/src/features/point/pointNormal.md delete mode 100644 legacy/dev-demos/src/features/point/pointNormalDevice.md delete mode 100644 legacy/dev-demos/src/features/point/pointRadar.md delete mode 100644 legacy/dev-demos/src/features/point/pointSimple.md delete mode 100644 legacy/dev-demos/src/features/point/pointText.md delete mode 100644 legacy/dev-demos/src/features/point/pointText2.md delete mode 100644 legacy/dev-demos/src/features/point/pointWave.md delete mode 100644 legacy/dev-demos/src/features/polygon/demos/extrude.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/fill.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/fill_3d.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/indoor.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/ocean.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/texture.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/demos/water.tsx delete mode 100644 legacy/dev-demos/src/features/polygon/extrude.md delete mode 100644 legacy/dev-demos/src/features/polygon/fill.md delete mode 100644 legacy/dev-demos/src/features/polygon/fill_3d.md delete mode 100644 legacy/dev-demos/src/features/polygon/indoor.md delete mode 100644 legacy/dev-demos/src/features/polygon/ocean.md delete mode 100644 legacy/dev-demos/src/features/polygon/texture.md delete mode 100644 legacy/dev-demos/src/features/polygon/water.md delete mode 100644 legacy/dev-demos/src/features/something/demos/wind.tsx delete mode 100644 legacy/dev-demos/src/features/something/wind.md delete mode 100644 legacy/dev-demos/src/features/threejs/amap1.md delete mode 100644 legacy/dev-demos/src/features/threejs/amap2.md delete mode 100644 legacy/dev-demos/src/features/threejs/amapCar.md delete mode 100644 legacy/dev-demos/src/features/threejs/map.md delete mode 100644 legacy/dev-demos/src/features/threejs/mapbox.md delete mode 100644 legacy/dev-demos/src/features/tile/basemap.md delete mode 100644 legacy/dev-demos/src/features/tile/basemap/basemap.tsx delete mode 100644 legacy/dev-demos/src/features/tile/basemap/chinadistrictmap.tsx delete mode 100644 legacy/dev-demos/src/features/tile/basemap/chinamap.tsx delete mode 100644 legacy/dev-demos/src/features/tile/basemap/data.ts delete mode 100644 legacy/dev-demos/src/features/tile/basemap/vectormap.tsx delete mode 100644 legacy/dev-demos/src/features/tile/basemap/vectormap2.tsx delete mode 100644 legacy/dev-demos/src/features/tile/basemap/worldmap.tsx delete mode 100644 legacy/dev-demos/src/features/tile/hillshade.md delete mode 100644 legacy/dev-demos/src/features/tile/mask.md delete mode 100644 legacy/dev-demos/src/features/tile/minedatamap.md delete mode 100644 legacy/dev-demos/src/features/tile/raster/imageDataMapping.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData.md delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/hillShading.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadImage.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadImageMask.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadImageRGB.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadLerc.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadMultiTiff.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/loadTiff.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterData/update.tsx delete mode 100644 legacy/dev-demos/src/features/tile/rasterDataImage.md delete mode 100644 legacy/dev-demos/src/features/tile/rasterDataMask.md delete mode 100644 legacy/dev-demos/src/features/tile/rasterDataMul.md delete mode 100644 legacy/dev-demos/src/features/tile/rasterDataRGB.md delete mode 100644 legacy/dev-demos/src/features/tile/rasterDataUpdate.md delete mode 100644 legacy/dev-demos/src/features/tile/vector.md delete mode 100644 legacy/dev-demos/src/features/tile/vector/debugLayer.tsx delete mode 100644 legacy/dev-demos/src/features/tile/vector/geojson-vt.tsx delete mode 100644 legacy/dev-demos/src/features/tile/vector/line.tsx delete mode 100644 legacy/dev-demos/src/features/tile/vector/mask.tsx delete mode 100644 legacy/dev-demos/src/features/tile/vector/point.tsx delete mode 100644 legacy/dev-demos/src/features/tile/vectormap.md delete mode 100644 legacy/dev-demos/src/features/tile/worldmap.md delete mode 100644 legacy/dev-demos/src/features/tile/worldmap.tsx delete mode 100644 legacy/dev-demos/src/gallery/map/demo/3d_base_map.tsx delete mode 100644 legacy/dev-demos/src/gallery/map/demo/fujian.tsx delete mode 100644 legacy/dev-demos/src/gallery/map/fujian.md delete mode 100644 legacy/dev-demos/src/gallery/map/suspension-map.md delete mode 100644 legacy/dev-demos/src/gallery/scale/cat.md delete mode 100644 legacy/dev-demos/src/gallery/scale/cat.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/diverging.md delete mode 100644 legacy/dev-demos/src/gallery/scale/diverging.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/index.md delete mode 100644 legacy/dev-demos/src/gallery/scale/linear.md delete mode 100644 legacy/dev-demos/src/gallery/scale/linear.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/map.md delete mode 100644 legacy/dev-demos/src/gallery/scale/map.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/quantile.md delete mode 100644 legacy/dev-demos/src/gallery/scale/quantile.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/quantize.md delete mode 100644 legacy/dev-demos/src/gallery/scale/quantize.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/sequential.md delete mode 100644 legacy/dev-demos/src/gallery/scale/sequential.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/threshold.md delete mode 100644 legacy/dev-demos/src/gallery/scale/threshold.tsx delete mode 100644 legacy/dev-demos/src/gallery/scale/useLine.ts delete mode 100644 legacy/dev-demos/src/raster/demos/ndvi.tsx delete mode 100644 legacy/dev-demos/src/raster/demos/rasterFile.tsx delete mode 100644 legacy/dev-demos/src/raster/image/demos/image.tsx delete mode 100644 legacy/dev-demos/src/raster/image/image.md delete mode 100644 legacy/dev-demos/src/raster/multiband/432.md delete mode 100644 legacy/dev-demos/src/raster/multiband/cog.md delete mode 100644 legacy/dev-demos/src/raster/multiband/demos/cog.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/demos/rasterFile2.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/demos/rasterNDVI.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/432.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/NDBI.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/NDVI.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/NDWI.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/multfile.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/lc_08/rgb.tsx delete mode 100644 legacy/dev-demos/src/raster/multiband/ndbi.md delete mode 100644 legacy/dev-demos/src/raster/multiband/ndvi.md delete mode 100644 legacy/dev-demos/src/raster/multiband/ndwi.md delete mode 100644 legacy/dev-demos/src/raster/multiband/rasterNDVI.md delete mode 100644 legacy/dev-demos/src/raster/multiband/rgb.md delete mode 100644 legacy/dev-demos/src/raster/ndvi.md delete mode 100644 legacy/dev-demos/src/raster/rasterFile.md delete mode 100644 legacy/dev-demos/src/raster/single/demos/light.tsx delete mode 100644 legacy/dev-demos/src/raster/single/demos/rasterFile.tsx delete mode 100644 legacy/dev-demos/src/raster/single/light.md delete mode 100644 legacy/dev-demos/src/raster/single/rasterFile.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/Sentinel-2.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/customimage.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/dem.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/Sentinel-2.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/customImage.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/dem.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/exportImage.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/hillshade.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/mask.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/mask2.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/normal.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/raster.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/rasterupdate.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/terrain.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/wms.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/wmts.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/demos/zelda.tsx delete mode 100644 legacy/dev-demos/src/tile/BaseMap/export.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/hillshader.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/mask.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/mask2.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/normal.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/raster.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/rasterupdate.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/terrain.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/wmsmap.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/wmts.md delete mode 100644 legacy/dev-demos/src/tile/BaseMap/zelda.md delete mode 100644 legacy/dev-demos/src/tile/Mask/demos/raster_roller.tsx delete mode 100644 legacy/dev-demos/src/tile/Mask/demos/vector_raster.tsx delete mode 100644 legacy/dev-demos/src/tile/Mask/raster_roller.md delete mode 100644 legacy/dev-demos/src/tile/Mask/vector_raster.md delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/image.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/imageRGB.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/multiRgb.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/mutiraster.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/rasterData.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/demos/terrainRgb.tsx delete mode 100644 legacy/dev-demos/src/tile/Raster/image.md delete mode 100644 legacy/dev-demos/src/tile/Raster/imageRGB.md delete mode 100644 legacy/dev-demos/src/tile/Raster/multiRaster.md delete mode 100644 legacy/dev-demos/src/tile/Raster/multirgb.md delete mode 100644 legacy/dev-demos/src/tile/Raster/rasterData.md delete mode 100644 legacy/dev-demos/src/tile/Raster/terrainrgb.md delete mode 100644 legacy/dev-demos/src/tile/Vector/chinacity.md delete mode 100644 legacy/dev-demos/src/tile/Vector/chinadistrict.md delete mode 100644 legacy/dev-demos/src/tile/Vector/citytile.md delete mode 100644 legacy/dev-demos/src/tile/Vector/debug.md delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/chinadistrictmap.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/chinamap.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/citytile.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/data.ts delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/debug.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/event.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/farmland.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/geojonsvt_update.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/geojson-vt.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/pmtiles.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/point.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/polygon.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/simpleLine.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/text.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/vector_join.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/vectormask.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/demos/worldmap.tsx delete mode 100644 legacy/dev-demos/src/tile/Vector/event.md delete mode 100644 legacy/dev-demos/src/tile/Vector/farmland.md delete mode 100644 legacy/dev-demos/src/tile/Vector/geojsonvt.md delete mode 100644 legacy/dev-demos/src/tile/Vector/geojsonvt_update.md delete mode 100644 legacy/dev-demos/src/tile/Vector/pmtiles.md delete mode 100644 legacy/dev-demos/src/tile/Vector/point.md delete mode 100644 legacy/dev-demos/src/tile/Vector/polygon.md delete mode 100644 legacy/dev-demos/src/tile/Vector/simpleLine.md delete mode 100644 legacy/dev-demos/src/tile/Vector/text.md delete mode 100644 legacy/dev-demos/src/tile/Vector/vector_join.md delete mode 100644 legacy/dev-demos/src/tile/Vector/vectormask.md delete mode 100644 legacy/dev-demos/src/tile/Vector/worldmap.md delete mode 100644 legacy/dev-demos/src/webgpu/device/boids.md delete mode 100644 legacy/dev-demos/src/webgpu/device/compute_texture.md delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/boids.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/compute_texture.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/g-device.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/rect.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/texture.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/demos/uv.tsx delete mode 100644 legacy/dev-demos/src/webgpu/device/g-device.md delete mode 100644 legacy/dev-demos/src/webgpu/device/rect.md delete mode 100644 legacy/dev-demos/src/webgpu/device/texture.md delete mode 100644 legacy/dev-demos/src/webgpu/raw/boids.md delete mode 100644 legacy/dev-demos/src/webgpu/raw/demos/boids/boids.tsx delete mode 100644 legacy/dev-demos/src/webgpu/raw/demos/boids/sprite.wgsl delete mode 100644 legacy/dev-demos/src/webgpu/raw/demos/boids/updateSprites.wgsl delete mode 100644 legacy/dev-demos/src/webgpu/raw/demos/raw.tsx delete mode 100644 legacy/dev-demos/src/webgpu/raw/demos/utils.ts delete mode 100644 legacy/dev-demos/src/webgpu/raw/raw.md delete mode 100644 "legacy/dev-docs/IoC \345\256\271\345\231\250\343\200\201\344\276\235\350\265\226\346\263\250\345\205\245\344\270\216\346\234\215\345\212\241\350\257\264\346\230\216.md" delete mode 100644 "legacy/dev-docs/\344\275\277\347\224\250\346\226\271\346\263\225.md" delete mode 100644 legacy/scripts/merge_js_ts.sh delete mode 100644 legacy/scripts/merge_md.sh diff --git a/legacy/build/bundle.ts b/legacy/build/bundle.ts deleted file mode 100644 index c63cf8c7f12..00000000000 --- a/legacy/build/bundle.ts +++ /dev/null @@ -1,2 +0,0 @@ -// @ts-ignore -export * from '@antv/l7'; diff --git a/legacy/build/rollup-plugin-glsl.js b/legacy/build/rollup-plugin-glsl.js deleted file mode 100644 index 156c969ec49..00000000000 --- a/legacy/build/rollup-plugin-glsl.js +++ /dev/null @@ -1,33 +0,0 @@ -import { createFilter } from 'rollup-pluginutils'; - -// borrow from https://github.com/uber/luma.gl/blob/master/dev-modules/babel-plugin-remove-glsl-comments/index.js#L4-L5 -const INLINE_COMMENT_REGEX = /\s*\/\/.*[\n\r]/g; -const BLOCK_COMMENT_REGEX = /\s*\/\*(\*(?!\/)|[^*])*\*\//g; - -// 生产环境压缩 GLSL -export default function glsl(include, minify) { - const filter = createFilter(include); - return { - name: 'glsl', - transform(code, id) { - if (!filter(id)) return; - - if (minify) { - code = code - .trim() // strip whitespace at the start/end - .replace(/\n+/g, '\n') // collapse multi line breaks - // remove comments - .replace(INLINE_COMMENT_REGEX, '\n') - .replace(BLOCK_COMMENT_REGEX, '') - .replace(/\n\s+/g, '\n') // strip identation - // .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators - // .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks - } - - return { - code: `export default ${JSON.stringify(code)};`, - map: { mappings: '' } - }; - } - }; -} diff --git a/legacy/build/rollup-plugin-inline-worker.js b/legacy/build/rollup-plugin-inline-worker.js deleted file mode 100644 index dc6b1526203..00000000000 --- a/legacy/build/rollup-plugin-inline-worker.js +++ /dev/null @@ -1,16 +0,0 @@ -import { createFilter } from 'rollup-pluginutils'; - -export default function inlineWorker(include) { - const filter = createFilter(include); - return { - name: 'inline-worker', - transform(code, id) { - if (!filter(id)) return; - - return { - code: `export default ${JSON.stringify(code)};`, - map: { mappings: '' }, - }; - }, - }; -} diff --git a/legacy/build/rollup-plugin-miniapp.js b/legacy/build/rollup-plugin-miniapp.js deleted file mode 100644 index aa45edca12c..00000000000 --- a/legacy/build/rollup-plugin-miniapp.js +++ /dev/null @@ -1,48 +0,0 @@ -import inject from '@rollup/plugin-inject'; -import modify from '@rollup/plugin-modify'; -import path from 'path'; - -const module = '@oasis-engine/miniprogram-adapter '; - -function register(name) { - return [module, name]; -} - -function resolveFile(filePath) { - return path.join(__dirname, '..', filePath); -} - -const adapterArray = [ - 'window', - 'atob', - 'devicePixelRatio', - 'document', - 'Element', - 'Event', - 'EventTarget', - 'HTMLCanvasElement', - 'HTMLElement', - 'HTMLMediaElement', - 'HTMLVideoElement', - 'Image', - 'navigator', - 'Node', - 'requestAnimationFrame', - 'cancelAnimationFrame', - 'screen', - 'XMLHttpRequest', - 'performance', -]; -const adapterVars = {}; - -adapterArray.forEach((name) => { - adapterVars[name] = register(name); -}); - -export default [ - inject(adapterVars), - modify({ - find: /^@antv\/l7-(.*)/, - replacement: resolveFile('packages/$1/src'), - }), -]; diff --git a/legacy/build/rollup.config.js b/legacy/build/rollup.config.js deleted file mode 100644 index b29750d0bc6..00000000000 --- a/legacy/build/rollup.config.js +++ /dev/null @@ -1,100 +0,0 @@ -import path from 'path'; -import alias from '@rollup/plugin-alias'; -import json from '@rollup/plugin-json'; -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import { terser } from 'rollup-plugin-terser'; -import analyze from 'rollup-plugin-analyzer'; -import babel from 'rollup-plugin-babel'; -import glsl from './rollup-plugin-glsl'; -import inlineWorker from './rollup-plugin-inline-worker'; -import postcss from 'rollup-plugin-postcss'; -import url from 'postcss-url'; - -const { BUILD, MINIFY } = process.env; -const minified = MINIFY === 'true'; -const production = BUILD === 'production'; -const outputFile = !production - ? 'packages/l7/dist/l7-dev.js' - : minified - ? 'packages/l7/dist/l7.js' - : 'packages/l7/dist/l7-dev.js'; - -function resolveFile(filePath) { - return path.join(__dirname, '..', filePath); -} - -module.exports = [ - { - input: resolveFile('build/bundle.ts'), - output: { - file: resolveFile(outputFile), - format: 'umd', - name: 'L7', - globals: { - 'mapbox-gl': 'mapboxgl', - }, - }, - external: ['mapbox-gl'], - treeshake: minified, - plugins: [ - alias({ - resolve: ['.tsx', '.ts'], - entries: [ - { - find: /^@antv\/l7-(.*)/, - replacement: resolveFile('packages/$1/src'), - }, - { - find: /^@antv\/l7$/, - replacement: resolveFile('packages/l7/src'), - }, - ], - }), - resolve({ - browser: true, - preferBuiltins: false, - extensions: ['.js', '.ts'], - }), - glsl(['**/*.glsl'], true), - inlineWorker(['**/*.worker.js']), - json(), - postcss({ - extract: false, - plugins: [url({ url: 'inline' })], - }), - // @see https://github.com/rollup/rollup-plugin-node-resolve#using-with-rollup-plugin-commonjs - commonjs({ - namedExports: { - eventemitter3: ['EventEmitter'], - // inversify: [ 'inject', 'injectable', 'postConstruct', 'Container', 'decorate', 'interfaces' ], - // @see https://github.com/rollup/rollup-plugin-commonjs/issues/266 - lodash: [ - 'isNil', - 'uniq', - 'clamp', - 'isObject', - 'isFunction', - 'cloneDeep', - 'isString', - 'isNumber', - 'isPlainObject', - 'merge', - ], - }, - dynamicRequireTargets: [ - 'node_modules/inversify/lib/syntax/binding_{on,when}_syntax.js', - ], - }), - babel({ - extensions: ['.js', '.ts'], - }), - // terser(), - minified ? terser() : false, - analyze({ - summaryOnly: true, - limit: 20, - }), - ], - }, -]; diff --git a/legacy/build/rollup.config.worker.js b/legacy/build/rollup.config.worker.js deleted file mode 100644 index c2ccf593132..00000000000 --- a/legacy/build/rollup.config.worker.js +++ /dev/null @@ -1,64 +0,0 @@ -import path from 'path'; -import alias from '@rollup/plugin-alias'; -import json from '@rollup/plugin-json'; -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import { terser } from 'rollup-plugin-terser'; -// import analyze from 'rollup-plugin-analyzer'; -import babel from 'rollup-plugin-babel'; - -const { BUILD } = process.env; -const production = BUILD === 'production'; -const outputFile = production - ? 'packages/utils/dist/l7-utils.worker.js' - : 'packages/utils/dist/l7-utils.worker.js'; -function resolveFile(filePath) { - return path.join(__dirname, '..', filePath); -} - -module.exports = [ - { - input: resolveFile('packages/utils/src/workers/index.ts'), - output: { - file: resolveFile(outputFile), - format: 'iife', - name: 'L7', - }, - context: 'self', - treeshake: true, - plugins: [ - alias({ - resolve: ['.tsx', '.ts'], - entries: [ - { - find: /^@antv\/l7-(.*)\/src\/(.*)/, - replacement: resolveFile('packages/$1/src/$2'), - }, - { - find: /^@antv\/l7-(.*)/, - replacement: resolveFile('packages/$1/src'), - }, - { - find: /^@antv\/l7$/, - replacement: resolveFile('packages/l7/src'), - }, - ], - }), - resolve({ - browser: true, - preferBuiltins: false, - extensions: ['.js', '.ts'], - }), - json(), - commonjs(), - babel({ - extensions: ['.js', '.ts'], - }), - production ? terser() : false, - // analyze({ - // summaryOnly: true, - // limit: 20, - // }), - ], - }, -]; diff --git a/legacy/dev-demos/.gitignore b/legacy/dev-demos/.gitignore deleted file mode 100644 index ae862749e3f..00000000000 --- a/legacy/dev-demos/.gitignore +++ /dev/null @@ -1,10 +0,0 @@ -/node_modules -/dist -/docs-dist -.dumi/tmp -.dumi/tmp-production -.umi-production/ -.umi/ -.DS_Store -.vscode -.idea diff --git a/legacy/dev-demos/.umirc.ts b/legacy/dev-demos/.umirc.ts deleted file mode 100644 index 440ca1b9261..00000000000 --- a/legacy/dev-demos/.umirc.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { defineConfig } from 'dumi'; -import { join } from 'path'; - -const isLocal = process.env.DPS_ENV === 'local'; -const rootDir = join(__dirname, '../../'); -const alias = { - '@antv/l7': join(rootDir, './packages/l7/src'), - '@antv/l7-maps': join(rootDir, './packages/maps/src'), - '@antv/l7-core': join(rootDir, './packages/core/src'), - '@antv/l7-component': join(rootDir, './packages/component/src'), - '@antv/l7-three': join(rootDir, './packages/three/src'), - '@antv/l7-layers': join(rootDir, './packages/layers/src'), - '@antv/l7-map': join(rootDir, './packages/map/src'), - '@antv/l7-renderer': join(rootDir, './packages/renderer/src'), - '@antv/l7-scene': join(rootDir, './packages/scene/src'), - '@antv/l7-source': join(rootDir, './packages/source/src'), - '@antv/l7-utils': join(rootDir, './packages/utils/src'), -}; - -export default defineConfig({ - title: 'L7 开发 Demo', - favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', - logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', - outputPath: 'docs-dist', - base: '/', - alias: isLocal && alias, - resolve: { - includes: ['src'], - }, - define: { - 'process.env.renderer': process.env.renderer?.replace(/\'/g, ''), - 'process.env.CI': process.env.CI?.replace(/\'/g, ''), - }, - devServer: { - port: '6006', - }, - polyfill: { - imports: ['element-remove', 'babel-polyfill'], - }, - targets: { - chrome: 58, - ie: 11, - }, - mode: 'site', - navs: [ - { - title: 'bugs', - path: '/bugs', - }, - { - title: '特性', - path: '/features', - }, - - { - title: '图库', - path: '/gallery', - }, - { - title: '瓦片', - path: '/tile', - }, - { - title: '栅格', - path: '/raster', - }, - { - title: '组件', - path: '/component', - }, - { - title: '绘制组件', - path: '/draw', - }, - { - title: 'WebGPU', - path: '/webgpu', - }, - { - title: 'GitHub', - path: 'https://github.com/antvis/L7', - }, - ], - copy: [ - { - from: 'node_modules/@antv/g-device-api/dist/pkg/glsl_wgsl_compiler_bg.wasm', - to: '[name].[ext]', - }, - ], - esbuild: false, - chainWebpack: (memo, { env, webpack, createCSSRule }) => { - // 设置 alias - memo.module - .rule('lint') - .test(/\.(glsl|wgsl)$/) - .use('babel') - .loader('ts-shader-loader'); - // 还可以创建具名use (loaders) - }, - extraBabelPresets: ['@babel/preset-typescript'], - extraBabelIncludes: [ - '@umijs/preset-dumi', - 'split-on-first', - 'query-string', - 'strict-uri-encode', - 'copy-text-to-clipboard', - ], - extraBabelPlugins: [['babel-plugin-inline-import', { extensions: ['.worker.js'] }]], - externals: { - react: 'window.React', - 'react-dom': 'window.ReactDOM', - antd: 'window.antd', - lodash: '_', - fetch: 'window.fetch', - }, - styles: ['https://gw.alipayobjects.com/os/lib/antd/4.16.13/dist/antd.css'], - scripts: [ - ` window._AMapSecurityConfig = { - securityJsCode: "290ddc4b0d33be7bc9b354bc6a4ca614" - }`, - 'https://webapi.amap.com/maps?v=2.0&key=6f025e700cbacbb0bb866712d20bb35c', - 'https://gw.alipayobjects.com/os/lib/whatwg-fetch/3.6.2/dist/fetch.umd.js', - 'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.profiling.min.js', - 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.profiling.min.js', - 'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js', - 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js', - // 'https://gw.alipayobjects.com/os/lib/antd/4.16.13/dist/antd-with-locales.js', - 'https://gw.alipayobjects.com/os/lib/antd/4.19.4/dist/antd.js', - 'https://api.map.baidu.com/api?type=webgl&v=1.0&ak=zLhopYPPERGtpGOgimcdKcCimGRyyIsh', - // "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=zLhopYPPERGtpGOgimcdKcCimGRyyIsh", - /** lodash */ - 'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js', - ], - publicPath: '/public/', - - // more config: https://d.umijs.org/config -}); diff --git a/legacy/dev-demos/index.md b/legacy/dev-demos/index.md deleted file mode 100644 index 06c12f4c130..00000000000 --- a/legacy/dev-demos/index.md +++ /dev/null @@ -1,2 +0,0 @@ -## L7 DEV -L7 地理可视化 Demo 开发、feature、bug 测试相关demo开发 \ No newline at end of file diff --git a/legacy/dev-demos/package.json b/legacy/dev-demos/package.json deleted file mode 100644 index d6de42c6c67..00000000000 --- a/legacy/dev-demos/package.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "name": "dev-demos", - "private": true, - "scripts": { - "dev-device": "export NODE_OPTIONS=--openssl-legacy-provider renderer=device && dumi dev renderer=device", - "dev-dumi": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev", - "dev-windows": "dumi dev", - "dev-local": "cross-env DPS_ENV=local dumi dev ", - "dumi-build": "export NODE_OPTIONS=--openssl-legacy-provider && dumi build" - }, - "dependencies": { - "@antv/g2": "^4.2.8", - "@antv/l7": "^2.21.0", - "@antv/l7-draw": "^3.0.9", - "@antv/l7-three": "^2.21.0", - "@antv/larkmap": "^1.3.2", - "@turf/turf": "^6.5.0", - "antd": "^4.12.3", - "async": "^3.2.4", - "babel-polyfill": "^6.26.0", - "lodash-es": "^4.17.21", - "wellknown": "^0.5.0", - "gcoord": "^0.3.2", - "geobuf": "^3.0.2", - "geotiff": "^2.0.1", - "lerc": "^3.0.0", - "pmtiles": "^2.7.2", - "popmotion": "^9.4.2", - "dat.gui": "^0.7.2" - }, - "devDependencies": { - "@types/dat.gui": "^0.7.1", - "@types/lodash-es": "^4.17.12", - "babel-plugin-inline-import": "^3.0.0", - "cross-env": "^7.0.3", - "dumi": "^1.1.0", - "element-remove": "^1.0.4", - "ts-shader-loader": "^1.0.6", - "typescript": "^5.2.2" - } -} diff --git a/legacy/dev-demos/src/bugs/heatmap/demos/hexagon.tsx b/legacy/dev-demos/src/bugs/heatmap/demos/hexagon.tsx deleted file mode 100644 index 79ec142de66..00000000000 --- a/legacy/dev-demos/src/bugs/heatmap/demos/hexagon.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Scene, HeatmapLayer, GaodeMap } from "@antv/l7"; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - style: "dark", - pitch: 0, - center: [120., 30.651873105004427], - zoom: 2 - }) - }); - scene.on("loaded", () => { - fetch( - "https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv" - ) - .then((res) => res.text()) - .then((data) => { - const layer = new HeatmapLayer({ - autoFit: false - }) - .source(data, { - parser: { - type: "csv", - x: "lng", - y: "lat" - }, - transforms: [ - { - type: "hexagon", - size: 2500, - field: "v", - method: "sum" - } - ] - }) - .size("sum", (sum) => { - return sum * 1000000; - }) - .shape("hexagonColumn") - .style({ - coverage: 0.8, - angle: 0 - }) - .color("sum", [ - "#094D4A", - "#146968", - "#1D7F7E", - "#289899", - "#34B6B7", - "#4AC5AF", - "#5FD3A6", - "#7BE39E", - "#A1EDB8", - "#C3F9CC", - "#DEFAC0", - "#ECFFB1" - ]); - scene.addLayer(layer); - layer.on("inited", () => { - // alert('inited') - console.log("inited *****"); - }); - }); - }); - - - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/heatmap/demos/map.tsx b/legacy/dev-demos/src/bugs/heatmap/demos/map.tsx deleted file mode 100644 index 59a7c4dcb03..00000000000 --- a/legacy/dev-demos/src/bugs/heatmap/demos/map.tsx +++ /dev/null @@ -1,76 +0,0 @@ -// @ts-ignore -import { Scene,RasterLayer, HeatmapLayer } from '@antv/l7'; -// @ts-ignore -import { Map,GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - -const scene = new Scene({ - id: 'map', - map: new Map({ - style: 'light', - pitch: 0, - center: [ 114.07737552216226, 22.542656745583486 ], - rotation: 0, - zoom: 12 - }) - }); - scene.on('loaded', () => { - const url1 = - 'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - - const layer1 = new RasterLayer({ - zIndex: 0, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - scene.addLayer(layer1) - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' - ) - .then(res => res.json()) - .then(data => { - const layer = new HeatmapLayer({}) - .source(data) - .shape('heatmap3D') - .size('h12', [0, 1.0]) // weight映射通道 - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#F27DEB', - '#8C1EB2', - '#421EB2', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - scene.addLayer(layer); - scene.render() - }); - }); - - - - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/heatmap/heatmap.md b/legacy/dev-demos/src/bugs/heatmap/heatmap.md deleted file mode 100644 index 0d9a64ff933..00000000000 --- a/legacy/dev-demos/src/bugs/heatmap/heatmap.md +++ /dev/null @@ -1,2 +0,0 @@ -### 热力图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/heatmap/hexagon.md b/legacy/dev-demos/src/bugs/heatmap/hexagon.md deleted file mode 100644 index 73a222e7118..00000000000 --- a/legacy/dev-demos/src/bugs/heatmap/hexagon.md +++ /dev/null @@ -1,2 +0,0 @@ -### 网格热力图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/index.md b/legacy/dev-demos/src/bugs/index.md deleted file mode 100644 index d5dbe65bd28..00000000000 --- a/legacy/dev-demos/src/bugs/index.md +++ /dev/null @@ -1 +0,0 @@ -### 用于 BUG 修复 diff --git a/legacy/dev-demos/src/bugs/larkmap/demos/polygon.tsx b/legacy/dev-demos/src/bugs/larkmap/demos/polygon.tsx deleted file mode 100644 index 1856272e944..00000000000 --- a/legacy/dev-demos/src/bugs/larkmap/demos/polygon.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import type { ChoroplethLayerProps,IconImageLayerProps } from '@antv/larkmap'; -import { ChoroplethLayer, LarkMap,LegendRamp,CustomControl,IconImageLayer} from '@antv/larkmap'; -import React, { useEffect, useState } from 'react'; -; -const layerOptions: Omit = { - autoFit: true, - fillColor: { - field: '达峰进度条', - value: [ - '#fee5d9', - '#fc9272', - '#fb6a4a', - '#de2d26', - '#a50f15', - ], - scale: { - type: 'quantize', - domain: [0, 100], - unknown: '#f7f4f9', - } - }, - opacity: 1, - strokeColor: '#ddd', - lineWidth: 1, - state: { - active: { strokeColor: 'green', lineWidth: 1.5, lineOpacity: 0.8 }, - select: { strokeColor: 'red', lineWidth: 1.5, lineOpacity: 0.8 }, - }, - - label: { - field: 'name', - visible: false, - style: { - textAllowOverlap: true, - fill: '#333', fontSize: 10, stroke: '#aaa', strokeWidth: 1 }, - }, - }; - - export default () => { - const [update,setUpdate] = useState() - const [options, setOptions] = useState(layerOptions); - const [source, setSource] = useState({ - data: { type: 'FeatureCollection', features: [] }, - parser: { - type: 'json', - geometry: 'geometry', - } - }); - - const [labelsource, setLabelsource] = useState({ - data: { type: 'FeatureCollection', features: [] }, - parser: { - type: 'json', - geometry: 'centroid', - } - }); - - - useEffect(() => { - fetch('https://mdn.alipayobjects.com/afts/file/A*7HqFT7he7KoAAAAAAAAAAAAADrd2AQ/12.20%20%E5%90%84%E7%9C%81%E4%BB%BD%E9%A6%96%E8%BD%AE%E6%84%9F%E6%9F%93%E9%AB%98%E5%B3%B0%E6%9C%9F%E9%A2%84%E6%B5%8B.json') - .then((response) => response.json()) - .then((data: any) => { - setSource((prevState) => ({ ...prevState, data })); - setLabelsource((prevState) => ({ ...prevState, data })) - }); - setInterval(()=>{ - setUpdate(Math.random()) - },2000) - }, []); - return ( - - { - console.log('onDataUpdate') - }} /> - -

达峰进度

- - - - - ); - }; \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/larkmap/demos/rastertile.tsx b/legacy/dev-demos/src/bugs/larkmap/demos/rastertile.tsx deleted file mode 100644 index bee76020c3c..00000000000 --- a/legacy/dev-demos/src/bugs/larkmap/demos/rastertile.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { RasterLayerProps } from '@antv/larkmap'; -import { LarkMap, RasterLayer } from '@antv/larkmap'; -import React, { useState } from 'react'; - -const layerOptions: Omit = { - autoFit: true, - style: { - domain: [0, 256], - clampLow: true, - rampColors: { - colors: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'], - positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0], - }, - }, -}; - -const canvas = document.createElement('canvas'); -canvas.width = 256; -canvas.height = 256; -const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - -const layerSource = { - data: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - parser: { - type: 'rasterTile', - tileSize: 256, - }, -}; - -export default () => { - const [options, setOptions] = useState(layerOptions); - - const config = { - mapType: 'Map' as const, - mapOptions: { - center: [120.210792, 30.246026] as [number, number], - zoom: 9, - }, - }; - return ( - - - - ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/larkmap/polygon.md b/legacy/dev-demos/src/bugs/larkmap/polygon.md deleted file mode 100644 index e60adcc8271..00000000000 --- a/legacy/dev-demos/src/bugs/larkmap/polygon.md +++ /dev/null @@ -1,2 +0,0 @@ -### 区域图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/larkmap/rastertile.md b/legacy/dev-demos/src/bugs/larkmap/rastertile.md deleted file mode 100644 index c0c80f47602..00000000000 --- a/legacy/dev-demos/src/bugs/larkmap/rastertile.md +++ /dev/null @@ -1,2 +0,0 @@ -### 栅格图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/arc_linear.md b/legacy/dev-demos/src/bugs/line/arc_linear.md deleted file mode 100644 index 40345e56717..00000000000 --- a/legacy/dev-demos/src/bugs/line/arc_linear.md +++ /dev/null @@ -1,2 +0,0 @@ -### 弧线渐变 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/demo/arc_linear.tsx b/legacy/dev-demos/src/bugs/line/demo/arc_linear.tsx deleted file mode 100644 index a0c182abd2b..00000000000 --- a/legacy/dev-demos/src/bugs/line/demo/arc_linear.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// @ts-ignore -import { LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import {GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - pitch: 57.999999999999964, - style: "dark", - center: [101.94365594271085, 40.46139674355291], - zoom: 2.7484264183323437, - rotation: -21.600099999999884 - }) - }); - - scene.on("loaded", () => { - fetch("https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt") - .then((res) => res.text()) - .then((data) => { - const layer = new LineLayer({}) - .source(data, { - parser: { - type: "csv", - x: "lng1", - y: "lat1", - x1: "lng2", - y1: "lat2" - } - }) - .size(1) - .shape("arc") - .color("#FF7C6A") - .style({ - opacity: 0.8, - sourceColor: "#f00", - targetColor: "#6F19FF" - }); - scene.addLayer(layer); - }); - }); - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/demo/gaodev1.tsx b/legacy/dev-demos/src/bugs/line/demo/gaodev1.tsx deleted file mode 100644 index fd823575147..00000000000 --- a/legacy/dev-demos/src/bugs/line/demo/gaodev1.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// @ts-ignore -import { LineLayer, GaodeMapV1,Scene } from '@antv/l7'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMapV1({ - center: [121.472644, 31.231706], - zoom: 8.15, - style: 'dark', - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/0290a972-eedd-42f6-b69e-50a35e8a0824.json' - ) - .then((res) => res.json()) - .then((data) => { - const layer = new LineLayer({}) - .source(data, { - parser: { - type: 'json', - coordinates: 'coordinates', - }, - }) - .size(0.5) - .shape('line') - .active(true) - .color('length', [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0', - ]); - scene.addLayer(layer); - }); - }); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/demo/setdata.tsx b/legacy/dev-demos/src/bugs/line/demo/setdata.tsx deleted file mode 100644 index 723b17593f0..00000000000 --- a/legacy/dev-demos/src/bugs/line/demo/setdata.tsx +++ /dev/null @@ -1,98 +0,0 @@ -// @ts-ignore -import { PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import {GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - const data = { - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 80.15625, - 54.57206165565852 - ], - [ - 123.04687499999999, - 31.052933985705163 - ], - [ - 119.88281249999999, - -10.487811882056683 - ], - [ - 60.8203125, - -2.460181181020993 - ], - [ - 8.0859375, - 16.636191878397664 - ], - [ - -2.109375, - 43.83452678223682 - ], - [ - -5.625, - 56.559482483762245 - ], - [ - -5.625, - 59.712097173322924 - ] - ] - } - } - ] - }; - scene.on('loaded', () => { - - const fill = new PolygonLayer({}) - .source(data) - .shape('line') - .size(5) - .select(true) - .color('active',()=>{ - const index =Math.floor(Math.random()*10); - return ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'][index] - }) - .style({ - opacity:1, - - }); - - scene.addLayer(fill); - scene.on('contextmenu',()=>{ - fill.setData(data) - }) - }) - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/line.md b/legacy/dev-demos/src/bugs/line/line.md deleted file mode 100644 index f613cd9b35b..00000000000 --- a/legacy/dev-demos/src/bugs/line/line.md +++ /dev/null @@ -1,2 +0,0 @@ -### gaodev1 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/line/setdata.md b/legacy/dev-demos/src/bugs/line/setdata.md deleted file mode 100644 index d28e4d87bfd..00000000000 --- a/legacy/dev-demos/src/bugs/line/setdata.md +++ /dev/null @@ -1,2 +0,0 @@ -### line setdata - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/marker/demo.tsx b/legacy/dev-demos/src/bugs/marker/demo.tsx deleted file mode 100644 index 1c8b1f21062..00000000000 --- a/legacy/dev-demos/src/bugs/marker/demo.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// @ts-ignore -import { Marker, MarkerLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120.104446, 30.261081], - zoom: 19.056, - }), - }); - scene.on('loaded', () => { - // 创建默认 marker - const markerLayer = new MarkerLayer({ - cluster: true, - }); - scene.addMarkerLayer(markerLayer); - const marker = new Marker().setLnglat([ - 120.1047383116185, 30.261127905299425, - ]); - markerLayer.addMarker(marker); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/marker/event.md b/legacy/dev-demos/src/bugs/marker/event.md deleted file mode 100644 index 5d82e36514e..00000000000 --- a/legacy/dev-demos/src/bugs/marker/event.md +++ /dev/null @@ -1,2 +0,0 @@ -### Marker 事件 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/marker/index.md b/legacy/dev-demos/src/bugs/marker/index.md deleted file mode 100644 index 96f09d4d8b9..00000000000 --- a/legacy/dev-demos/src/bugs/marker/index.md +++ /dev/null @@ -1,2 +0,0 @@ -### Marker 动态添加 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/marker/marker1.tsx b/legacy/dev-demos/src/bugs/marker/marker1.tsx deleted file mode 100644 index 61a9fbe29b3..00000000000 --- a/legacy/dev-demos/src/bugs/marker/marker1.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// @ts-ignore -import { Marker, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120.104446, 30.261081], - zoom: 19.056, - }), - }); - scene.on('loaded', () => { - // 创建默认 marker - // const markerLayer = new MarkerLayer(); - // scene.addMarkerLayer(markerLayer); - const marker = new Marker().setLnglat([ - 120.1047383116185, 30.261127905299425, - ]); - marker.on('click', () => { - alert('click'); - }) - scene.addMarker(marker); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/point/circle.md b/legacy/dev-demos/src/bugs/point/circle.md deleted file mode 100644 index 59d79b2f839..00000000000 --- a/legacy/dev-demos/src/bugs/point/circle.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - 圆 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/cluster.md b/legacy/dev-demos/src/bugs/point/cluster.md deleted file mode 100644 index f1bc9a8a1af..00000000000 --- a/legacy/dev-demos/src/bugs/point/cluster.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - cluster - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/circle.tsx b/legacy/dev-demos/src/bugs/point/demos/circle.tsx deleted file mode 100644 index 3a39c45c540..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/circle.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'light', - center: [ 121.434765, 31.256735 ], - zoom: 14.83 - }) - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' - ); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' - ) - .then(res => res.json()) - .then(data => { - const imageLayer = new PointLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }) - .color('red') - .shape('square') - .size('unit_price',[2,30]) - .style({ - rotation: { - field:'unit_price', - value: [0,360] - }, - opacity: 1, - }); - const imageLayer2 = new PointLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }) - .color('#00f') - .shape('circle') - .size(6) - .style({ - opacity: 1, - }); - scene.addLayer(imageLayer); - imageLayer.on('click',(e)=>{ - console.log(e) - }) - scene.addLayer(imageLayer2); - }); - }); - - - - }, []); - return ( - <> -
-
- - ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/cluster.tsx b/legacy/dev-demos/src/bugs/point/demos/cluster.tsx deleted file mode 100644 index adf5c00a14b..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/cluster.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// @ts-ignore -import { PointLayer,LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import {GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - -const scene = new Scene({ - id: "map", - map: new GaodeMap({ - center: [110, 36], - style: "light", - zoom: 5 - }) - }); - scene.on("loaded", () => { - fetch("https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json") - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ - - }) - .source(data.list, { - cluster: true, - // clusterOptions:{ - // radius: 10, - // }, - parser: { - type: "json", - x: "j", - y: "w" - } - }) - .filter("point_count", (value) => value > 1) - .shape("point_count", "text") - // .shape("circle") - .size(18) - .color("black") - .style({ - textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: "#f00", // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - // textAllowOverlap: true, - }); - - scene.addLayer(pointLayer); - }); - }); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/image.tsx b/legacy/dev-demos/src/bugs/point/demos/image.tsx deleted file mode 100644 index 624e88ad2d5..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/image.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - ); - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.4, 31.258134], - zoom: 12, - pitch: 0, - style: 'normal', - doubleClickZoom:false, - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', - ); - const data = await response.json(); - const newData = data.map((item: any,index: number) => { - item.type = ['00', '01', '02',''][index % 4]; - return item; - }); - const imageLayer = new PointLayer({ - autoFit:false, - }) - .source(newData.slice(0,4), { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('01') - .active(false) - .size(20); - - scene.addLayer(imageLayer); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/imagesize.tsx b/legacy/dev-demos/src/bugs/point/demos/imagesize.tsx deleted file mode 100644 index 77d2607568e..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/imagesize.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'light', - center: [ 121.434765, 31.256735 ], - zoom: 14.83 - }) - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' - ); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' - ) - .then(res => res.json()) - .then(data => { - const imageLayer = new PointLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }) - // .shape('name', [ '00', '01', '02' ]) - .color('red') - .shape('square') - .size(25); - scene.addLayer(imageLayer); - }); - }); - - - - }, []); - return ( - <> -
-
- - ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/pointstroke.tsx b/legacy/dev-demos/src/bugs/point/demos/pointstroke.tsx deleted file mode 100644 index 860cfc08ceb..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/pointstroke.tsx +++ /dev/null @@ -1,134 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -import { DrawLine } from '@antv/l7-draw'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import { useEffect } from 'react'; -const pointData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - name: 'A', - color: 'red', - size: 10, - }, - geometry: { - type: 'Point', - coordinates: [135.52734375, 46.31658418182218], - }, - }, - { - type: 'Feature', - properties: { - name: 'B', - color: 'yellow', - }, - geometry: { - type: 'Point', - coordinates: [120.9375, 27.059125784374068], - }, - }, - { - type: 'Feature', - properties: { - name: 'E', - color: 'blue', - size: 13, - }, - geometry: { - type: 'Point', - coordinates: [125.9375, 24.059125784374068], - }, - }, - { - type: 'Feature', - properties: { - name: 'C', - color: 'red', - size: 10, - }, - geometry: { - type: 'Point', - coordinates: [107.22656249999999, 37.020098201368114], - }, - }, - { - type: 'Feature', - properties: { - name: 'F', - color: 'red', - size: 15, - }, - geometry: { - type: 'Point', - coordinates: [110.22656249999999, 39.020098201368114], - }, - }, - ], -}; -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [110, 36], - style: 'light', - zoom: 3, - }), - }); - scene.on('loaded', () => { - const pointLayer = new PointLayer({}) - .source(pointData) - - .shape('circle') - .size(20) - .active({ - color: 'red', - }) - .color('#111') - .style({ - opacity: { - field: 'name', - value: [0.5,0.5,0.8,1] - }, - // opacity:1, - strokeWidth: 3, - // stroke: '#f00', - stroke: { - field:'name', - value: ['red','yellow','blue','green'] - } - }); - - // const pointlable = new PointLayer({}) - // .shape('name', 'text') - // .source(pointData) - // .size(24) - // .color('#f00') - // .style({ - // opacity: 1, - // fontFamily: 'fangsong', - // stroke: '#fff', - // strokeWidth: 1, - // padding: [0, 0], - - // textAllowOverlap: false, - // }); - - scene.addLayer(pointLayer); - // scene.addLayer(pointlable); - - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/point/demos/pointupdate.tsx b/legacy/dev-demos/src/bugs/point/demos/pointupdate.tsx deleted file mode 100644 index 33524b1c6dd..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/pointupdate.tsx +++ /dev/null @@ -1,126 +0,0 @@ -// @ts-ignore -import { PointLayer,LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import {GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - let startPoint =[110.23,32]; - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - scene.on('loaded', () => { - - const line = new LineLayer({}) - .source({ - "type": "FeatureCollection", - "features": [] - }) - .shape('line') - .size(1) - .color('red') - .style({ // 描边颜色 - lineType: 'dash', - dashArray: [5, 5], - }); - const pointLayer = new PointLayer({}) - .source([]) - .shape('name','text') - .size(12) - .color('red') - .style({ - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - textAllowOverlap: false, - }); - - const circleLayer = new PointLayer({}) - .source({ - "type": "FeatureCollection", - "features": [] - }) - .shape('circle') - .size(12) - .color('red') - .style({ - stroke:'#fff', - strokeWidth: 2, // 描边宽度 - strokeOpacity: 1.0, - }); - - scene.addLayer(pointLayer); - scene.addLayer(line); - scene.addLayer(circleLayer); - - scene.on('mousemove',(e)=>{ - const {lng,lat} = e.lnglat; - pointLayer.setData([]) - circleLayer.setData({ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [ - 77.34374999999999, - 34.88593094075317 - ] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [ - lng,lat - ] - } - } - ] - }) - line.setData({ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 77.34374999999999, - 34.88593094075317 - ], - [ - lng,lat - ] - ] - } - } - ] - }) - }) - - }); - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/shape.tsx b/legacy/dev-demos/src/bugs/point/demos/shape.tsx deleted file mode 100644 index f0cd5c37320..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/shape.tsx +++ /dev/null @@ -1,77 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - ); - let shapeType = '01' - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.4, 31.258134], - zoom: 14, - pitch: 0, - style: 'normal', - doubleClickZoom:false, - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', - ); - const data = await response.json(); - const newData = data.map((item: any) => { - item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)]; - return item; - }); - const imageLayer = new PointLayer({ - autoFit:false - }) - .source(newData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('type', (v: any) => { - return shapeType; - }) - .active(false) - .size(20); - scene.addLayer(imageLayer); - setTimeout(()=>{ - shapeType = '02'; - imageLayer.shape('type', (v: any) => { - return shapeType; - }) - scene.render() - - },2000) - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/demos/text.tsx b/legacy/dev-demos/src/bugs/point/demos/text.tsx deleted file mode 100644 index 42bc5c4a43f..00000000000 --- a/legacy/dev-demos/src/bugs/point/demos/text.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// @ts-ignore -import { PolygonLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import { DrawControl } from '@antv/l7-draw'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const scene = new Scene({ - id: 'map', - map: new Mapbox({ - center: [121.4, 31.258134], - zoom: 14, - pitch: 0, - style: 'normal', - doubleClickZoom:false, - }), - }); - - fetch( - 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json' - ) - .then(res => res.json()) - .then(data => { - const layer = new PolygonLayer({}) - .source(data,{ - parser:{ - type:'json', - x:'lng', - y:'lat' - } - - }) - .color('blue') - .shape('helloworld') - .size(18) - .style({ - // fontSize: 10, - stroke: "#fff", - strokeWidth: 1.5, - textAnchor:'center', - textAllowOverlap: false, - padding: [5, 5] - }); - scene.addLayer(layer); - }); - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/image.md b/legacy/dev-demos/src/bugs/point/image.md deleted file mode 100644 index 1ea5c3d48b8..00000000000 --- a/legacy/dev-demos/src/bugs/point/image.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - image - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/imagesize.md b/legacy/dev-demos/src/bugs/point/imagesize.md deleted file mode 100644 index 6ebc67c4393..00000000000 --- a/legacy/dev-demos/src/bugs/point/imagesize.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - image-size - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/shape.md b/legacy/dev-demos/src/bugs/point/shape.md deleted file mode 100644 index f6611edc2ef..00000000000 --- a/legacy/dev-demos/src/bugs/point/shape.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - Shape - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/stroke.md b/legacy/dev-demos/src/bugs/point/stroke.md deleted file mode 100644 index d9451b6825f..00000000000 --- a/legacy/dev-demos/src/bugs/point/stroke.md +++ /dev/null @@ -1,3 +0,0 @@ -### Point - stroke -#### style 映射 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/text.md b/legacy/dev-demos/src/bugs/point/text.md deleted file mode 100644 index c9972abb61d..00000000000 --- a/legacy/dev-demos/src/bugs/point/text.md +++ /dev/null @@ -1,3 +0,0 @@ -### Point - text -#### 文本更新 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/point/update.md b/legacy/dev-demos/src/bugs/point/update.md deleted file mode 100644 index b0f26ddbd87..00000000000 --- a/legacy/dev-demos/src/bugs/point/update.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -group: - path: 'point' - title: 点 ---- -### Point - update -#### style 映射 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/active.md b/legacy/dev-demos/src/bugs/polygon/active.md deleted file mode 100644 index 1f05cd3093b..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/active.md +++ /dev/null @@ -1,2 +0,0 @@ -### polygon Active - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/district.tsx b/legacy/dev-demos/src/bugs/polygon/demos/district.tsx deleted file mode 100644 index 8ffcb167b04..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/district.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf - -// @ts-ignore -import { PolygonLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import geobuf from 'geobuf'; -import Pbf from 'pbf'; -import * as turf from '@turf/turf' - -export default () => { - // @ts-ignore - useEffect( async () => { - console.time('load') - const response = await fetch( - 'https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf', - ); - let shapeType = '01' - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.4, 31.258134], - zoom: 2, - pitch: 0, - style: 'normal', - doubleClickZoom:false, - }), - }); - - const data = await response.arrayBuffer(); - - const geojson = geobuf.decode(new Pbf(data)); - var options = {tolerance: 0.005, highQuality: false}; - var simplified = turf.simplify(geojson, options); - - - const fill = new PolygonLayer({ - autoFit:false - }) - .source(simplified) - .shape('fill') - .color('ENG_NAME',['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928']) - .active(false) - - scene.addLayer(fill); - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/highlight.tsx b/legacy/dev-demos/src/bugs/polygon/demos/highlight.tsx deleted file mode 100644 index 910840267d9..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/highlight.tsx +++ /dev/null @@ -1,77 +0,0 @@ -// https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf - -// @ts-ignore -import { PolygonLayer, LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -export default () => { - // @ts-ignore - useEffect( async () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'light', - center: [ 118.7368, 32.0560 ], - zoom: 9 - }) - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/91247d10-585b-4406-b1e2-93b001e3a0e4.json' - ) - .then(res => res.json()) - .then(data => { - const filllayer = new PolygonLayer({ - name: 'fill' - }) - .source(data) - .shape('fill') - .color('unit_price', [ '#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac' ]); - const linelayer = new LineLayer({ - zIndex: 1, - name: 'line' - }) - .source(data) - .shape('line') - .size(0.5) - .color('#fff') - .style({ - opacity: 0.5 - }); - const hightLayer = new LineLayer({ - zIndex: 4, // 设置显示层级 - name: 'hightlight' - }) - .source({ - type: 'FeatureCollection', - features: [ ] - }) - .shape('line') - .size(2) - .color('red'); - scene.addLayer(filllayer); - scene.addLayer(linelayer); - scene.addLayer(hightLayer); - filllayer.on('click', feature => { - console.log(feature); - hightLayer.setData({ - type: 'FeatureCollection', - features: [ feature.feature ] - }); - }); - }); - }); - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/polygon.tsx b/legacy/dev-demos/src/bugs/polygon/demos/polygon.tsx deleted file mode 100644 index 4914ec3146b..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/polygon.tsx +++ /dev/null @@ -1,2624 +0,0 @@ -import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; -import { GaodeMap } from "@antv/l7-maps"; -import React, { useEffect } from 'react'; -const list = { - portrKey: "PROVINCE_CITY_DITU", - portrName: "预测常住城市", - portrDesc: "预测用户省市分布，排除未知", - coverage: 0.8288461538461539, - reportDate: "20221127", - dataList: [ - { - portrValue: "浙江", - num: 830, - percentage: 0.27510772290354657, - extInfo: { - areaCode: "330000" - }, - subList: [ - { - portrValue: "杭州", - num: 553, - percentage: 0.18329466357308585, - extInfo: { - areaCode: "330100" - } - }, - { - portrValue: "宁波", - num: 56, - percentage: 0.018561484918793503, - extInfo: { - areaCode: "330200" - } - }, - { - portrValue: "温州", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "330300" - } - }, - { - portrValue: "绍兴", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "330600" - } - }, - { - portrValue: "金华", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "330700" - } - }, - { - portrValue: "嘉兴", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330400" - } - }, - { - portrValue: "湖州", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330500" - } - }, - { - portrValue: "台州", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "331000" - } - }, - { - portrValue: "衢州", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "330800" - } - }, - { - portrValue: "丽水", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "331100" - } - }, - { - portrValue: "舟山", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "330900" - } - } - ] - }, - { - portrValue: "广东", - num: 338, - percentage: 0.11203181968843222, - extInfo: { - areaCode: "440000" - }, - subList: [ - { - portrValue: "深圳", - num: 97, - percentage: 0.032151143520053035, - extInfo: { - areaCode: "440300" - } - }, - { - portrValue: "广州", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "440100" - } - }, - { - portrValue: "东莞", - num: 42, - percentage: 0.013921113689095127, - extInfo: { - areaCode: "441900" - } - }, - { - portrValue: "佛山", - num: 27, - percentage: 0.008949287371561154, - extInfo: { - areaCode: "440600" - } - }, - { - portrValue: "惠州", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "441300" - } - }, - { - portrValue: "汕头", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "440500" - } - }, - { - portrValue: "揭阳", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "445200" - } - }, - { - portrValue: "中山", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "442000" - } - }, - { - portrValue: "珠海", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "440400" - } - }, - { - portrValue: "江门", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440700" - } - }, - { - portrValue: "茂名", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440900" - } - }, - { - portrValue: "河源", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "441600" - } - }, - { - portrValue: "梅州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "441400" - } - }, - { - portrValue: "湛江", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "440800" - } - }, - { - portrValue: "清远", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "441800" - } - }, - { - portrValue: "韶关", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "440200" - } - }, - { - portrValue: "汕尾", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "441500" - } - }, - { - portrValue: "云浮", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "445300" - } - }, - { - portrValue: "潮州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "445100" - } - }, - { - portrValue: "肇庆", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441200" - } - }, - { - portrValue: "阳江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441700" - } - } - ] - }, - { - portrValue: "江苏", - num: 202, - percentage: 0.06695392774279085, - extInfo: { - areaCode: "320000" - }, - subList: [ - { - portrValue: "苏州", - num: 52, - percentage: 0.01723566456745111, - extInfo: { - areaCode: "320500" - } - }, - { - portrValue: "南京", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "320100" - } - }, - { - portrValue: "无锡", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "320200" - } - }, - { - portrValue: "南通", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "320600" - } - }, - { - portrValue: "常州", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "320400" - } - }, - { - portrValue: "徐州", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "320300" - } - }, - { - portrValue: "盐城", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "320900" - } - }, - { - portrValue: "镇江", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "321100" - } - }, - { - portrValue: "宿迁", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "321300" - } - }, - { - portrValue: "淮安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "320800" - } - }, - { - portrValue: "扬州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "321000" - } - }, - { - portrValue: "连云港", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "320700" - } - }, - { - portrValue: "泰州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "321200" - } - } - ] - }, - { - portrValue: "河南", - num: 190, - percentage: 0.06297646668876367, - extInfo: { - areaCode: "410000" - }, - subList: [ - { - portrValue: "郑州", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "410100" - } - }, - { - portrValue: "南阳", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "411300" - } - }, - { - portrValue: "焦作", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "410800" - } - }, - { - portrValue: "许昌", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411000" - } - }, - { - portrValue: "周口", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411600" - } - }, - { - portrValue: "洛阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "410300" - } - }, - { - portrValue: "驻马店", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "411700" - } - }, - { - portrValue: "平顶山", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410400" - } - }, - { - portrValue: "新乡", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410700" - } - }, - { - portrValue: "濮阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "410900" - } - }, - { - portrValue: "信阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "411500" - } - }, - { - portrValue: "开封", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "410200" - } - }, - { - portrValue: "商丘", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "411400" - } - }, - { - portrValue: "安阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "410500" - } - }, - { - portrValue: "三门峡", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "411200" - } - }, - { - portrValue: "漯河", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "411100" - } - }, - { - portrValue: "鹤壁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "410600" - } - }, - { - portrValue: "济源", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "419000" - } - } - ] - }, - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110000" - }, - subList: [ - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110100" - } - } - ] - }, - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310000" - }, - subList: [ - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310100" - } - } - ] - }, - { - portrValue: "山东", - num: 119, - percentage: 0.03944315545243619, - extInfo: { - areaCode: "370000" - }, - subList: [ - { - portrValue: "济南", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "370100" - } - }, - { - portrValue: "青岛", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "370200" - } - }, - { - portrValue: "潍坊", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "370700" - } - }, - { - portrValue: "日照", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "371100" - } - }, - { - portrValue: "烟台", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370600" - } - }, - { - portrValue: "济宁", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370800" - } - }, - { - portrValue: "枣庄", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "370400" - } - }, - { - portrValue: "德州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "371400" - } - }, - { - portrValue: "泰安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "370900" - } - }, - { - portrValue: "滨州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "371600" - } - }, - { - portrValue: "淄博", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "370300" - } - }, - { - portrValue: "临沂", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371300" - } - }, - { - portrValue: "聊城", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371500" - } - }, - { - portrValue: "东营", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "370500" - } - }, - { - portrValue: "菏泽", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "371700" - } - }, - { - portrValue: "威海", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "371000" - } - } - ] - }, - { - portrValue: "四川", - num: 113, - percentage: 0.03745442492542261, - extInfo: { - areaCode: "510000" - }, - subList: [ - { - portrValue: "成都", - num: 81, - percentage: 0.02684786211468346, - extInfo: { - areaCode: "510100" - } - }, - { - portrValue: "绵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510700" - } - }, - { - portrValue: "遂宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510900" - } - }, - { - portrValue: "南充", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "511300" - } - }, - { - portrValue: "自贡", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510300" - } - }, - { - portrValue: "德阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510600" - } - }, - { - portrValue: "广元", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "510800" - } - }, - { - portrValue: "内江", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511000" - } - }, - { - portrValue: "广安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511600" - } - }, - { - portrValue: "攀枝花", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "510400" - } - }, - { - portrValue: "宜宾", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511500" - } - }, - { - portrValue: "达州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511700" - } - }, - { - portrValue: "雅安", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511800" - } - }, - { - portrValue: "巴中", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511900" - } - }, - { - portrValue: "资阳", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "512000" - } - }, - { - portrValue: "阿坝", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513200" - } - }, - { - portrValue: "凉山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513400" - } - } - ] - }, - { - portrValue: "湖北", - num: 98, - percentage: 0.03248259860788863, - extInfo: { - areaCode: "420000" - }, - subList: [ - { - portrValue: "武汉", - num: 49, - percentage: 0.016241299303944315, - extInfo: { - areaCode: "420100" - } - }, - { - portrValue: "襄阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "420600" - } - }, - { - portrValue: "孝感", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "420900" - } - }, - { - portrValue: "黄石", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "420200" - } - }, - { - portrValue: "荆州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "421000" - } - }, - { - portrValue: "荆门", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "420800" - } - }, - { - portrValue: "鄂州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "420700" - } - }, - { - portrValue: "咸宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "421200" - } - }, - { - portrValue: "黄冈", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "421100" - } - }, - { - portrValue: "天门", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "429006" - } - }, - { - portrValue: "宜昌", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "420500" - } - }, - { - portrValue: "随州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "421300" - } - }, - { - portrValue: "恩施", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "422800" - } - } - ] - }, - { - portrValue: "安徽", - num: 93, - percentage: 0.03082532316871064, - extInfo: { - areaCode: "340000" - }, - subList: [ - { - portrValue: "合肥", - num: 31, - percentage: 0.010275107722903546, - extInfo: { - areaCode: "340100" - } - }, - { - portrValue: "阜阳", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "341200" - } - }, - { - portrValue: "芜湖", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "340200" - } - }, - { - portrValue: "宿州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "341300" - } - }, - { - portrValue: "滁州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341100" - } - }, - { - portrValue: "六安", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341500" - } - }, - { - portrValue: "淮南", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340400" - } - }, - { - portrValue: "淮北", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340600" - } - }, - { - portrValue: "蚌埠", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "340300" - } - }, - { - portrValue: "铜陵", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "340700" - } - }, - { - portrValue: "亳州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "341600" - } - }, - { - portrValue: "安庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "340800" - } - }, - { - portrValue: "宣城", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "341800" - } - }, - { - portrValue: "马鞍山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "340500" - } - }, - { - portrValue: "池州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "341700" - } - } - ] - }, - { - portrValue: "福建", - num: 83, - percentage: 0.027510772290354656, - extInfo: { - areaCode: "350000" - }, - subList: [ - { - portrValue: "厦门", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "350200" - } - }, - { - portrValue: "泉州", - num: 17, - percentage: 0.005634736493205171, - extInfo: { - areaCode: "350500" - } - }, - { - portrValue: "福州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "350100" - } - }, - { - portrValue: "漳州", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "350600" - } - }, - { - portrValue: "南平", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "350700" - } - }, - { - portrValue: "宁德", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "350900" - } - }, - { - portrValue: "莆田", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "350300" - } - }, - { - portrValue: "三明", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350400" - } - }, - { - portrValue: "龙岩", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350800" - } - } - ] - }, - { - portrValue: "河北", - num: 73, - percentage: 0.024196221411998675, - extInfo: { - areaCode: "130000" - }, - subList: [ - { - portrValue: "石家庄", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "130100" - } - }, - { - portrValue: "邯郸", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "130400" - } - }, - { - portrValue: "唐山", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "130200" - } - }, - { - portrValue: "保定", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "130600" - } - }, - { - portrValue: "廊坊", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "131000" - } - }, - { - portrValue: "沧州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "130900" - } - }, - { - portrValue: "邢台", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "130500" - } - }, - { - portrValue: "秦皇岛", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "130300" - } - }, - { - portrValue: "张家口", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130700" - } - }, - { - portrValue: "承德", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130800" - } - }, - { - portrValue: "衡水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "131100" - } - } - ] - }, - { - portrValue: "山西", - num: 68, - percentage: 0.022538945972820683, - extInfo: { - areaCode: "140000" - }, - subList: [ - { - portrValue: "太原", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "140100" - } - }, - { - portrValue: "临汾", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "141000" - } - }, - { - portrValue: "运城", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "140800" - } - }, - { - portrValue: "晋中", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "140700" - } - }, - { - portrValue: "长治", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140400" - } - }, - { - portrValue: "朔州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140600" - } - }, - { - portrValue: "大同", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "140200" - } - }, - { - portrValue: "晋城", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "140500" - } - }, - { - portrValue: "阳泉", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "140300" - } - }, - { - portrValue: "吕梁", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "141100" - } - } - ] - }, - { - portrValue: "湖南", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "430000" - }, - subList: [ - { - portrValue: "长沙", - num: 26, - percentage: 0.008617832283725556, - extInfo: { - areaCode: "430100" - } - }, - { - portrValue: "衡阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "430400" - } - }, - { - portrValue: "郴州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "431000" - } - }, - { - portrValue: "邵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430500" - } - }, - { - portrValue: "岳阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430600" - } - }, - { - portrValue: "株洲", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430200" - } - }, - { - portrValue: "常德", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430700" - } - }, - { - portrValue: "益阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430900" - } - }, - { - portrValue: "永州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "431100" - } - }, - { - portrValue: "湘潭", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430300" - } - }, - { - portrValue: "张家界", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430800" - } - }, - { - portrValue: "怀化", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "431200" - } - }, - { - portrValue: "湘西", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "433100" - } - }, - { - portrValue: "娄底", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "431300" - } - } - ] - }, - { - portrValue: "陕西", - num: 66, - percentage: 0.021876035797149487, - extInfo: { - areaCode: "610000" - }, - subList: [ - { - portrValue: "西安", - num: 32, - percentage: 0.010606562810739144, - extInfo: { - areaCode: "610100" - } - }, - { - portrValue: "榆林", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "610800" - } - }, - { - portrValue: "咸阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610400" - } - }, - { - portrValue: "渭南", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610500" - } - }, - { - portrValue: "汉中", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610700" - } - }, - { - portrValue: "安康", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610900" - } - }, - { - portrValue: "铜川", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "610200" - } - }, - { - portrValue: "宝鸡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610300" - } - }, - { - portrValue: "延安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610600" - } - }, - { - portrValue: "商洛", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "611000" - } - } - ] - }, - { - portrValue: "广西", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "450000" - }, - subList: [ - { - portrValue: "南宁", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "450100" - } - }, - { - portrValue: "柳州", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450200" - } - }, - { - portrValue: "桂林", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450300" - } - }, - { - portrValue: "玉林", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "450900" - } - }, - { - portrValue: "贵港", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "450800" - } - }, - { - portrValue: "梧州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "450400" - } - }, - { - portrValue: "北海", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "450500" - } - }, - { - portrValue: "钦州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "450700" - } - }, - { - portrValue: "来宾", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "451300" - } - }, - { - portrValue: "百色", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451000" - } - }, - { - portrValue: "贺州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451100" - } - }, - { - portrValue: "河池", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451200" - } - }, - { - portrValue: "崇左", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451400" - } - } - ] - }, - { - portrValue: "江西", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "360000" - }, - subList: [ - { - portrValue: "南昌", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "360100" - } - }, - { - portrValue: "赣州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "360700" - } - }, - { - portrValue: "九江", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "360400" - } - }, - { - portrValue: "上饶", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "361100" - } - }, - { - portrValue: "吉安", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "360800" - } - }, - { - portrValue: "宜春", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "360900" - } - }, - { - portrValue: "萍乡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "360300" - } - }, - { - portrValue: "景德镇", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360200" - } - }, - { - portrValue: "新余", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360500" - } - } - ] - }, - { - portrValue: "辽宁", - num: 44, - percentage: 0.014584023864766324, - extInfo: { - areaCode: "210000" - }, - subList: [ - { - portrValue: "沈阳", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "210100" - } - }, - { - portrValue: "大连", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "210200" - } - }, - { - portrValue: "营口", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "210800" - } - }, - { - portrValue: "鞍山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "210300" - } - }, - { - portrValue: "阜新", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "210900" - } - }, - { - portrValue: "朝阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "211300" - } - }, - { - portrValue: "丹东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "210600" - } - }, - { - portrValue: "辽阳", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "211000" - } - }, - { - portrValue: "抚顺", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210400" - } - }, - { - portrValue: "锦州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210700" - } - }, - { - portrValue: "铁岭", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "211200" - } - } - ] - }, - { - portrValue: "云南", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "530000" - }, - subList: [ - { - portrValue: "昆明", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "530100" - } - }, - { - portrValue: "曲靖", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "530300" - } - }, - { - portrValue: "文山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "532600" - } - }, - { - portrValue: "昭通", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "530600" - } - }, - { - portrValue: "普洱", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530800" - } - }, - { - portrValue: "临沧", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530900" - } - }, - { - portrValue: "楚雄", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532300" - } - }, - { - portrValue: "红河", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532500" - } - } - ] - }, - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120000" - }, - subList: [ - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120100" - } - } - ] - }, - { - portrValue: "重庆", - num: 30, - percentage: 0.009943652635067949, - extInfo: { - areaCode: "500000" - }, - subList: [ - { - portrValue: "重庆", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "500100" - } - }, - { - portrValue: "重庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "500200" - } - } - ] - }, - { - portrValue: "贵州", - num: 24, - percentage: 0.007954922108054359, - extInfo: { - areaCode: "520000" - }, - subList: [ - { - portrValue: "贵阳", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "520100" - } - }, - { - portrValue: "遵义", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "520300" - } - }, - { - portrValue: "黔东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "522600" - } - }, - { - portrValue: "六盘水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520200" - } - }, - { - portrValue: "毕节", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520500" - } - }, - { - portrValue: "铜仁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520600" - } - }, - { - portrValue: "黔南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "522700" - } - } - ] - }, - { - portrValue: "黑龙江", - num: 21, - percentage: 0.0069605568445475635, - extInfo: { - areaCode: "230000" - }, - subList: [ - { - portrValue: "哈尔滨", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "230100" - } - }, - { - portrValue: "绥化", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "231200" - } - }, - { - portrValue: "大庆", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230600" - } - }, - { - portrValue: "佳木斯", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230800" - } - }, - { - portrValue: "双鸭山", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "230500" - } - }, - { - portrValue: "鸡西", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "230300" - } - } - ] - }, - { - portrValue: "新疆", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "650000" - }, - subList: [ - { - portrValue: "乌鲁木齐", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "650100" - } - }, - { - portrValue: "阿克苏地区", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "652900" - } - }, - { - portrValue: "克拉玛依", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "650200" - } - }, - { - portrValue: "克孜勒苏柯尔克孜", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653000" - } - }, - { - portrValue: "喀什地区", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653100" - } - }, - { - portrValue: "伊犁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "654000" - } - }, - { - portrValue: "北屯", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "659005" - } - } - ] - }, - { - portrValue: "甘肃", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "620000" - }, - subList: [ - { - portrValue: "兰州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "620100" - } - }, - { - portrValue: "陇南", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "621200" - } - }, - { - portrValue: "天水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620500" - } - }, - { - portrValue: "武威", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620600" - } - }, - { - portrValue: "平凉", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620800" - } - } - ] - }, - { - portrValue: "海南", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "460000" - }, - subList: [ - { - portrValue: "海口", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "460100" - } - }, - { - portrValue: "三亚", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "460200" - } - }, - { - portrValue: "儋州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "460400" - } - }, - { - portrValue: "昌江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469026" - } - }, - { - portrValue: "陵水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469028" - } - } - ] - }, - { - portrValue: "吉林", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "220000" - }, - subList: [ - { - portrValue: "长春", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "220100" - } - }, - { - portrValue: "吉林", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "220200" - } - }, - { - portrValue: "四平", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220300" - } - }, - { - portrValue: "松原", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220700" - } - } - ] - }, - { - portrValue: "内蒙古", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "150000" - }, - subList: [ - { - portrValue: "包头", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150200" - } - }, - { - portrValue: "呼伦贝尔", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150700" - } - }, - { - portrValue: "呼和浩特", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150100" - } - }, - { - portrValue: "赤峰", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150400" - } - }, - { - portrValue: "通辽", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150500" - } - }, - { - portrValue: "巴彦淖尔", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150800" - } - } - ] - }, - { - portrValue: "青海", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "630000" - }, - subList: [ - { - portrValue: "海西", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "632800" - } - }, - { - portrValue: "西宁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "630100" - } - }, - { - portrValue: "海南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "632500" - } - } - ] - }, - { - portrValue: "宁夏", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640000" - }, - subList: [ - { - portrValue: "银川", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640100" - } - } - ] - }, - { - portrValue: "台湾", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "710000" - }, - subList: [] - }, - { - portrValue: "澳门", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "820000" - }, - subList: [] - }, - { - portrValue: "香港", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "810000" - }, - subList: [] - }, - { - portrValue: "西藏", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "540000" - }, - subList: [] - } - ] -}; -export default () => { - useEffect( () => { - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - pitch: 0, - style: "blank", - center: [116.368652, 39.93866], - zoom: 10.07 - }) - }); - scene.on("loaded", () => { - fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用 - "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json" - ) - .then((res) => res.json()) - .then((data) => { - data.features.forEach((i) => { - i.properties.adcode = String(i.properties.adcode); - const item = list.dataList.find( - (item) => item.extInfo.areaCode === i.properties.adcode - ); - // 把num塞到data里 - i.properties.num = item?.num || 0; - }); - const chinaPolygonLayer = new PolygonLayer({ - autoFit: true, - zIndex: 10 - }) - .source(data) - // .color( - // 'name', - // [ - // 'rgb(239,243,255)', - // 'rgb(189,215,231)', - // 'rgb(107,174,214)', - // 'rgb(49,130,189)', - // 'rgb(8,81,156)' - // ] - // ) - .scale('num',{ - type:'quantile' - }) - .color("num", ["#E8F1FF", "#A8BDEC", "#688DE4", "#3461CA", "#23396E"]) - .shape("fill") - .select({ - color: "#FFDFB1" - }) - .select(false) - .style({ - opacity: 1 - }); - - // 默认高亮选中北京 - chinaPolygonLayer.on("add", () => { - setTimeout(() => { - chinaPolygonLayer.setSelect("0"); - }, 1000); - }); - // 点击省份添加高亮效果 - chinaPolygonLayer.on("click", (result) => { - console.log("result", result); - const adcode = result.feature.properties.adcode; - const source = chinaPolygonLayer.getSource(); - const featureId = source.getFeatureId("adcode", adcode); - chinaPolygonLayer.setSelect(featureId); - }); - // 图层边界 - const layer2 = new LineLayer({ - zIndex: 2 - }) - .source(data) - .color("rgb(93,112,146)") - .size(0.6) - .style({ - opacity: 1 - }); - - scene.addLayer(chinaPolygonLayer); - scene.addLayer(layer2); - setTimeout(()=>{ - chinaPolygonLayer.scale('num',{ - type:'quantize' - }) - // chinaPolygonLayer.color('num',['#ffffb2','#fed976','#feb24c','#fd8d3c','#f03b20','#bd0026']) - scene.render() - console.log('render') - },3000) - }); - fetch( - "https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json" // 标注数据 - ) - .then((res) => res.json()) - .then((data) => { - const labelLayer = new PointLayer({ - zIndex: 5 - }) - .source(data, { - parser: { - type: "json", - coordinates: "center" - } - }) - .color("#f00") - .shape("name", "text") - .size(12) - .style({ - opacity: 1, - stroke: "#fff", - strokeWidth: 1, - textAllowOverlap: false - }); - - scene.addLayer(labelLayer); - }); - }); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/polygon_active.tsx b/legacy/dev-demos/src/bugs/polygon/demos/polygon_active.tsx deleted file mode 100644 index c107fe5ed62..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/polygon_active.tsx +++ /dev/null @@ -1,2588 +0,0 @@ -import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; -import { GaodeMap } from "@antv/l7-maps"; -import React, { useEffect } from 'react'; -const list = { - portrKey: "PROVINCE_CITY_DITU", - portrName: "预测常住城市", - portrDesc: "预测用户省市分布，排除未知", - coverage: 0.8288461538461539, - reportDate: "20221127", - dataList: [ - { - portrValue: "浙江", - num: 830, - percentage: 0.27510772290354657, - extInfo: { - areaCode: "330000" - }, - subList: [ - { - portrValue: "杭州", - num: 553, - percentage: 0.18329466357308585, - extInfo: { - areaCode: "330100" - } - }, - { - portrValue: "宁波", - num: 56, - percentage: 0.018561484918793503, - extInfo: { - areaCode: "330200" - } - }, - { - portrValue: "温州", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "330300" - } - }, - { - portrValue: "绍兴", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "330600" - } - }, - { - portrValue: "金华", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "330700" - } - }, - { - portrValue: "嘉兴", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330400" - } - }, - { - portrValue: "湖州", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330500" - } - }, - { - portrValue: "台州", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "331000" - } - }, - { - portrValue: "衢州", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "330800" - } - }, - { - portrValue: "丽水", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "331100" - } - }, - { - portrValue: "舟山", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "330900" - } - } - ] - }, - { - portrValue: "广东", - num: 338, - percentage: 0.11203181968843222, - extInfo: { - areaCode: "440000" - }, - subList: [ - { - portrValue: "深圳", - num: 97, - percentage: 0.032151143520053035, - extInfo: { - areaCode: "440300" - } - }, - { - portrValue: "广州", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "440100" - } - }, - { - portrValue: "东莞", - num: 42, - percentage: 0.013921113689095127, - extInfo: { - areaCode: "441900" - } - }, - { - portrValue: "佛山", - num: 27, - percentage: 0.008949287371561154, - extInfo: { - areaCode: "440600" - } - }, - { - portrValue: "惠州", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "441300" - } - }, - { - portrValue: "汕头", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "440500" - } - }, - { - portrValue: "揭阳", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "445200" - } - }, - { - portrValue: "中山", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "442000" - } - }, - { - portrValue: "珠海", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "440400" - } - }, - { - portrValue: "江门", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440700" - } - }, - { - portrValue: "茂名", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440900" - } - }, - { - portrValue: "河源", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "441600" - } - }, - { - portrValue: "梅州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "441400" - } - }, - { - portrValue: "湛江", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "440800" - } - }, - { - portrValue: "清远", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "441800" - } - }, - { - portrValue: "韶关", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "440200" - } - }, - { - portrValue: "汕尾", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "441500" - } - }, - { - portrValue: "云浮", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "445300" - } - }, - { - portrValue: "潮州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "445100" - } - }, - { - portrValue: "肇庆", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441200" - } - }, - { - portrValue: "阳江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441700" - } - } - ] - }, - { - portrValue: "江苏", - num: 202, - percentage: 0.06695392774279085, - extInfo: { - areaCode: "320000" - }, - subList: [ - { - portrValue: "苏州", - num: 52, - percentage: 0.01723566456745111, - extInfo: { - areaCode: "320500" - } - }, - { - portrValue: "南京", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "320100" - } - }, - { - portrValue: "无锡", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "320200" - } - }, - { - portrValue: "南通", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "320600" - } - }, - { - portrValue: "常州", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "320400" - } - }, - { - portrValue: "徐州", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "320300" - } - }, - { - portrValue: "盐城", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "320900" - } - }, - { - portrValue: "镇江", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "321100" - } - }, - { - portrValue: "宿迁", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "321300" - } - }, - { - portrValue: "淮安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "320800" - } - }, - { - portrValue: "扬州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "321000" - } - }, - { - portrValue: "连云港", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "320700" - } - }, - { - portrValue: "泰州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "321200" - } - } - ] - }, - { - portrValue: "河南", - num: 190, - percentage: 0.06297646668876367, - extInfo: { - areaCode: "410000" - }, - subList: [ - { - portrValue: "郑州", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "410100" - } - }, - { - portrValue: "南阳", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "411300" - } - }, - { - portrValue: "焦作", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "410800" - } - }, - { - portrValue: "许昌", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411000" - } - }, - { - portrValue: "周口", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411600" - } - }, - { - portrValue: "洛阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "410300" - } - }, - { - portrValue: "驻马店", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "411700" - } - }, - { - portrValue: "平顶山", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410400" - } - }, - { - portrValue: "新乡", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410700" - } - }, - { - portrValue: "濮阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "410900" - } - }, - { - portrValue: "信阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "411500" - } - }, - { - portrValue: "开封", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "410200" - } - }, - { - portrValue: "商丘", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "411400" - } - }, - { - portrValue: "安阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "410500" - } - }, - { - portrValue: "三门峡", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "411200" - } - }, - { - portrValue: "漯河", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "411100" - } - }, - { - portrValue: "鹤壁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "410600" - } - }, - { - portrValue: "济源", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "419000" - } - } - ] - }, - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110000" - }, - subList: [ - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110100" - } - } - ] - }, - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310000" - }, - subList: [ - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310100" - } - } - ] - }, - { - portrValue: "山东", - num: 119, - percentage: 0.03944315545243619, - extInfo: { - areaCode: "370000" - }, - subList: [ - { - portrValue: "济南", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "370100" - } - }, - { - portrValue: "青岛", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "370200" - } - }, - { - portrValue: "潍坊", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "370700" - } - }, - { - portrValue: "日照", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "371100" - } - }, - { - portrValue: "烟台", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370600" - } - }, - { - portrValue: "济宁", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370800" - } - }, - { - portrValue: "枣庄", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "370400" - } - }, - { - portrValue: "德州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "371400" - } - }, - { - portrValue: "泰安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "370900" - } - }, - { - portrValue: "滨州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "371600" - } - }, - { - portrValue: "淄博", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "370300" - } - }, - { - portrValue: "临沂", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371300" - } - }, - { - portrValue: "聊城", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371500" - } - }, - { - portrValue: "东营", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "370500" - } - }, - { - portrValue: "菏泽", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "371700" - } - }, - { - portrValue: "威海", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "371000" - } - } - ] - }, - { - portrValue: "四川", - num: 113, - percentage: 0.03745442492542261, - extInfo: { - areaCode: "510000" - }, - subList: [ - { - portrValue: "成都", - num: 81, - percentage: 0.02684786211468346, - extInfo: { - areaCode: "510100" - } - }, - { - portrValue: "绵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510700" - } - }, - { - portrValue: "遂宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510900" - } - }, - { - portrValue: "南充", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "511300" - } - }, - { - portrValue: "自贡", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510300" - } - }, - { - portrValue: "德阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510600" - } - }, - { - portrValue: "广元", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "510800" - } - }, - { - portrValue: "内江", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511000" - } - }, - { - portrValue: "广安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511600" - } - }, - { - portrValue: "攀枝花", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "510400" - } - }, - { - portrValue: "宜宾", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511500" - } - }, - { - portrValue: "达州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511700" - } - }, - { - portrValue: "雅安", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511800" - } - }, - { - portrValue: "巴中", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511900" - } - }, - { - portrValue: "资阳", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "512000" - } - }, - { - portrValue: "阿坝", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513200" - } - }, - { - portrValue: "凉山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513400" - } - } - ] - }, - { - portrValue: "湖北", - num: 98, - percentage: 0.03248259860788863, - extInfo: { - areaCode: "420000" - }, - subList: [ - { - portrValue: "武汉", - num: 49, - percentage: 0.016241299303944315, - extInfo: { - areaCode: "420100" - } - }, - { - portrValue: "襄阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "420600" - } - }, - { - portrValue: "孝感", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "420900" - } - }, - { - portrValue: "黄石", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "420200" - } - }, - { - portrValue: "荆州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "421000" - } - }, - { - portrValue: "荆门", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "420800" - } - }, - { - portrValue: "鄂州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "420700" - } - }, - { - portrValue: "咸宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "421200" - } - }, - { - portrValue: "黄冈", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "421100" - } - }, - { - portrValue: "天门", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "429006" - } - }, - { - portrValue: "宜昌", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "420500" - } - }, - { - portrValue: "随州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "421300" - } - }, - { - portrValue: "恩施", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "422800" - } - } - ] - }, - { - portrValue: "安徽", - num: 93, - percentage: 0.03082532316871064, - extInfo: { - areaCode: "340000" - }, - subList: [ - { - portrValue: "合肥", - num: 31, - percentage: 0.010275107722903546, - extInfo: { - areaCode: "340100" - } - }, - { - portrValue: "阜阳", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "341200" - } - }, - { - portrValue: "芜湖", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "340200" - } - }, - { - portrValue: "宿州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "341300" - } - }, - { - portrValue: "滁州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341100" - } - }, - { - portrValue: "六安", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341500" - } - }, - { - portrValue: "淮南", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340400" - } - }, - { - portrValue: "淮北", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340600" - } - }, - { - portrValue: "蚌埠", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "340300" - } - }, - { - portrValue: "铜陵", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "340700" - } - }, - { - portrValue: "亳州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "341600" - } - }, - { - portrValue: "安庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "340800" - } - }, - { - portrValue: "宣城", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "341800" - } - }, - { - portrValue: "马鞍山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "340500" - } - }, - { - portrValue: "池州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "341700" - } - } - ] - }, - { - portrValue: "福建", - num: 83, - percentage: 0.027510772290354656, - extInfo: { - areaCode: "350000" - }, - subList: [ - { - portrValue: "厦门", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "350200" - } - }, - { - portrValue: "泉州", - num: 17, - percentage: 0.005634736493205171, - extInfo: { - areaCode: "350500" - } - }, - { - portrValue: "福州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "350100" - } - }, - { - portrValue: "漳州", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "350600" - } - }, - { - portrValue: "南平", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "350700" - } - }, - { - portrValue: "宁德", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "350900" - } - }, - { - portrValue: "莆田", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "350300" - } - }, - { - portrValue: "三明", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350400" - } - }, - { - portrValue: "龙岩", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350800" - } - } - ] - }, - { - portrValue: "河北", - num: 73, - percentage: 0.024196221411998675, - extInfo: { - areaCode: "130000" - }, - subList: [ - { - portrValue: "石家庄", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "130100" - } - }, - { - portrValue: "邯郸", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "130400" - } - }, - { - portrValue: "唐山", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "130200" - } - }, - { - portrValue: "保定", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "130600" - } - }, - { - portrValue: "廊坊", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "131000" - } - }, - { - portrValue: "沧州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "130900" - } - }, - { - portrValue: "邢台", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "130500" - } - }, - { - portrValue: "秦皇岛", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "130300" - } - }, - { - portrValue: "张家口", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130700" - } - }, - { - portrValue: "承德", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130800" - } - }, - { - portrValue: "衡水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "131100" - } - } - ] - }, - { - portrValue: "山西", - num: 68, - percentage: 0.022538945972820683, - extInfo: { - areaCode: "140000" - }, - subList: [ - { - portrValue: "太原", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "140100" - } - }, - { - portrValue: "临汾", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "141000" - } - }, - { - portrValue: "运城", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "140800" - } - }, - { - portrValue: "晋中", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "140700" - } - }, - { - portrValue: "长治", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140400" - } - }, - { - portrValue: "朔州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140600" - } - }, - { - portrValue: "大同", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "140200" - } - }, - { - portrValue: "晋城", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "140500" - } - }, - { - portrValue: "阳泉", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "140300" - } - }, - { - portrValue: "吕梁", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "141100" - } - } - ] - }, - { - portrValue: "湖南", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "430000" - }, - subList: [ - { - portrValue: "长沙", - num: 26, - percentage: 0.008617832283725556, - extInfo: { - areaCode: "430100" - } - }, - { - portrValue: "衡阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "430400" - } - }, - { - portrValue: "郴州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "431000" - } - }, - { - portrValue: "邵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430500" - } - }, - { - portrValue: "岳阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430600" - } - }, - { - portrValue: "株洲", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430200" - } - }, - { - portrValue: "常德", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430700" - } - }, - { - portrValue: "益阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430900" - } - }, - { - portrValue: "永州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "431100" - } - }, - { - portrValue: "湘潭", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430300" - } - }, - { - portrValue: "张家界", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430800" - } - }, - { - portrValue: "怀化", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "431200" - } - }, - { - portrValue: "湘西", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "433100" - } - }, - { - portrValue: "娄底", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "431300" - } - } - ] - }, - { - portrValue: "陕西", - num: 66, - percentage: 0.021876035797149487, - extInfo: { - areaCode: "610000" - }, - subList: [ - { - portrValue: "西安", - num: 32, - percentage: 0.010606562810739144, - extInfo: { - areaCode: "610100" - } - }, - { - portrValue: "榆林", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "610800" - } - }, - { - portrValue: "咸阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610400" - } - }, - { - portrValue: "渭南", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610500" - } - }, - { - portrValue: "汉中", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610700" - } - }, - { - portrValue: "安康", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610900" - } - }, - { - portrValue: "铜川", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "610200" - } - }, - { - portrValue: "宝鸡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610300" - } - }, - { - portrValue: "延安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610600" - } - }, - { - portrValue: "商洛", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "611000" - } - } - ] - }, - { - portrValue: "广西", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "450000" - }, - subList: [ - { - portrValue: "南宁", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "450100" - } - }, - { - portrValue: "柳州", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450200" - } - }, - { - portrValue: "桂林", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450300" - } - }, - { - portrValue: "玉林", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "450900" - } - }, - { - portrValue: "贵港", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "450800" - } - }, - { - portrValue: "梧州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "450400" - } - }, - { - portrValue: "北海", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "450500" - } - }, - { - portrValue: "钦州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "450700" - } - }, - { - portrValue: "来宾", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "451300" - } - }, - { - portrValue: "百色", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451000" - } - }, - { - portrValue: "贺州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451100" - } - }, - { - portrValue: "河池", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451200" - } - }, - { - portrValue: "崇左", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451400" - } - } - ] - }, - { - portrValue: "江西", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "360000" - }, - subList: [ - { - portrValue: "南昌", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "360100" - } - }, - { - portrValue: "赣州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "360700" - } - }, - { - portrValue: "九江", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "360400" - } - }, - { - portrValue: "上饶", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "361100" - } - }, - { - portrValue: "吉安", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "360800" - } - }, - { - portrValue: "宜春", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "360900" - } - }, - { - portrValue: "萍乡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "360300" - } - }, - { - portrValue: "景德镇", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360200" - } - }, - { - portrValue: "新余", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360500" - } - } - ] - }, - { - portrValue: "辽宁", - num: 44, - percentage: 0.014584023864766324, - extInfo: { - areaCode: "210000" - }, - subList: [ - { - portrValue: "沈阳", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "210100" - } - }, - { - portrValue: "大连", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "210200" - } - }, - { - portrValue: "营口", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "210800" - } - }, - { - portrValue: "鞍山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "210300" - } - }, - { - portrValue: "阜新", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "210900" - } - }, - { - portrValue: "朝阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "211300" - } - }, - { - portrValue: "丹东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "210600" - } - }, - { - portrValue: "辽阳", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "211000" - } - }, - { - portrValue: "抚顺", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210400" - } - }, - { - portrValue: "锦州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210700" - } - }, - { - portrValue: "铁岭", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "211200" - } - } - ] - }, - { - portrValue: "云南", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "530000" - }, - subList: [ - { - portrValue: "昆明", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "530100" - } - }, - { - portrValue: "曲靖", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "530300" - } - }, - { - portrValue: "文山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "532600" - } - }, - { - portrValue: "昭通", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "530600" - } - }, - { - portrValue: "普洱", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530800" - } - }, - { - portrValue: "临沧", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530900" - } - }, - { - portrValue: "楚雄", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532300" - } - }, - { - portrValue: "红河", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532500" - } - } - ] - }, - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120000" - }, - subList: [ - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120100" - } - } - ] - }, - { - portrValue: "重庆", - num: 30, - percentage: 0.009943652635067949, - extInfo: { - areaCode: "500000" - }, - subList: [ - { - portrValue: "重庆", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "500100" - } - }, - { - portrValue: "重庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "500200" - } - } - ] - }, - { - portrValue: "贵州", - num: 24, - percentage: 0.007954922108054359, - extInfo: { - areaCode: "520000" - }, - subList: [ - { - portrValue: "贵阳", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "520100" - } - }, - { - portrValue: "遵义", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "520300" - } - }, - { - portrValue: "黔东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "522600" - } - }, - { - portrValue: "六盘水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520200" - } - }, - { - portrValue: "毕节", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520500" - } - }, - { - portrValue: "铜仁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520600" - } - }, - { - portrValue: "黔南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "522700" - } - } - ] - }, - { - portrValue: "黑龙江", - num: 21, - percentage: 0.0069605568445475635, - extInfo: { - areaCode: "230000" - }, - subList: [ - { - portrValue: "哈尔滨", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "230100" - } - }, - { - portrValue: "绥化", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "231200" - } - }, - { - portrValue: "大庆", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230600" - } - }, - { - portrValue: "佳木斯", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230800" - } - }, - { - portrValue: "双鸭山", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "230500" - } - }, - { - portrValue: "鸡西", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "230300" - } - } - ] - }, - { - portrValue: "新疆", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "650000" - }, - subList: [ - { - portrValue: "乌鲁木齐", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "650100" - } - }, - { - portrValue: "阿克苏地区", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "652900" - } - }, - { - portrValue: "克拉玛依", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "650200" - } - }, - { - portrValue: "克孜勒苏柯尔克孜", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653000" - } - }, - { - portrValue: "喀什地区", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653100" - } - }, - { - portrValue: "伊犁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "654000" - } - }, - { - portrValue: "北屯", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "659005" - } - } - ] - }, - { - portrValue: "甘肃", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "620000" - }, - subList: [ - { - portrValue: "兰州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "620100" - } - }, - { - portrValue: "陇南", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "621200" - } - }, - { - portrValue: "天水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620500" - } - }, - { - portrValue: "武威", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620600" - } - }, - { - portrValue: "平凉", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620800" - } - } - ] - }, - { - portrValue: "海南", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "460000" - }, - subList: [ - { - portrValue: "海口", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "460100" - } - }, - { - portrValue: "三亚", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "460200" - } - }, - { - portrValue: "儋州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "460400" - } - }, - { - portrValue: "昌江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469026" - } - }, - { - portrValue: "陵水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469028" - } - } - ] - }, - { - portrValue: "吉林", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "220000" - }, - subList: [ - { - portrValue: "长春", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "220100" - } - }, - { - portrValue: "吉林", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "220200" - } - }, - { - portrValue: "四平", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220300" - } - }, - { - portrValue: "松原", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220700" - } - } - ] - }, - { - portrValue: "内蒙古", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "150000" - }, - subList: [ - { - portrValue: "包头", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150200" - } - }, - { - portrValue: "呼伦贝尔", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150700" - } - }, - { - portrValue: "呼和浩特", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150100" - } - }, - { - portrValue: "赤峰", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150400" - } - }, - { - portrValue: "通辽", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150500" - } - }, - { - portrValue: "巴彦淖尔", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150800" - } - } - ] - }, - { - portrValue: "青海", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "630000" - }, - subList: [ - { - portrValue: "海西", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "632800" - } - }, - { - portrValue: "西宁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "630100" - } - }, - { - portrValue: "海南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "632500" - } - } - ] - }, - { - portrValue: "宁夏", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640000" - }, - subList: [ - { - portrValue: "银川", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640100" - } - } - ] - }, - { - portrValue: "台湾", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "710000" - }, - subList: [] - }, - { - portrValue: "澳门", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "820000" - }, - subList: [] - }, - { - portrValue: "香港", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "810000" - }, - subList: [] - }, - { - portrValue: "西藏", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "540000" - }, - subList: [] - } - ] -}; -export default () => { - useEffect( () => { - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - pitch: 0, - style: "blank", - center: [116.368652, 39.93866], - zoom: 10.07 - }) - }); - scene.on("loaded", () => { - fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用 - "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json" - ) - .then((res) => res.json()) - .then((data) => { - data.features.forEach((i) => { - i.properties.adcode = String(i.properties.adcode); - const item = list.dataList.find( - (item) => item.extInfo.areaCode === i.properties.adcode - ); - // 把num塞到data里 - i.properties.num = item?.num || 0; - }); - const chinaPolygonLayer = new PolygonLayer({ - autoFit: true - }) - .source(data) - // .color( - // 'name', - // [ - // 'rgb(239,243,255)', - // 'rgb(189,215,231)', - // 'rgb(107,174,214)', - // 'rgb(49,130,189)', - // 'rgb(8,81,156)' - // ] - // ) - .scale('num',{ - type:'quantile' - }) - .color("num", ["#E8F1FF", "#A8BDEC", "#688DE4", "#3461CA", "#23396E"]) - .shape("fill") - .select({ - color: "#FFDFB1" - }) - .active({ - color: "red" - }) - // .select(false) - .active(false) - .style({ - opacity: 1 - }); - - // 默认高亮选中北京 - chinaPolygonLayer.on("add", () => { - setTimeout(() => { - chinaPolygonLayer.setSelect("0"); - }, 1000); - }); - // 点击省份添加高亮效果 - chinaPolygonLayer.on("click", (result) => { - const adcode = result.feature.properties.adcode; - const source = chinaPolygonLayer.getSource(); - const featureId = source.getFeatureId("adcode", adcode); - chinaPolygonLayer.setSelect(featureId); - }); - - chinaPolygonLayer.on("mousemove", (result) => { - const adcode = result.feature.properties.adcode; - const source = chinaPolygonLayer.getSource(); - const featureId = source.getFeatureId("adcode", adcode); - chinaPolygonLayer.setActive(featureId); - }); - - scene.addLayer(chinaPolygonLayer); - }); - }); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/polygonzindex.tsx b/legacy/dev-demos/src/bugs/polygon/demos/polygonzindex.tsx deleted file mode 100644 index c12117bd8c7..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/polygonzindex.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf - -// @ts-ignore -import { PolygonLayer, Scene,LineLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap,Map } from '@antv/l7-maps'; -import { RDBSource } from "district-data"; -import React, { useEffect } from 'react'; - - -export default () => { - // @ts-ignore - useEffect( async () => { - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - center: [107.77791556935472, 35.443286920228644], - zoom: 2.9142882493605033 - }) - }); - scene.on("loaded", async() => { - const source = new RDBSource({}); - const data = await ( await fetch( - "https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json" - )).json() - - - - const provincedata = await source.getData({ level: "province" }) - console.log(provincedata) - const fill = new PolygonLayer({ - zIndex: 50, - name: "面图层", - }) - .source({type: "FeatureCollection",features:provincedata.features}) - .shape("fill") - // .color("#4575b4") - .color("name", ['#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4']) - .active(false); - - const lineLayerRef = new LineLayer({ - name: "线条图层", - zIndex: 100, - blend: "normal" - }) - .source(data, { - parser: { - type: "json", - x: "from_lon", - y: "from_lat", - x1: "to_lon", - y1: "to_lat" - } - }) - .size(4) - .shape("greatcircle") - .color("#d73027"); - scene.addLayer(fill); - scene.addLayer(lineLayerRef); - - }); - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/demos/quantile.tsx b/legacy/dev-demos/src/bugs/polygon/demos/quantile.tsx deleted file mode 100644 index 3b0cde28daf..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/quantile.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// - -// @ts-ignore -import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map,Mapbox, GaodeMapV1 } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'light', - center: [ -96, 37.8 ], - zoom: 3 - }) - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json' - ) - .then(res => res.json()) - .then(data => { - const color = ['red', 'blue']; - const layer = new PolygonLayer({}) - .source(data) - .scale('density', { - type: 'quantile' - }) - .color( - 'density', color - ) - .shape('fill') - .active(true); - const layer2 = new LineLayer({ - zIndex: 2 - }) - .source(data) - .color('#fff') - .active(true) - .size(1) - .style({ - lineType: 'dash', - dashArray: [ 2, 2 ], - }); - scene.addLayer(layer); - scene.addLayer(layer2); - - layer.on('mousemove', e => { - const popup = new Popup({ - offsets: [ 0, 0 ], - closeButton: false - }) - .setLnglat(e.lngLat) - .setHTML(`${e.feature.properties.name}: ${e.feature.properties.density}`); - scene.addPopup(popup); - }); - }); - }); - - - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/polygon/demos/scale.tsx b/legacy/dev-demos/src/bugs/polygon/demos/scale.tsx deleted file mode 100644 index 96e258e1b64..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/scale.tsx +++ /dev/null @@ -1,299 +0,0 @@ -// - -// @ts-ignore -import { PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map,Mapbox, GaodeMapV1 } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -const data = { - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [ - -180, - -90 - ], - [ - -180, - 90 - ], - [ - 180, - 90 - ], - [ - 180, - -90 - ], - [ - -180, - -90 - ] - ], - [ - [ - 105.5815853942313, - 29.71236446366261 - ], - [ - 105.58430314673814, - 29.711392515200814 - ], - [ - 105.58472461637894, - 29.711203173496614 - ], - [ - 105.58469554950659, - 29.710837111855113 - ], - [ - 105.5845356817128, - 29.710332197057085 - ], - [ - 105.58449208140422, - 29.709978755188033 - ], - [ - 105.58444848109718, - 29.70967580402356 - ], - [ - 105.58447754796947, - 29.709309736814248 - ], - [ - 105.58452114827668, - 29.70893104519307 - ], - [ - 105.58478275012226, - 29.70870382953494 - ], - [ - 105.58521875319786, - 29.707996933088538 - ], - [ - 105.58549488847967, - 29.707757092091867 - ], - [ - 105.58526234713759, - 29.70748948515464 - ], - [ - 105.5850298121643, - 29.707300136090566 - ], - [ - 105.58475367688249, - 29.707060293429635 - ], - [ - 105.58401247165273, - 29.70695930687515 - ], - [ - 105.58340206734715, - 29.706833073538547 - ], - [ - 105.58309686519294, - 29.70664372323681 - ], - [ - 105.58305326488585, - 29.70649224273795 - ], - [ - 105.58266086211734, - 29.706277644973994 - ], - [ - 105.58237019339936, - 29.706100917059004 - ], - [ - 105.581745254169, - 29.705633849344423 - ], - [ - 105.58116391673298, - 29.7053435086015 - ], - [ - 105.58052444555511, - 29.7053435086015 - ], - [ - 105.58000124186378, - 29.705419249745532 - ], - [ - 105.57982684063381, - 29.7054444967809 - ], - [ - 105.57924550319922, - 29.70574746071088 - ], - [ - 105.57898390135358, - 29.70620190489163 - ], - [ - 105.57895483459976, - 29.706656347063984 - ], - [ - 105.57872229751007, - 29.70683307283619 - ], - [ - 105.57860603002342, - 29.707136032577154 - ], - [ - 105.57860603002342, - 29.70746423793102 - ], - [ - 105.57876589781864, - 29.707704079627163 - ], - [ - 105.57886763200304, - 29.708044906343105 - ], - [ - 105.57915830071966, - 29.708246877167795 - ], - [ - 105.57955070348811, - 29.708549832643413 - ], - [ - 105.5802773752817, - 29.70849934012719 - ], - [ - 105.58084417928154, - 29.70857507889164 - ], - [ - 105.5811348479981, - 29.70872655624804 - ], - [ - 105.58144005015237, - 29.70885278720435 - ], - [ - 105.5811720640055, - 29.709614475400542 - ], - [ - 105.58114299713321, - 29.709879557881166 - ], - [ - 105.5811720640055, - 29.710283491743866 - ], - [ - 105.5812011308766, - 29.71051070382748 - ], - [ - 105.58111393026093, - 29.710826275312897 - ], - [ - 105.58108486338989, - 29.711192336993292 - ], - [ - 105.58111393026093, - 29.711432169784118 - ], - [ - 105.58124473118363, - 29.71184872011284 - ], - [ - 105.5813755321065, - 29.712189532732367 - ], - [ - 105.5815853942313, - 29.71236446366261 - ] - ] - ] - } - } - ] -} -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [105.58430314673814, - 29.711392515200814], - style: 'light', - zoom: 10 - }) - }); - // @ts-ignore - window.scene = scene; - - const fill = new PolygonLayer({ - autoFit: false - }) - .source(data) - .shape('fill') - .color('red') - .style({ - opacity: 1, - - }); - const line = new PolygonLayer({ - autoFit: false - }) - .source(data) - .shape('line') - .size(2) - .color('rgb(255, 48, 107)') - .style({ - opacity: 1, - - }); - - scene.addLayer(fill); - scene.addLayer(line); - // scene.on('zoom', () => { - // console.log(scene.getZoom(), scene.getCenter()) - // }) - - - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/polygon/demos/select.tsx b/legacy/dev-demos/src/bugs/polygon/demos/select.tsx deleted file mode 100644 index dcb912db8c0..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/demos/select.tsx +++ /dev/null @@ -1,2613 +0,0 @@ -import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; -import { Mapbox } from "@antv/l7-maps"; -import React, { useEffect } from 'react'; -const list = { - portrKey: "PROVINCE_CITY_DITU", - portrName: "预测常住城市", - portrDesc: "预测用户省市分布，排除未知", - coverage: 0.8288461538461539, - reportDate: "20221127", - dataList: [ - { - portrValue: "浙江", - num: 830, - percentage: 0.27510772290354657, - extInfo: { - areaCode: "330000" - }, - subList: [ - { - portrValue: "杭州", - num: 553, - percentage: 0.18329466357308585, - extInfo: { - areaCode: "330100" - } - }, - { - portrValue: "宁波", - num: 56, - percentage: 0.018561484918793503, - extInfo: { - areaCode: "330200" - } - }, - { - portrValue: "温州", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "330300" - } - }, - { - portrValue: "绍兴", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "330600" - } - }, - { - portrValue: "金华", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "330700" - } - }, - { - portrValue: "嘉兴", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330400" - } - }, - { - portrValue: "湖州", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "330500" - } - }, - { - portrValue: "台州", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "331000" - } - }, - { - portrValue: "衢州", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "330800" - } - }, - { - portrValue: "丽水", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "331100" - } - }, - { - portrValue: "舟山", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "330900" - } - } - ] - }, - { - portrValue: "广东", - num: 338, - percentage: 0.11203181968843222, - extInfo: { - areaCode: "440000" - }, - subList: [ - { - portrValue: "深圳", - num: 97, - percentage: 0.032151143520053035, - extInfo: { - areaCode: "440300" - } - }, - { - portrValue: "广州", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "440100" - } - }, - { - portrValue: "东莞", - num: 42, - percentage: 0.013921113689095127, - extInfo: { - areaCode: "441900" - } - }, - { - portrValue: "佛山", - num: 27, - percentage: 0.008949287371561154, - extInfo: { - areaCode: "440600" - } - }, - { - portrValue: "惠州", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "441300" - } - }, - { - portrValue: "汕头", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "440500" - } - }, - { - portrValue: "揭阳", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "445200" - } - }, - { - portrValue: "中山", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "442000" - } - }, - { - portrValue: "珠海", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "440400" - } - }, - { - portrValue: "江门", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440700" - } - }, - { - portrValue: "茂名", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "440900" - } - }, - { - portrValue: "河源", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "441600" - } - }, - { - portrValue: "梅州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "441400" - } - }, - { - portrValue: "湛江", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "440800" - } - }, - { - portrValue: "清远", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "441800" - } - }, - { - portrValue: "韶关", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "440200" - } - }, - { - portrValue: "汕尾", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "441500" - } - }, - { - portrValue: "云浮", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "445300" - } - }, - { - portrValue: "潮州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "445100" - } - }, - { - portrValue: "肇庆", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441200" - } - }, - { - portrValue: "阳江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "441700" - } - } - ] - }, - { - portrValue: "江苏", - num: 202, - percentage: 0.06695392774279085, - extInfo: { - areaCode: "320000" - }, - subList: [ - { - portrValue: "苏州", - num: 52, - percentage: 0.01723566456745111, - extInfo: { - areaCode: "320500" - } - }, - { - portrValue: "南京", - num: 39, - percentage: 0.012926748425588332, - extInfo: { - areaCode: "320100" - } - }, - { - portrValue: "无锡", - num: 29, - percentage: 0.00961219754723235, - extInfo: { - areaCode: "320200" - } - }, - { - portrValue: "南通", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "320600" - } - }, - { - portrValue: "常州", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "320400" - } - }, - { - portrValue: "徐州", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "320300" - } - }, - { - portrValue: "盐城", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "320900" - } - }, - { - portrValue: "镇江", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "321100" - } - }, - { - portrValue: "宿迁", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "321300" - } - }, - { - portrValue: "淮安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "320800" - } - }, - { - portrValue: "扬州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "321000" - } - }, - { - portrValue: "连云港", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "320700" - } - }, - { - portrValue: "泰州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "321200" - } - } - ] - }, - { - portrValue: "河南", - num: 190, - percentage: 0.06297646668876367, - extInfo: { - areaCode: "410000" - }, - subList: [ - { - portrValue: "郑州", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "410100" - } - }, - { - portrValue: "南阳", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "411300" - } - }, - { - portrValue: "焦作", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "410800" - } - }, - { - portrValue: "许昌", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411000" - } - }, - { - portrValue: "周口", - num: 11, - percentage: 0.003646005966191581, - extInfo: { - areaCode: "411600" - } - }, - { - portrValue: "洛阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "410300" - } - }, - { - portrValue: "驻马店", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "411700" - } - }, - { - portrValue: "平顶山", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410400" - } - }, - { - portrValue: "新乡", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "410700" - } - }, - { - portrValue: "濮阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "410900" - } - }, - { - portrValue: "信阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "411500" - } - }, - { - portrValue: "开封", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "410200" - } - }, - { - portrValue: "商丘", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "411400" - } - }, - { - portrValue: "安阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "410500" - } - }, - { - portrValue: "三门峡", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "411200" - } - }, - { - portrValue: "漯河", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "411100" - } - }, - { - portrValue: "鹤壁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "410600" - } - }, - { - portrValue: "济源", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "419000" - } - } - ] - }, - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110000" - }, - subList: [ - { - portrValue: "北京", - num: 172, - percentage: 0.057010275107722906, - extInfo: { - areaCode: "110100" - } - } - ] - }, - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310000" - }, - subList: [ - { - portrValue: "上海", - num: 138, - percentage: 0.04574080212131256, - extInfo: { - areaCode: "310100" - } - } - ] - }, - { - portrValue: "山东", - num: 119, - percentage: 0.03944315545243619, - extInfo: { - areaCode: "370000" - }, - subList: [ - { - portrValue: "济南", - num: 23, - percentage: 0.007623467020218761, - extInfo: { - areaCode: "370100" - } - }, - { - portrValue: "青岛", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "370200" - } - }, - { - portrValue: "潍坊", - num: 15, - percentage: 0.004971826317533974, - extInfo: { - areaCode: "370700" - } - }, - { - portrValue: "日照", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "371100" - } - }, - { - portrValue: "烟台", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370600" - } - }, - { - portrValue: "济宁", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "370800" - } - }, - { - portrValue: "枣庄", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "370400" - } - }, - { - portrValue: "德州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "371400" - } - }, - { - portrValue: "泰安", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "370900" - } - }, - { - portrValue: "滨州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "371600" - } - }, - { - portrValue: "淄博", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "370300" - } - }, - { - portrValue: "临沂", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371300" - } - }, - { - portrValue: "聊城", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "371500" - } - }, - { - portrValue: "东营", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "370500" - } - }, - { - portrValue: "菏泽", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "371700" - } - }, - { - portrValue: "威海", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "371000" - } - } - ] - }, - { - portrValue: "四川", - num: 113, - percentage: 0.03745442492542261, - extInfo: { - areaCode: "510000" - }, - subList: [ - { - portrValue: "成都", - num: 81, - percentage: 0.02684786211468346, - extInfo: { - areaCode: "510100" - } - }, - { - portrValue: "绵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510700" - } - }, - { - portrValue: "遂宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "510900" - } - }, - { - portrValue: "南充", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "511300" - } - }, - { - portrValue: "自贡", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510300" - } - }, - { - portrValue: "德阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "510600" - } - }, - { - portrValue: "广元", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "510800" - } - }, - { - portrValue: "内江", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511000" - } - }, - { - portrValue: "广安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "511600" - } - }, - { - portrValue: "攀枝花", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "510400" - } - }, - { - portrValue: "宜宾", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511500" - } - }, - { - portrValue: "达州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511700" - } - }, - { - portrValue: "雅安", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511800" - } - }, - { - portrValue: "巴中", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "511900" - } - }, - { - portrValue: "资阳", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "512000" - } - }, - { - portrValue: "阿坝", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513200" - } - }, - { - portrValue: "凉山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "513400" - } - } - ] - }, - { - portrValue: "湖北", - num: 98, - percentage: 0.03248259860788863, - extInfo: { - areaCode: "420000" - }, - subList: [ - { - portrValue: "武汉", - num: 49, - percentage: 0.016241299303944315, - extInfo: { - areaCode: "420100" - } - }, - { - portrValue: "襄阳", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "420600" - } - }, - { - portrValue: "孝感", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "420900" - } - }, - { - portrValue: "黄石", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "420200" - } - }, - { - portrValue: "荆州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "421000" - } - }, - { - portrValue: "荆门", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "420800" - } - }, - { - portrValue: "鄂州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "420700" - } - }, - { - portrValue: "咸宁", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "421200" - } - }, - { - portrValue: "黄冈", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "421100" - } - }, - { - portrValue: "天门", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "429006" - } - }, - { - portrValue: "宜昌", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "420500" - } - }, - { - portrValue: "随州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "421300" - } - }, - { - portrValue: "恩施", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "422800" - } - } - ] - }, - { - portrValue: "安徽", - num: 93, - percentage: 0.03082532316871064, - extInfo: { - areaCode: "340000" - }, - subList: [ - { - portrValue: "合肥", - num: 31, - percentage: 0.010275107722903546, - extInfo: { - areaCode: "340100" - } - }, - { - portrValue: "阜阳", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "341200" - } - }, - { - portrValue: "芜湖", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "340200" - } - }, - { - portrValue: "宿州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "341300" - } - }, - { - portrValue: "滁州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341100" - } - }, - { - portrValue: "六安", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "341500" - } - }, - { - portrValue: "淮南", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340400" - } - }, - { - portrValue: "淮北", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "340600" - } - }, - { - portrValue: "蚌埠", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "340300" - } - }, - { - portrValue: "铜陵", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "340700" - } - }, - { - portrValue: "亳州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "341600" - } - }, - { - portrValue: "安庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "340800" - } - }, - { - portrValue: "宣城", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "341800" - } - }, - { - portrValue: "马鞍山", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "340500" - } - }, - { - portrValue: "池州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "341700" - } - } - ] - }, - { - portrValue: "福建", - num: 83, - percentage: 0.027510772290354656, - extInfo: { - areaCode: "350000" - }, - subList: [ - { - portrValue: "厦门", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "350200" - } - }, - { - portrValue: "泉州", - num: 17, - percentage: 0.005634736493205171, - extInfo: { - areaCode: "350500" - } - }, - { - portrValue: "福州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "350100" - } - }, - { - portrValue: "漳州", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "350600" - } - }, - { - portrValue: "南平", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "350700" - } - }, - { - portrValue: "宁德", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "350900" - } - }, - { - portrValue: "莆田", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "350300" - } - }, - { - portrValue: "三明", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350400" - } - }, - { - portrValue: "龙岩", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "350800" - } - } - ] - }, - { - portrValue: "河北", - num: 73, - percentage: 0.024196221411998675, - extInfo: { - areaCode: "130000" - }, - subList: [ - { - portrValue: "石家庄", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "130100" - } - }, - { - portrValue: "邯郸", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "130400" - } - }, - { - portrValue: "唐山", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "130200" - } - }, - { - portrValue: "保定", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "130600" - } - }, - { - portrValue: "廊坊", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "131000" - } - }, - { - portrValue: "沧州", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "130900" - } - }, - { - portrValue: "邢台", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "130500" - } - }, - { - portrValue: "秦皇岛", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "130300" - } - }, - { - portrValue: "张家口", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130700" - } - }, - { - portrValue: "承德", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "130800" - } - }, - { - portrValue: "衡水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "131100" - } - } - ] - }, - { - portrValue: "山西", - num: 68, - percentage: 0.022538945972820683, - extInfo: { - areaCode: "140000" - }, - subList: [ - { - portrValue: "太原", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "140100" - } - }, - { - portrValue: "临汾", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "141000" - } - }, - { - portrValue: "运城", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "140800" - } - }, - { - portrValue: "晋中", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "140700" - } - }, - { - portrValue: "长治", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140400" - } - }, - { - portrValue: "朔州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "140600" - } - }, - { - portrValue: "大同", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "140200" - } - }, - { - portrValue: "晋城", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "140500" - } - }, - { - portrValue: "阳泉", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "140300" - } - }, - { - portrValue: "吕梁", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "141100" - } - } - ] - }, - { - portrValue: "湖南", - num: 67, - percentage: 0.022207490884985085, - extInfo: { - areaCode: "430000" - }, - subList: [ - { - portrValue: "长沙", - num: 26, - percentage: 0.008617832283725556, - extInfo: { - areaCode: "430100" - } - }, - { - portrValue: "衡阳", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "430400" - } - }, - { - portrValue: "郴州", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "431000" - } - }, - { - portrValue: "邵阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430500" - } - }, - { - portrValue: "岳阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "430600" - } - }, - { - portrValue: "株洲", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430200" - } - }, - { - portrValue: "常德", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430700" - } - }, - { - portrValue: "益阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "430900" - } - }, - { - portrValue: "永州", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "431100" - } - }, - { - portrValue: "湘潭", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430300" - } - }, - { - portrValue: "张家界", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "430800" - } - }, - { - portrValue: "怀化", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "431200" - } - }, - { - portrValue: "湘西", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "433100" - } - }, - { - portrValue: "娄底", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "431300" - } - } - ] - }, - { - portrValue: "陕西", - num: 66, - percentage: 0.021876035797149487, - extInfo: { - areaCode: "610000" - }, - subList: [ - { - portrValue: "西安", - num: 32, - percentage: 0.010606562810739144, - extInfo: { - areaCode: "610100" - } - }, - { - portrValue: "榆林", - num: 9, - percentage: 0.0029830957905203847, - extInfo: { - areaCode: "610800" - } - }, - { - portrValue: "咸阳", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610400" - } - }, - { - portrValue: "渭南", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610500" - } - }, - { - portrValue: "汉中", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610700" - } - }, - { - portrValue: "安康", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "610900" - } - }, - { - portrValue: "铜川", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "610200" - } - }, - { - portrValue: "宝鸡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610300" - } - }, - { - portrValue: "延安", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "610600" - } - }, - { - portrValue: "商洛", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "611000" - } - } - ] - }, - { - portrValue: "广西", - num: 61, - percentage: 0.020218760357971495, - extInfo: { - areaCode: "450000" - }, - subList: [ - { - portrValue: "南宁", - num: 18, - percentage: 0.005966191581040769, - extInfo: { - areaCode: "450100" - } - }, - { - portrValue: "柳州", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450200" - } - }, - { - portrValue: "桂林", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "450300" - } - }, - { - portrValue: "玉林", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "450900" - } - }, - { - portrValue: "贵港", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "450800" - } - }, - { - portrValue: "梧州", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "450400" - } - }, - { - portrValue: "北海", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "450500" - } - }, - { - portrValue: "钦州", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "450700" - } - }, - { - portrValue: "来宾", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "451300" - } - }, - { - portrValue: "百色", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451000" - } - }, - { - portrValue: "贺州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451100" - } - }, - { - portrValue: "河池", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451200" - } - }, - { - portrValue: "崇左", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "451400" - } - } - ] - }, - { - portrValue: "江西", - num: 50, - percentage: 0.016572754391779913, - extInfo: { - areaCode: "360000" - }, - subList: [ - { - portrValue: "南昌", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "360100" - } - }, - { - portrValue: "赣州", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "360700" - } - }, - { - portrValue: "九江", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "360400" - } - }, - { - portrValue: "上饶", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "361100" - } - }, - { - portrValue: "吉安", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "360800" - } - }, - { - portrValue: "宜春", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "360900" - } - }, - { - portrValue: "萍乡", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "360300" - } - }, - { - portrValue: "景德镇", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360200" - } - }, - { - portrValue: "新余", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "360500" - } - } - ] - }, - { - portrValue: "辽宁", - num: 44, - percentage: 0.014584023864766324, - extInfo: { - areaCode: "210000" - }, - subList: [ - { - portrValue: "沈阳", - num: 14, - percentage: 0.004640371229698376, - extInfo: { - areaCode: "210100" - } - }, - { - portrValue: "大连", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "210200" - } - }, - { - portrValue: "营口", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "210800" - } - }, - { - portrValue: "鞍山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "210300" - } - }, - { - portrValue: "阜新", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "210900" - } - }, - { - portrValue: "朝阳", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "211300" - } - }, - { - portrValue: "丹东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "210600" - } - }, - { - portrValue: "辽阳", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "211000" - } - }, - { - portrValue: "抚顺", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210400" - } - }, - { - portrValue: "锦州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "210700" - } - }, - { - portrValue: "铁岭", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "211200" - } - } - ] - }, - { - portrValue: "云南", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "530000" - }, - subList: [ - { - portrValue: "昆明", - num: 19, - percentage: 0.006297646668876367, - extInfo: { - areaCode: "530100" - } - }, - { - portrValue: "曲靖", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "530300" - } - }, - { - portrValue: "文山", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "532600" - } - }, - { - portrValue: "昭通", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "530600" - } - }, - { - portrValue: "普洱", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530800" - } - }, - { - portrValue: "临沧", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "530900" - } - }, - { - portrValue: "楚雄", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532300" - } - }, - { - portrValue: "红河", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "532500" - } - } - ] - }, - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120000" - }, - subList: [ - { - portrValue: "天津", - num: 35, - percentage: 0.01160092807424594, - extInfo: { - areaCode: "120100" - } - } - ] - }, - { - portrValue: "重庆", - num: 30, - percentage: 0.009943652635067949, - extInfo: { - areaCode: "500000" - }, - subList: [ - { - portrValue: "重庆", - num: 28, - percentage: 0.009280742459396751, - extInfo: { - areaCode: "500100" - } - }, - { - portrValue: "重庆", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "500200" - } - } - ] - }, - { - portrValue: "贵州", - num: 24, - percentage: 0.007954922108054359, - extInfo: { - areaCode: "520000" - }, - subList: [ - { - portrValue: "贵阳", - num: 13, - percentage: 0.004308916141862778, - extInfo: { - areaCode: "520100" - } - }, - { - portrValue: "遵义", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "520300" - } - }, - { - portrValue: "黔东", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "522600" - } - }, - { - portrValue: "六盘水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520200" - } - }, - { - portrValue: "毕节", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520500" - } - }, - { - portrValue: "铜仁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "520600" - } - }, - { - portrValue: "黔南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "522700" - } - } - ] - }, - { - portrValue: "黑龙江", - num: 21, - percentage: 0.0069605568445475635, - extInfo: { - areaCode: "230000" - }, - subList: [ - { - portrValue: "哈尔滨", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "230100" - } - }, - { - portrValue: "绥化", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "231200" - } - }, - { - portrValue: "大庆", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230600" - } - }, - { - portrValue: "佳木斯", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "230800" - } - }, - { - portrValue: "双鸭山", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "230500" - } - }, - { - portrValue: "鸡西", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "230300" - } - } - ] - }, - { - portrValue: "新疆", - num: 16, - percentage: 0.005303281405369572, - extInfo: { - areaCode: "650000" - }, - subList: [ - { - portrValue: "乌鲁木齐", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "650100" - } - }, - { - portrValue: "阿克苏地区", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "652900" - } - }, - { - portrValue: "克拉玛依", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "650200" - } - }, - { - portrValue: "克孜勒苏柯尔克孜", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653000" - } - }, - { - portrValue: "喀什地区", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "653100" - } - }, - { - portrValue: "伊犁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "654000" - } - }, - { - portrValue: "北屯", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "659005" - } - } - ] - }, - { - portrValue: "甘肃", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "620000" - }, - subList: [ - { - portrValue: "兰州", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "620100" - } - }, - { - portrValue: "陇南", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "621200" - } - }, - { - portrValue: "天水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620500" - } - }, - { - portrValue: "武威", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620600" - } - }, - { - portrValue: "平凉", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "620800" - } - } - ] - }, - { - portrValue: "海南", - num: 12, - percentage: 0.003977461054027179, - extInfo: { - areaCode: "460000" - }, - subList: [ - { - portrValue: "海口", - num: 7, - percentage: 0.002320185614849188, - extInfo: { - areaCode: "460100" - } - }, - { - portrValue: "三亚", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "460200" - } - }, - { - portrValue: "儋州", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "460400" - } - }, - { - portrValue: "昌江", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469026" - } - }, - { - portrValue: "陵水", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "469028" - } - } - ] - }, - { - portrValue: "吉林", - num: 10, - percentage: 0.003314550878355983, - extInfo: { - areaCode: "220000" - }, - subList: [ - { - portrValue: "长春", - num: 6, - percentage: 0.0019887305270135896, - extInfo: { - areaCode: "220100" - } - }, - { - portrValue: "吉林", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "220200" - } - }, - { - portrValue: "四平", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220300" - } - }, - { - portrValue: "松原", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "220700" - } - } - ] - }, - { - portrValue: "内蒙古", - num: 8, - percentage: 0.002651640702684786, - extInfo: { - areaCode: "150000" - }, - subList: [ - { - portrValue: "包头", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150200" - } - }, - { - portrValue: "呼伦贝尔", - num: 2, - percentage: 6.629101756711965e-4, - extInfo: { - areaCode: "150700" - } - }, - { - portrValue: "呼和浩特", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150100" - } - }, - { - portrValue: "赤峰", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150400" - } - }, - { - portrValue: "通辽", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150500" - } - }, - { - portrValue: "巴彦淖尔", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "150800" - } - } - ] - }, - { - portrValue: "青海", - num: 5, - percentage: 0.0016572754391779914, - extInfo: { - areaCode: "630000" - }, - subList: [ - { - portrValue: "海西", - num: 3, - percentage: 9.943652635067948e-4, - extInfo: { - areaCode: "632800" - } - }, - { - portrValue: "西宁", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "630100" - } - }, - { - portrValue: "海南", - num: 1, - percentage: 3.3145508783559825e-4, - extInfo: { - areaCode: "632500" - } - } - ] - }, - { - portrValue: "宁夏", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640000" - }, - subList: [ - { - portrValue: "银川", - num: 4, - percentage: 0.001325820351342393, - extInfo: { - areaCode: "640100" - } - } - ] - }, - { - portrValue: "台湾", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "710000" - }, - subList: [] - }, - { - portrValue: "澳门", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "820000" - }, - subList: [] - }, - { - portrValue: "香港", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "810000" - }, - subList: [] - }, - { - portrValue: "西藏", - num: 0, - percentage: 0.0, - extInfo: { - areaCode: "540000" - }, - subList: [] - } - ] -}; -export default () => { - useEffect( () => { - const scene = new Scene({ - id: "map", - map: new Mapbox({ - pitch: 0, - style: "blank", - center: [116.368652, 39.93866], - zoom: 10.07 - }) - }); - scene.on("loaded", () => { - fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用 - "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json" - ) - .then((res) => res.json()) - .then((data) => { - data.features.forEach((i) => { - i.properties.adcode = String(i.properties.adcode); - const item = list.dataList.find( - (item) => item.extInfo.areaCode === i.properties.adcode - ); - // 把num塞到data里 - i.properties.num = item?.num || 0; - }); - const chinaPolygonLayer = new PolygonLayer({ - autoFit: true - }) - .source(data) - // .color( - // 'name', - // [ - // 'rgb(239,243,255)', - // 'rgb(189,215,231)', - // 'rgb(107,174,214)', - // 'rgb(49,130,189)', - // 'rgb(8,81,156)' - // ] - // ) - .color("num", ["#E8F1FF", "#A8BDEC", "#688DE4", "#3461CA", "#23396E"]) - .shape("fill") - .select({ - color: "#FFDFB1" - }) - .select(false) - .style({ - opacity: 1 - }); - - // 默认高亮选中北京 - chinaPolygonLayer.on("add", () => { - setTimeout(() => { - chinaPolygonLayer.setSelect("0"); - }, 1000); - }); - // 点击省份添加高亮效果 - chinaPolygonLayer.on("click", (result) => { - console.log("result", result); - const adcode = result.feature.properties.adcode; - const source = chinaPolygonLayer.getSource(); - const featureId = source.getFeatureId("adcode", adcode); - chinaPolygonLayer.setSelect(featureId); - }); - // 图层边界 - const layer2 = new LineLayer({ - zIndex: 2 - }) - .source(data) - .color("rgb(93,112,146)") - .size(0.6) - .style({ - opacity: 1 - }); - - scene.addLayer(chinaPolygonLayer); - scene.addLayer(layer2); - }); - fetch( - "https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json" // 标注数据 - ) - .then((res) => res.json()) - .then((data) => { - const labelLayer = new PointLayer({ - zIndex: 5 - }) - .source(data, { - parser: { - type: "json", - coordinates: "center" - } - }) - .color("#fff") - .shape("name", "text") - .size(12) - .style({ - opacity: 1, - stroke: "#fff", - strokeWidth: 0, - padding: [5, 5], - textAllowOverlap: false - }); - - scene.addLayer(labelLayer); - }); - }); - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/district.md b/legacy/dev-demos/src/bugs/polygon/district.md deleted file mode 100644 index be9254548c5..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/district.md +++ /dev/null @@ -1,2 +0,0 @@ -### district - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/highlight.md b/legacy/dev-demos/src/bugs/polygon/highlight.md deleted file mode 100644 index 97e21dce5bd..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/highlight.md +++ /dev/null @@ -1,2 +0,0 @@ -### polygon highlight - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/polygon.md b/legacy/dev-demos/src/bugs/polygon/polygon.md deleted file mode 100644 index f78c9f1c8b9..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/polygon.md +++ /dev/null @@ -1,2 +0,0 @@ -### polygon - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/polygonindex.md b/legacy/dev-demos/src/bugs/polygon/polygonindex.md deleted file mode 100644 index 8c838322823..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/polygonindex.md +++ /dev/null @@ -1,2 +0,0 @@ -### polygon 层级 - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/quantile.md b/legacy/dev-demos/src/bugs/polygon/quantile.md deleted file mode 100644 index 7580fc9826c..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/quantile.md +++ /dev/null @@ -1,2 +0,0 @@ -### polygon Quantile - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/scale.md b/legacy/dev-demos/src/bugs/polygon/scale.md deleted file mode 100644 index 08a3790c5e7..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/scale.md +++ /dev/null @@ -1,2 +0,0 @@ -### scale - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/polygon/select.md b/legacy/dev-demos/src/bugs/polygon/select.md deleted file mode 100644 index d38431837fd..00000000000 --- a/legacy/dev-demos/src/bugs/polygon/select.md +++ /dev/null @@ -1,2 +0,0 @@ -### select - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/scene/bmap.md b/legacy/dev-demos/src/bugs/scene/bmap.md deleted file mode 100644 index c0f649256a7..00000000000 --- a/legacy/dev-demos/src/bugs/scene/bmap.md +++ /dev/null @@ -1,3 +0,0 @@ -### 百度地图 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/scene/demos/bmap.tsx b/legacy/dev-demos/src/bugs/scene/demos/bmap.tsx deleted file mode 100644 index f9241ff9e97..00000000000 --- a/legacy/dev-demos/src/bugs/scene/demos/bmap.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { BaiduMap, Scene, PointLayer } from "@antv/l7"; -import React from "react"; -// tslint:disable-next-line:no-duplicate-imports -import { FunctionComponent, useEffect } from "react"; - -const Demo: FunctionComponent = () => { - - useEffect(() => { - const bmap = new BMapGL.Map("map"); - const point = new BMapGL.Point(121.30654632240122, 31.25744185633306); - bmap.centerAndZoom(point, 3); - var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925)); - bmap.addOverlay(marker1); - - console.log('getRotation', bmap) - const newScene = new Scene({ - id: "map", - map: new BaiduMap({ mapInstance: bmap }) - }); - - newScene.on("loaded", () => { - - fetch( - "https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json" - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ - autoFit: false - }) - .source([{ - x: 116.404, - y: 39.925 - - }], { - parser: { - type: 'json', - x: 'x', - y: 'y' - } - }) - .shape("circle") - .size(10) - .color('#5CCEA1') - .active(true) - .style({ - opacity: 1, - strokeWidth: 1 - }); - newScene.addLayer(pointLayer); - - - - }); - }); - }, []); - - return ( - -
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/bugs/scene/demos/exportimg.tsx b/legacy/dev-demos/src/bugs/scene/demos/exportimg.tsx deleted file mode 100644 index a1647830ac2..00000000000 --- a/legacy/dev-demos/src/bugs/scene/demos/exportimg.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Map, Mapbox,Scene, ExportImage, PointLayer } from "@antv/l7"; -import React, { useState } from "react"; -// tslint:disable-next-line:no-duplicate-imports -import { FunctionComponent, useEffect } from "react"; - -const Demo: FunctionComponent = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [scene, setScene] = useState(); - const [imgSrc, setImgSrc] = useState(""); - - useEffect(() => { - const newScene = new Scene({ - id: "map", - map: new Map({ - style: "normal", - center: [120, 30], - pitch: 60, - zoom: 6.45, - WebGLParams: { - preserveDrawingBuffer: true - } - }) - // logoVisible: false, - }); - - newScene.on("loaded", () => { - fetch( - "https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json" - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ - autoFit: false - }) - .source(data) - .shape("circle") - .size("mag", [1, 25]) - .color("mag", (mag) => { - return mag > 4.5 ? "#5B8FF9" : "#5CCEA1"; - }) - .active(true) - .style({ - opacity: 0.3, - strokeWidth: 1 - }); - newScene.addLayer(pointLayer); - setScene(newScene); - newScene.setPitch(30) - // newScene.panBy(100, 100) - // console.log(newScene.panBy(100, 100)); - - - }); - }); - }, []); - - return ( - <> - - -
-
-
截图展示：
- -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/bugs/scene/demos/multiMap.tsx b/legacy/dev-demos/src/bugs/scene/demos/multiMap.tsx deleted file mode 100644 index 27510997187..00000000000 --- a/legacy/dev-demos/src/bugs/scene/demos/multiMap.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore - } from '@antv/l7'; - // @ts-ignore - import { GaodeMapV1 } from '@antv/l7-maps'; - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMapV1({ - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - scene.on('loaded', () => { - - }); - - const scene2 = new Scene({ - id: 'map2', - map: new GaodeMapV1({ - style: 'dark', - center: [-96, 37.8], - zoom: 3, - }), - }); - scene2.on('loaded', () => { - - }); - - - }, []); - return ( - <> -
-
- - ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/scene/demos/removelayer.tsx b/legacy/dev-demos/src/bugs/scene/demos/removelayer.tsx deleted file mode 100644 index 36c04be61b9..00000000000 --- a/legacy/dev-demos/src/bugs/scene/demos/removelayer.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Scene, PointLayer } from "@antv/l7"; -import { GaodeMap } from "@antv/l7-maps"; -import React from "react"; -export default function App() { - React.useEffect(() => { - const scene = new Scene({ - id: "map", - map: new GaodeMap({ - style: "light", - center: [140.067171, 36.26186], - zoom: 5.32, - maxZoom: 10 - }) - }); - scene.on("loaded", () => { - fetch( - "https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json" - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({}) - .source(data) - .shape("circle") - .size("mag", [1, 25]) - .color("mag", (mag) => { - return mag > 4 && "yellow"; - }) - .active(true) - .style({ - opacity: 0.3, - strokeWidth: 1 - }); - const point2Layer = new PointLayer({}) - .source(data) - .shape("circle") - .size("mag", [1, 25]) - .color("mag", (mag) => { - return mag < 4 && "red"; - }) - .active(true) - .style({ - opacity: 0.3, - strokeWidth: 1 - }); - scene.addLayer(pointLayer); - scene.addLayer(point2Layer); - setTimeout(async() => { - scene.removeLayer(pointLayer) - scene.removeLayer(point2Layer) - - }, 1000); - // setTimeout(() => { - // scene.render(); - // }, 2000); - }); - }); - }, []); - return
-} diff --git a/legacy/dev-demos/src/bugs/scene/demos/testDestroy.tsx b/legacy/dev-demos/src/bugs/scene/demos/testDestroy.tsx deleted file mode 100644 index b44ab175fbf..00000000000 --- a/legacy/dev-demos/src/bugs/scene/demos/testDestroy.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Map, Scene, PolygonLayer,LineLayer,GaodeMap,Mapbox } from "@antv/l7"; -import React from "react"; -// tslint:disable-next-line:no-duplicate-imports -import { FunctionComponent, useEffect } from "react"; - -const Demo: FunctionComponent = () => { - - - useEffect(() => { - - let count = 0; - let scene; - const colors = ["red", "green", "blue", "yellow", "purple"]; - function loadAreaMap(color) { - if (scene != null) { - scene.destroy(); - scene = null; - } - scene = new Scene({ - id: "map", - map: new Map({ - center: [120.19382669582967, 30.258134], - pitch: 0, - zoom: 3, - }), - // map: new Mapbox({ - // zoom: 10, - // minZoom: 0, - // maxZoom: 18, - // center: [120.19382669582967, 30.258134], - // token:"pk.eyJ1Ijoic2tvcm5vdXMiLCJhIjoiY2s4dDBkNjY1MG13ZTNzcWEyZDYycGkzMyJ9.tjfwvJ8G_VDmXoClOyxufg", - // }) - }); - let _this = scene; - scene.on("loaded", () => { - // const backgroundLayer = new PolygonLayer({}); - // backgroundLayer - // .source({ type: "FeatureCollection", features: chinaGeo.features }) - // .color(color) - // .active(true); - // const lineLayer = new LineLayer({}); - // lineLayer - // .source({ type: "FeatureCollection", features: chinaGeo.features }) - // .color("#ccc") - // .active(false); - // _this.addLayer(backgroundLayer); - // _this.addLayer(lineLayer); - }); - } - const maxCount = 5; - loadAreaMap(); - function startRender() { - let timer = window.setInterval(() => { - if (count >= maxCount) { - window.clearInterval(timer); - scene.destroy(); - scene = null; - // chinaGeo = null; - return; - } else { - loadAreaMap(colors[count % 5]); - } - count++; - document.querySelector("#start").textContent = `Render ${count}`; - }, 3000); - } - document.querySelector("#start").addEventListener("click", startRender); - - }, []); - - return ( - - <>
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/bugs/scene/exportimg.md b/legacy/dev-demos/src/bugs/scene/exportimg.md deleted file mode 100644 index dc3707a6d61..00000000000 --- a/legacy/dev-demos/src/bugs/scene/exportimg.md +++ /dev/null @@ -1,3 +0,0 @@ -### 导出图片 - - diff --git a/legacy/dev-demos/src/bugs/scene/multiMap.md b/legacy/dev-demos/src/bugs/scene/multiMap.md deleted file mode 100644 index 1ebfa3a9b22..00000000000 --- a/legacy/dev-demos/src/bugs/scene/multiMap.md +++ /dev/null @@ -1,3 +0,0 @@ -### multiMap 地图 - - diff --git a/legacy/dev-demos/src/bugs/scene/removelayer.md b/legacy/dev-demos/src/bugs/scene/removelayer.md deleted file mode 100644 index a0f5faf0f83..00000000000 --- a/legacy/dev-demos/src/bugs/scene/removelayer.md +++ /dev/null @@ -1,2 +0,0 @@ -### 图层移除 - diff --git a/legacy/dev-demos/src/bugs/scene/testDestroy.md b/legacy/dev-demos/src/bugs/scene/testDestroy.md deleted file mode 100644 index 0002b0f573b..00000000000 --- a/legacy/dev-demos/src/bugs/scene/testDestroy.md +++ /dev/null @@ -1,3 +0,0 @@ -### testDestroy - - \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/source/demos/source-geometry.tsx b/legacy/dev-demos/src/bugs/source/demos/source-geometry.tsx deleted file mode 100644 index 6c97f3a716c..00000000000 --- a/legacy/dev-demos/src/bugs/source/demos/source-geometry.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { - Scene, - PolygonLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - fetch( - 'https://gw.alipayobjects.com/os/antfincdn/pRl7S2quof/source-geometry.json', - ) - .then((response) => response.json()) - .then((data) => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - center: [113.8623046875, 30.031055426540206], - zoom: 3, - }), - }); - - const layer = new PolygonLayer({}) - .source(data, { - parser: { type: 'json', geometry: '_geometry' }, - }) - .shape('fill') - .color('childrenNum', ['#0f9960', '#33a02c', '#377eb8']) - .active(true) - .style({}); - - layer.on('mousemove', (event) => { - console.log('event: ', event); - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/bugs/source/demos/source-update.tsx b/legacy/dev-demos/src/bugs/source/demos/source-update.tsx deleted file mode 100644 index e754395597b..00000000000 --- a/legacy/dev-demos/src/bugs/source/demos/source-update.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { Scene, GaodeMap } from "@antv/l7"; -import React, { useEffect } from "react"; -import { LineLayer, PointLayer } from "@antv/l7"; -const lineList: Feature[] = [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [119.988511, 30.269614], - [119.9851, 30.269323], - [119.985438, 30.267852], - [119.990291, 30.267257], - [119.991454, 30.261762], - [119.994974, 30.256115], - [119.983641, 30.246146], - [119.985286, 30.241228], - [119.983351, 30.224089], - [119.985473, 30.221814], - [119.99271, 30.22088], - ], - }, - } - ]; -import { - coordAll, - Feature, - featureCollection, - LineString, - point -} from "@turf/turf"; -import { debounce } from "lodash"; - -const id = String(Math.random()); - -const getPointFeatureCollection = (lineList: Feature[]) => { - return featureCollection( - coordAll(featureCollection(lineList)).map((item) => point(item)) - ); -}; - -const Demo: React.FC = () => { - - useEffect(() => { - const scene = new Scene({ - id, - map: new GaodeMap({ - center: [120.151634, 30.244831], - pitch: 0, - style: "dark", - zoom: 10 - }) - }); - scene.on("loaded", () => { - const lineLayer = new LineLayer(); - lineLayer - .source( - featureCollection( - lineList.map((item, index) => { - item.properties = { - index - }; - return item; - }) - ) - ) - .size(4) - .color("#f00"); - const pointLayer = new PointLayer(); - pointLayer - .source(getPointFeatureCollection(lineList)) - .size(6) - .shape("circle") - .style({ - stroke: "#00f", - strokeWidth: 3 - }); - scene.addLayer(lineLayer); - scene.addLayer(pointLayer); - - let isDrag = false; - let dragFeature: Feature | null = null; - let prePosition = [0, 0]; - - lineLayer.on("mousedown", (e) => { - const { lng, lat } = e.lngLat; - prePosition = [lng, lat]; - - isDrag = true; - scene.setMapStatus({ - dragEnable: false - }); - dragFeature = e.feature; - }); - - scene.on("mousemove", (e) => { - requestAnimationFrame(() => { - if (isDrag) { - const { lng, lat } = e.lnglat; - const [lastLng, lastLat] = prePosition; - if (dragFeature) { - const positions = coordAll(dragFeature); - positions.forEach((position) => { - position[0] += lng - lastLng; - position[1] += lat - lastLat; - }); - dragFeature.geometry.coordinates = positions; - lineList[dragFeature.properties?.index] = dragFeature; - } - prePosition = [lng, lat]; - pointLayer.setData(getPointFeatureCollection([dragFeature]),{ - autoRender:false - }); - lineLayer.setData(featureCollection(lineList),{ - autoRender:false - }); - scene.render() - - } - }); - }); - - scene.on("mouseup", (e) => { - isDrag = false; - scene.setMapStatus({ - dragEnable: true - }); - }); - }); - }, []); - - return ( -
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/bugs/source/source.md b/legacy/dev-demos/src/bugs/source/source.md deleted file mode 100644 index ee279ad4d08..00000000000 --- a/legacy/dev-demos/src/bugs/source/source.md +++ /dev/null @@ -1,3 +0,0 @@ -### JSON - geometry - - diff --git a/legacy/dev-demos/src/bugs/source/sourceUpdate.md b/legacy/dev-demos/src/bugs/source/sourceUpdate.md deleted file mode 100644 index 079f81d77c3..00000000000 --- a/legacy/dev-demos/src/bugs/source/sourceUpdate.md +++ /dev/null @@ -1,3 +0,0 @@ -### source 更新 - - diff --git a/legacy/dev-demos/src/bugs/three/demo/marker.tsx b/legacy/dev-demos/src/bugs/three/demo/marker.tsx deleted file mode 100644 index 2b186a0f40c..00000000000 --- a/legacy/dev-demos/src/bugs/three/demo/marker.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import React, { useEffect, useState } from 'react'; -import type { Group } from 'three'; -import type THREE from 'three'; -import { AmbientLight, DirectionalLight } from 'three'; -import type { GLTF} from 'three/examples/jsm/loaders/GLTFLoader'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; - -const gltfSceneMap: Record = {}; -const gltfPromiseMap: Record> = {}; - -export const getGLTFScene = (() => { - return (url: string) => { - const promise = new Promise((resolve) => { - // 防止 promise 还未完成赋值 - setTimeout(() => { - const cacheGLTF = gltfSceneMap[url]; - if (cacheGLTF) { - resolve(cacheGLTF.scene.clone()); - return; - } - const getGLTFPromise = gltfPromiseMap[url]; - // @ts-ignore - if (getGLTFPromise) { - getGLTFPromise.then(() => { - resolve(gltfSceneMap[url].scene.clone()); - }); - return; - } - const loader = new GLTFLoader(); - gltfPromiseMap[url] = promise; - loader.load(url, (gltf) => { - gltfSceneMap[url] = gltf; - resolve(gltf.scene.clone()); - }); - }, 0); - }); - - return promise; - }; -})(); - -const data1 = [ - { - lng: 120.1143242, - lat: 20.27562376, - size: Math.pow(2, 17), - url: 'https://mdn.alipayobjects.com/huamei_zihk4o/uri/file/as/2/zihk4o/6/mp/RxNN8ocL3KtNSN9F/homePoi/homePoi.gltf', - label: '潜客: 750', - } -]; - -const data2 = [ - { - lng: 120.1669987, - lat: 40.27756082, - size: Math.pow(2, 17), - url: 'https://mdn.alipayobjects.com/huamei_zihk4o/uri/file/as/2/zihk4o/6/mp/RxNN8ocL3KtNSN9F/homePoi/homePoi.gltf', - label: '潜客: 780', - }, -]; - -const data3 = [ - - { - lng: 60.164324, - lat: 30.272368, - size: Math.pow(2, 17), - url: 'https://mdn.alipayobjects.com/huamei_iy7sau/uri/file/as/2/iy7sau/6/mp/fP3BH5TMbu1I9Crv/site/site.gltf', - label: '武林广场', - }, - ]; - -export default () => { - const [scene, setScene] = useState(); - const [data, setData] = useState(data1); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [120.1143242, 30.27562376], - zoom: 2, - style: 'dark', - pitch: 45, - }), - }); - scene.registerRenderService(ThreeRender); - scene.on('loaded', () => { - setScene(scene); - }); - }, []); - - useEffect(() => { - if (!scene) { - return; - } - const threeJSLayer2 = new ThreeLayer({ - enableMultiPassRenderer: false, - // @ts-ignore - onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => { - threeScene.add(new AmbientLight(0xffffff)); - const sunlight = new DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - Promise.all( - data3.map(({ url, lng, lat, size }) => { - return new Promise((resolve) => { - const loader = new GLTFLoader(); - loader.load(url, (gltf) => { - const gltfScene = gltf.scene; - layer.adjustMeshToMap(gltfScene); - layer.setMeshScale(gltfScene, size, size, size); - layer.setObjectLngLat(gltfScene, [lng, lat], 0); - // 向场景中添加模型 - threeScene.add(gltfScene); - resolve(); - }); - }); - }), - ).then(() => { - // layer.render(); - }); - }, - }); - scene?.addLayer(threeJSLayer2); - fetch("https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt") - .then((res) => res.text( - - )) - .then((data) => { - const layer = new LineLayer({ - zIndex: -2 - }) - .source(data, { - parser: { - type: "csv", - x: "lng1", - y: "lat1", - x1: "lng2", - y1: "lat2" - } - }) - .size(1) - .shape("arc") - .color("#FF7C6A") - .style({ - opacity: 0.8, - sourceColor: "#f00", - targetColor: "#6F19FF" - }); - scene.addLayer(layer); - }); - const threeJSLayer = new ThreeLayer({ - enableMultiPassRenderer: false, - // @ts-ignore - onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => { - threeScene.add(new AmbientLight(0xffffff)); - const sunlight = new DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - Promise.all( - data.map(({ url, lng, lat, size }) => { - return new Promise((resolve) => { - const loader = new GLTFLoader(); - loader.load(url, (gltf) => { - const gltfScene = gltf.scene; - layer.adjustMeshToMap(gltfScene); - layer.setMeshScale(gltfScene, size, size, size); - layer.setObjectLngLat(gltfScene, [lng, lat], 0); - // 向场景中添加模型 - threeScene.add(gltfScene); - resolve(); - }); - }); - }), - ).then(() => { - // scene.render(); - }); - }, - }); - - scene?.addLayer(threeJSLayer); - - - - return () => { - console.log('remove layer'); - scene?.removeLayer(threeJSLayer2); - scene?.removeLayer(threeJSLayer); - }; - }, [data, scene]); - - return ( -
- - -
-
- ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/bugs/three/marker.md b/legacy/dev-demos/src/bugs/three/marker.md deleted file mode 100644 index 70f440300d0..00000000000 --- a/legacy/dev-demos/src/bugs/three/marker.md +++ /dev/null @@ -1,3 +0,0 @@ -### Three-Marker - - diff --git a/legacy/dev-demos/src/component/control/exportImage.md b/legacy/dev-demos/src/component/control/exportImage.md deleted file mode 100644 index 601b0ae7899..00000000000 --- a/legacy/dev-demos/src/component/control/exportImage.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 导出图片 -order: 9 ---- - - diff --git a/legacy/dev-demos/src/component/control/exportImage.tsx b/legacy/dev-demos/src/component/control/exportImage.tsx deleted file mode 100644 index 382fbf12a0f..00000000000 --- a/legacy/dev-demos/src/component/control/exportImage.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { ExportImage, GaodeMap, PointLayer, Scene } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [scene, setScene] = useState(); - const [imgSrc, setImgSrc] = useState(''); - const [control, setControl] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120, 30], - pitch: 0, - zoom: 6.45, - WebGLParams: { - preserveDrawingBuffer: true, - }, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const newControl = new ExportImage({ - onExport: (base64) => { - setImgSrc(base64); - }, - }); - newScene.addControl(newControl); - setControl(newControl); - - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ - autoFit: true, - }) - .source(data) - .shape('circle') - .size('mag', [1, 25]) - .color('mag', (mag) => { - return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; - }) - .active(true) - .style({ - opacity: 0.3, - strokeWidth: 1, - }); - newScene.addLayer(pointLayer); - setScene(newScene); - }); - }); - }, []); - - return ( - <> - -
-
-
截图展示：
- -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/fullscreen.md b/legacy/dev-demos/src/component/control/fullscreen.md deleted file mode 100644 index 563a42780ff..00000000000 --- a/legacy/dev-demos/src/component/control/fullscreen.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 全屏 -order: 8 ---- - - diff --git a/legacy/dev-demos/src/component/control/fullscreen.tsx b/legacy/dev-demos/src/component/control/fullscreen.tsx deleted file mode 100644 index 1ad7ae5a052..00000000000 --- a/legacy/dev-demos/src/component/control/fullscreen.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Fullscreen, GaodeMap, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - scene.on('loaded', () => { - const newFullscreen = new Fullscreen(); - scene.addControl(newFullscreen); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/hide.md b/legacy/dev-demos/src/component/control/hide.md deleted file mode 100644 index 378ab1648a0..00000000000 --- a/legacy/dev-demos/src/component/control/hide.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 显示/隐藏 -order: 3 ---- - - diff --git a/legacy/dev-demos/src/component/control/hide.tsx b/legacy/dev-demos/src/component/control/hide.tsx deleted file mode 100644 index df5e356c0bd..00000000000 --- a/legacy/dev-demos/src/component/control/hide.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { GaodeMap, MapTheme, Scene } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [zoom, setZoom] = useState(() => { - return new MapTheme({ - position: 'topleft', - }); - }); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - scene.on('loaded', () => { - scene.addControl(zoom); - }); - }, []); - - return ( - <> - - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/layerSwitch.md b/legacy/dev-demos/src/component/control/layerSwitch.md deleted file mode 100644 index bbd980cc337..00000000000 --- a/legacy/dev-demos/src/component/control/layerSwitch.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 图层控制 -order: 13 ---- - - - - diff --git a/legacy/dev-demos/src/component/control/layerSwitch.tsx b/legacy/dev-demos/src/component/control/layerSwitch.tsx deleted file mode 100644 index fa0612d45a1..00000000000 --- a/legacy/dev-demos/src/component/control/layerSwitch.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import type { - ILayer} from '@antv/l7'; -import { - GaodeMap, - LayerSwitch, - LineLayer, - PointLayer, - PolygonLayer, - Scene, -} from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; -import { message } from 'antd'; - -const Demo: FunctionComponent = () => { - const [layers, setLayers] = useState([]); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [scene, setScene] = useState(); - const [newLayer, setNewLayer] = useState(null); - const [control, setControl] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const newLayers: ILayer[] = []; - window.Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ - name: '点图层', - autoFit: true, - }) - .source(data) - .shape('circle') - .size('mag', [1, 25]) - .color('mag', (mag) => { - return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; - }) - .active(true) - .style({ - opacity: 0.3, - strokeWidth: 1, - }); - setNewLayer(pointLayer); - newScene.addLayer(pointLayer); - }), - fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' // 获取行政区划P噢利用 - 'https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json', - ) - .then((res) => res.json()) - .then((data) => { - const chinaPolygonLayer = new PolygonLayer({ - name: '中国填充', - autoFit: true, - }) - .source(data) - .color('name', [ - 'rgb(239,243,255)', - 'rgb(189,215,231)', - 'rgb(107,174,214)', - 'rgb(49,130,189)', - 'rgb(8,81,156)', - ]) - .shape('fill') - .style({ - opacity: 1, - }); - // 图层边界 - const layer2 = new LineLayer({ - name: '中国边框', - zIndex: 2, - }) - .source(data) - .color('rgb(93,112,146)') - .size(0.6) - .style({ - opacity: 1, - }); - - newScene.addLayer(chinaPolygonLayer); - newScene.addLayer(layer2); - newLayers.push(chinaPolygonLayer, layer2); - }), - ]).then(() => { - const newControl = new LayerSwitch({ - layers: newLayers, - multiple: false - }); - setControl(newControl); - newScene.addControl(newControl); - setLayers(newLayers); - setScene(newScene); - }); - }); - }, []); - - return ( - <> - - - - - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/layerSwitch1.tsx b/legacy/dev-demos/src/component/control/layerSwitch1.tsx deleted file mode 100644 index 1d5701a3876..00000000000 --- a/legacy/dev-demos/src/component/control/layerSwitch1.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { GaodeMap, LayerSwitch, RasterLayer, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const scene = new Scene({ - id: 'map1', - map: new GaodeMap({ - pitch: 0, - style: 'normal', - center: [120.154672, 30.241095], - zoom: 12, - }), - }); - scene.on('loaded', () => { - const url1 = - 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}'; - const rasterLayer1 = new RasterLayer({ - zIndex: 1, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - - const url2 = - 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}'; - const rasterLayer2 = new RasterLayer({ - zIndex: 1, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - - scene.addLayer(rasterLayer1); - scene.addLayer(rasterLayer2); - - const layerSwitch = new LayerSwitch({ - layers: [ - { - layer: rasterLayer1, - name: '遥感影像图层', - img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*fG9HQpyNuv0AAAAAAAAAAAAADjWqAQ/original', - }, - { - layer: rasterLayer2, - name: '文字标注图层', - img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*CP5pQY_8Q_YAAAAAAAAAAAAADjWqAQ/original', - }, - ], - }); - scene.addControl(layerSwitch); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/logo.md b/legacy/dev-demos/src/component/control/logo.md deleted file mode 100644 index 9fe0a0f28c4..00000000000 --- a/legacy/dev-demos/src/component/control/logo.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Logo -order: 10 ---- - - diff --git a/legacy/dev-demos/src/component/control/logo.tsx b/legacy/dev-demos/src/component/control/logo.tsx deleted file mode 100644 index 2ed58881151..00000000000 --- a/legacy/dev-demos/src/component/control/logo.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { GaodeMap, Logo, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - logoVisible: false, - }); - - scene.on('loaded', () => { - const logo1 = new Logo({ - position: 'leftbottom', - }); - scene.addControl(logo1); - - setTimeout(() => { - logo1.setOptions({ - img: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', - href: '', - style: 'height: 40px; width: 40px;', - }); - }, 1000); - - const logo2 = new Logo({ - position: 'rightbottom', - href: undefined, - }); - scene.addControl(logo2); - - const logo3 = new Logo({ - position: 'topright', - style: 'height: 40px; width: 40px;', - img: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', - href: '', - }); - scene.addControl(logo3); - - const logo4 = new Logo({ - position: 'topleft', - style: 'height: 40px; width: 40px;', - img: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', - href: 'https://ant.design/index-cn', - }); - scene.addControl(logo4); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/mapTheme.md b/legacy/dev-demos/src/component/control/mapTheme.md deleted file mode 100644 index 5a673f7d32d..00000000000 --- a/legacy/dev-demos/src/component/control/mapTheme.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 地图样式 -order: 12 ---- - - diff --git a/legacy/dev-demos/src/component/control/mapTheme.tsx b/legacy/dev-demos/src/component/control/mapTheme.tsx deleted file mode 100644 index e20c2327155..00000000000 --- a/legacy/dev-demos/src/component/control/mapTheme.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { GaodeMap, MapTheme, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 6.45, - style: 'normal', - }), - // map: new GaodeMap({ - // style: 'dark', - // center: [120, 30], - // pitch: 0, - // zoom: 6.45, - // }), - // map: new GaodeMap({ - // style: 'dark', - // center: [120, 30], - // pitch: 0, - // zoom: 6.45, - // }), - }); - - newScene.on('loaded', () => { - const newControl = new MapTheme({ - // defaultValue: 'normal', - }); - newScene.addControl(newControl); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/mouseLocation.md b/legacy/dev-demos/src/component/control/mouseLocation.md deleted file mode 100644 index fb8b7e5b3c7..00000000000 --- a/legacy/dev-demos/src/component/control/mouseLocation.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 鼠标经纬度 -order: 12 ---- - - diff --git a/legacy/dev-demos/src/component/control/mouseLocation.tsx b/legacy/dev-demos/src/component/control/mouseLocation.tsx deleted file mode 100644 index 5e9d719342e..00000000000 --- a/legacy/dev-demos/src/component/control/mouseLocation.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { GaodeMap, MouseLocation, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const newControl = new MouseLocation({}); - newScene.addControl(newControl); - // const zoom = new Zoom({ - // position: 'topright', - // }); - // newScene.addControl(zoom); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/navigation.md b/legacy/dev-demos/src/component/control/navigation.md deleted file mode 100644 index 3e88b434aa3..00000000000 --- a/legacy/dev-demos/src/component/control/navigation.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 定位 -order: 10 ---- - - diff --git a/legacy/dev-demos/src/component/control/navigation.tsx b/legacy/dev-demos/src/component/control/navigation.tsx deleted file mode 100644 index 0cddc4ae8b9..00000000000 --- a/legacy/dev-demos/src/component/control/navigation.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { GaodeMap, GeoLocate, Scene } from '@antv/l7'; -import gcoord from 'gcoord'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: [120, 30], - pitch: 0, - zoom: 6.45, - preserveDrawingBuffer: true, - // WebGLParams: { - // preserveDrawingBuffer: true, - // }, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const newControl = new GeoLocate({ - transform: (position) => { - return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02); - }, - }); - newScene.addControl(newControl); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/position.md b/legacy/dev-demos/src/component/control/position.md deleted file mode 100644 index 2a367348edf..00000000000 --- a/legacy/dev-demos/src/component/control/position.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 控件位置 -order: 1 ---- - - diff --git a/legacy/dev-demos/src/component/control/position.tsx b/legacy/dev-demos/src/component/control/position.tsx deleted file mode 100644 index 128a03f815e..00000000000 --- a/legacy/dev-demos/src/component/control/position.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import type { - IControlOption} from '@antv/l7'; -import { - GaodeMap, - Logo, - MouseLocation, - Scale, - Scene, -} from '@antv/l7'; -import type { FunctionComponent} from 'react'; -import React, { useEffect, useState } from 'react'; - -const Demo: FunctionComponent = () => { - const [scene, setScene] = useState(null); - const [controlList, setControlList] = useState([]); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - logoVisible: false, - }); - setScene(newScene); - - newScene.on('loaded', () => { - function createTestControl(position: IControlOption['position']) { - newScene.addControl( - new Logo({ - position, - }), - ); - newScene.addControl( - new Scale({ - position, - }), - ); - const mouseLocation = new MouseLocation({ - position, - }); - newScene.addControl(mouseLocation); - setControlList((list) => [...list, mouseLocation]); - } - - createTestControl('topleft'); - createTestControl('topright'); - createTestControl('bottomleft'); - createTestControl('bottomright'); - - createTestControl('lefttop'); - createTestControl('leftbottom'); - createTestControl('righttop'); - createTestControl('rightbottom'); - - createTestControl('topcenter'); - createTestControl('leftcenter'); - createTestControl('rightcenter'); - createTestControl('bottomcenter'); - - // if (containerRef.current) { - // scene.addControl( - // new Logo({ - // position: containerRef.current, - // }), - // ); - // } - }); - }, []); - return ( - <> -
- -
-
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/remove.md b/legacy/dev-demos/src/component/control/remove.md deleted file mode 100644 index a3b3ddfeee1..00000000000 --- a/legacy/dev-demos/src/component/control/remove.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 插入/移除 -order: 4 ---- - - diff --git a/legacy/dev-demos/src/component/control/remove.tsx b/legacy/dev-demos/src/component/control/remove.tsx deleted file mode 100644 index a1efe84431c..00000000000 --- a/legacy/dev-demos/src/component/control/remove.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { GaodeMap, Scene, Zoom } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - const [scene, setScene] = useState(null); - const [zoom, setZoom] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - setScene(newScene); - }); - }, []); - - return ( - <> - - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/scale.md b/legacy/dev-demos/src/component/control/scale.md deleted file mode 100644 index b2a456ddcbf..00000000000 --- a/legacy/dev-demos/src/component/control/scale.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 比例尺 -order: 14 ---- - - diff --git a/legacy/dev-demos/src/component/control/scale.tsx b/legacy/dev-demos/src/component/control/scale.tsx deleted file mode 100644 index 00ea71d4005..00000000000 --- a/legacy/dev-demos/src/component/control/scale.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { GaodeMap, Scale, Scene } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - const [control, setControl] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - // map: new GaodeMap({ - // center: [120, 30], - // pitch: 0, - // zoom: 6.45, - // }), - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 6.45, - style: 'normal', - }), - }); - - newScene.on('loaded', () => { - const scale = new Scale({ - metric: true, - position: 'rightbottom', - // imperial: true, - }); - // const zoom = new Zoom({ - // position: 'rightbottom', - // }); - newScene.addControl(scale); - // newScene.addControl(zoom); - setControl(scale); - }); - }, []); - - return ( - <> - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/setOptions.md b/legacy/dev-demos/src/component/control/setOptions.md deleted file mode 100644 index 431154b3fea..00000000000 --- a/legacy/dev-demos/src/component/control/setOptions.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 更新配置 -order: 2 ---- - - diff --git a/legacy/dev-demos/src/component/control/setOptions.tsx b/legacy/dev-demos/src/component/control/setOptions.tsx deleted file mode 100644 index a75599a88c6..00000000000 --- a/legacy/dev-demos/src/component/control/setOptions.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { GaodeMap, PositionType, Scene, Zoom } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const POSITION_LIST = Object.values(PositionType); - -const Demo: FunctionComponent = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [zoom, setZoom] = useState(() => { - return new Zoom({ - position: 'topleft', - }); - }); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - // logoVisible: false, - }); - - scene.on('loaded', () => { - scene.addControl(zoom); - }); - }, []); - - const onChangePosition = () => { - const randomIndex = Math.floor(Math.random() * POSITION_LIST.length); - zoom.setOptions({ - position: POSITION_LIST[randomIndex], - className: `random-class-${Math.floor(Math.random() * 100)}`, - }); - }; - - return ( - <> - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/swipe.md b/legacy/dev-demos/src/component/control/swipe.md deleted file mode 100644 index 4c20320c682..00000000000 --- a/legacy/dev-demos/src/component/control/swipe.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 卷帘 -order: 15 ---- - - diff --git a/legacy/dev-demos/src/component/control/swipe.tsx b/legacy/dev-demos/src/component/control/swipe.tsx deleted file mode 100644 index d46aa72ef5c..00000000000 --- a/legacy/dev-demos/src/component/control/swipe.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { - GaodeMap, - HeatmapLayer, - PointLayer, - RasterLayer, - Scene, - Swipe, -} from '@antv/l7'; -import type { FunctionComponent} from 'react'; -import React, { useEffect, useState } from 'react'; - -const Demo: FunctionComponent = () => { - const [scene, setScene] = useState(null); - const [swipe, setSwipe] = useState(null); - const [isAddSwipe, setIsAddSwipe] = useState(false); - const [orientation, setOrientation] = useState<'vertical' | 'horizontal'>( - 'vertical', - ); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - center: [127.5671666579043, 7.445038892195569], - zoom: 2.632456779444394, - style: 'normal', - }), - }); - // 地形地图图层 - const leftLayer1 = new RasterLayer({}).source( - 'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', - { - parser: { - maxZoom: 21, - minZoom: 3, - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }, - ); - // 影像地图图层 - const rightLayer1 = new RasterLayer({}).source( - 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', - { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }, - ); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const leftLayer2 = new PointLayer({}) - .source(data) - .shape('circle') - .size('mag', [1, 25]) - .color('#5B8FF9') - .style({ - strokeWidth: 3, - }); - const rightLayer2 = new HeatmapLayer({}) - .source(data) - .shape('heatmap') - .size('mag', [0, 1.0]) - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(leftLayer1); - scene.addLayer(rightLayer1); - scene.addLayer(leftLayer2); - scene.addLayer(rightLayer2); - - const swipe = new Swipe({ - orientation: 'vertical', - ratio: 0.5, - layers: [leftLayer1, leftLayer2], - rightLayers: [rightLayer1, rightLayer2], - }); - scene.addControl(swipe); - setSwipe(swipe); - setIsAddSwipe(true); - }); - }); - setScene(scene); - }, []); - - return ( - <> - - - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/control/zoom.md b/legacy/dev-demos/src/component/control/zoom.md deleted file mode 100644 index d5783c483ba..00000000000 --- a/legacy/dev-demos/src/component/control/zoom.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 缩放 -order: 13 ---- - - diff --git a/legacy/dev-demos/src/component/control/zoom.tsx b/legacy/dev-demos/src/component/control/zoom.tsx deleted file mode 100644 index 0451d817519..00000000000 --- a/legacy/dev-demos/src/component/control/zoom.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { GaodeMap, Scene, Zoom } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - const [control, setControl] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 6.45, - }), - }); - - newScene.on('loaded', () => { - const newControl = new Zoom({ - showZoom: true, - }); - newScene.addControl(newControl); - setControl(newControl); - }); - }, []); - - return ( - <> - - - - -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/marker/marker.md b/legacy/dev-demos/src/component/marker/marker.md deleted file mode 100644 index 7431c9bf872..00000000000 --- a/legacy/dev-demos/src/component/marker/marker.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Marker -order: 1 ---- - - - diff --git a/legacy/dev-demos/src/component/marker/marker.tsx b/legacy/dev-demos/src/component/marker/marker.tsx deleted file mode 100644 index 54b073d3746..00000000000 --- a/legacy/dev-demos/src/component/marker/marker.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { GaodeMap, Marker, Scene } from '@antv/l7'; -import React, { useEffect, useState } from 'react'; - -export default () => { - const [marker, setMarker] = useState(undefined); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.438579, 31.246384], - pitch: 0, - zoom: 10, - style: 'normal', - }), - }); - - - scene.on('loaded', () => { - const marker = new Marker({ - draggable: true, - }); - marker.setLnglat({ - lng: 121.438579, - lat: 31.246384, - }); - scene.addMarker(marker); - setScene(scene); - setMarker(marker); - - marker.on('dragstart', e => console.log('dragstart', e)); - marker.on('dragging', e => console.log('dragging', e)); - marker.on('dragend', e => console.log('dragend', e)); - }); - }, []); - - const enableDrag = () => { - marker?.setDraggable(true); - }; - - const disableDrag = () => { - marker?.setDraggable(false); - }; - - return ( - <> - - -
- - ); -}; diff --git a/legacy/dev-demos/src/component/marker/markerLayer.md b/legacy/dev-demos/src/component/marker/markerLayer.md deleted file mode 100644 index 0f068d6591c..00000000000 --- a/legacy/dev-demos/src/component/marker/markerLayer.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: MarkerLayer -order: 2 ---- - - diff --git a/legacy/dev-demos/src/component/marker/markerLayer.tsx b/legacy/dev-demos/src/component/marker/markerLayer.tsx deleted file mode 100644 index 3e886619641..00000000000 --- a/legacy/dev-demos/src/component/marker/markerLayer.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { GaodeMap, Marker, MarkerLayer, Scene } from '@antv/l7'; -import { randomPoint } from '@turf/turf'; -import { mean } from 'lodash-es'; -import React, { useEffect, useState } from 'react'; - -export default () => { - const [scene, setScene] = useState(undefined); - const [markerLayer, setMarkerLayer] = useState( - undefined, - ); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.438579, 31.246384], - pitch: 0, - zoom: 10, - style: 'normal', - }), - }); - setScene(scene); - - scene.on('loaded', () => { - const markerLayer = new MarkerLayer({ - cluster: true, - clusterOption: { - element: (cars) => { - const rotation = - cars.properties.rotation || - mean( - cars.properties.clusterData?.map( - (item) => item.properties.rotation, - ), - ) || - 0; - const el = document.createElement('div'); - el.className = `markerDivClass`; - el.innerHTML = `
- -
`; - return el; - }, - // 触发聚合的范围 - radius: 40, - }, - }); - const bounds = scene.getBounds(); - - randomPoint(100, { - bbox: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]], - }).features.forEach((point) => { - const coordinates = point.geometry.coordinates; - const marker = new Marker({}).setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - marker.setExtData({ - rotation: Math.round(Math.random() * 360), - }); - markerLayer.addMarker(marker); - }); - scene.addMarkerLayer(markerLayer); - setMarkerLayer(markerLayer); - }); - }, []); - - const onAddMarker = () => { - const bounds = scene?.getBounds(); - if (bounds && markerLayer && scene) { - const point = randomPoint(1, { - bbox: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]], - }); - const coordinates = point.features[0].geometry.coordinates; - const marker = new Marker({}).setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - markerLayer.addMarker(marker); - } - }; - - const onRemoveMarker = () => { - const markers = markerLayer?.getOriginMarkers(); - markerLayer?.removeMarker(markers[markers.length - 1]); - }; - - return ( -
- - -
-
- ); -}; diff --git a/legacy/dev-demos/src/component/popup/layerPopup.md b/legacy/dev-demos/src/component/popup/layerPopup.md deleted file mode 100644 index 45c8b759573..00000000000 --- a/legacy/dev-demos/src/component/popup/layerPopup.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 图层气泡 -order: 2 ---- - - diff --git a/legacy/dev-demos/src/component/popup/layerPopup.tsx b/legacy/dev-demos/src/component/popup/layerPopup.tsx deleted file mode 100644 index 13b58498193..00000000000 --- a/legacy/dev-demos/src/component/popup/layerPopup.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { - GaodeMap, - LayerPopup, - LineLayer, - PointLayer, - PolygonLayer, - Scene, -} from '@antv/l7'; -import { featureCollection, point } from '@turf/turf'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent } from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [scene, setScene] = useState(null); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [popup, setPopup] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120.104697, 30.260704], - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - newScene.on('loaded', () => { - const pointLayer = new PointLayer({ - name: 'pointLayer', - }); - pointLayer - .source( - featureCollection([ - point([120.105697, 30.260704], { - name: '测试点1', - lng: 120.104697, - lat: 30.260704, - }), - point([120.103697, 30.260704], { - name: '测试点1', - lng: 120.104697, - lat: 30.260704, - }), - ]), - ) - .color('#ffffff') - .shape('circle') - .size(10); - const polygonLayer = new PolygonLayer({ - name: 'polygonLayer', - }); - polygonLayer - .source(featureCollection([])) - .color('rgba(255,255,255,0.2)') - .shape('fill'); - - const lineString = new LineLayer({ - name: 'lineLayer', - }); - lineString - .source( - featureCollection([ - { - type: 'Feature', - properties: { - name: '测试线3', - }, - geometry: { - type: 'LineString', - coordinates: [ - [120.103615, 30.262026], - [120.103172, 30.261771], - [120.102697, 30.261934], - ], - }, - }, - ]), - ) - .size(6) - .color('#00ff00'); - - fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json') - .then((res) => res.json()) - .then((data) => { - polygonLayer.setData(data); - }); - newScene.addLayer(pointLayer); - newScene.addLayer(polygonLayer); - newScene.addLayer(lineString); - const newPopup = new LayerPopup({ - closeButton: true, - items: [ - { - title: (e) => { - const h1 = document.createElement('h1'); - h1.innerText = e.name; - return h1; - }, - layer: 'pointLayer', - fields: [ - { - field: 'name', - formatField: () => { - return '名称'; - }, - }, - 'lng', - 'lat', - ], - }, - { - title: '线图层', - layer: 'lineLayer', - fields: ['name'], - }, - { - title: '面图层', - layer: 'polygonLayer', - fields: ['name', 'lines'], - }, - ], - trigger: 'hover', - closeOnClick: true, - }); - // pointLayer.on('mousemove', (e) => { - // console.log('point mousemove', e); - // }); - // polygonLayer.on('mousemove', (e) => { - // console.log('polygon mousemove', e); - // }); - // lineString.on('mousemove', (e) => { - // console.log('line mousemove', e); - // }); - - newScene.addPopup(newPopup); - setPopup(newPopup); - setScene(newScene); - }); - }, []); - - return ( - <> -
- - - -
-
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/popup/popup.md b/legacy/dev-demos/src/component/popup/popup.md deleted file mode 100644 index acfe5fef7db..00000000000 --- a/legacy/dev-demos/src/component/popup/popup.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 气泡 -order: 1 ---- - - diff --git a/legacy/dev-demos/src/component/popup/popup.tsx b/legacy/dev-demos/src/component/popup/popup.tsx deleted file mode 100644 index 56f1add5d27..00000000000 --- a/legacy/dev-demos/src/component/popup/popup.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import { - anchorType, - Fullscreen, - GaodeMap, - PointLayer, - Popup, - Scene, -} from '@antv/l7'; -import { featureCollection, point } from '@turf/turf'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - const [scene, setScene] = useState(null); - const [popup, setPopup] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120.104697, 30.260704], - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const newPopup = new Popup({ - // closeOnClick: true, - closeOnEsc: true, - lngLat: { - lng: 120.104697, - lat: 30.260704, - }, - anchor: 'bottom-right', - // followCursor: true, - title: - '算啦就是老地方上的分萨迪克浪费撒东方巨龙凯撒付款流水阿帆十多分数据福克斯阿道夫阿斯蒂芬', - html: '算啦就是老地方上的分萨迪克浪费撒东方巨龙凯撒付款流水阿帆十多分数据福克斯阿道夫阿斯蒂芬', - }); - newScene.addPopup(newPopup); - - const pointLayer = new PointLayer(); - pointLayer - .source(featureCollection([point([120.104697, 30.260704])])) - .color('#ff0000') - .size(10); - - newScene.addLayer(pointLayer); - setPopup(newPopup); - - const fullscreen = new Fullscreen(); - newScene.addControl(fullscreen); - - setScene(newScene); - }); - }, []); - - return ( - <> -
- - - - - - - - - - - - - - - - - - - - -
-
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/scene/boxSelect.md b/legacy/dev-demos/src/component/scene/boxSelect.md deleted file mode 100644 index 40f65759d51..00000000000 --- a/legacy/dev-demos/src/component/scene/boxSelect.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Scene -order: 3 ---- - - diff --git a/legacy/dev-demos/src/component/scene/boxSelect.tsx b/legacy/dev-demos/src/component/scene/boxSelect.tsx deleted file mode 100644 index 465328abedf..00000000000 --- a/legacy/dev-demos/src/component/scene/boxSelect.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { GaodeMap, Scene } from '@antv/l7'; -import React, { useState } from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent} from 'react'; -import { useEffect } from 'react'; - -const Demo: FunctionComponent = () => { - const [scene, setScene] = useState(null); - - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120.104697, 30.260704], - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - setScene(newScene); - - newScene.on('selectstart', (...params) => { - // tslint:disable-next-line:no-console - console.log('selectstart', ...params); - }); - - newScene.on('selecting', (...params) => { - // tslint:disable-next-line:no-console - console.log('selecting', ...params); - }); - - newScene.on('selectend', (...params) => { - // tslint:disable-next-line:no-console - console.log('selectend', ...params); - }); - }); - }, []); - - return ( - <> -
- - -
-
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/sync-scene/helper.ts b/legacy/dev-demos/src/component/sync-scene/helper.ts deleted file mode 100644 index d67e4824109..00000000000 --- a/legacy/dev-demos/src/component/sync-scene/helper.ts +++ /dev/null @@ -1,147 +0,0 @@ -/* - * @name : 地图状态同步方法 - * @Description : 用于将多个地图动作、视角同步 - * @Principle : 监听所有地图场景的 mapmove、zoomchange、rotate 等事件。触发时，解绑自己事件 => 同步所有的地图状态 => 重新添加监听 - */ - -import type { Scene } from '@antv/l7'; -import { isNumber } from 'lodash-es'; -import type { ISyncSceneOptions } from './types'; -interface GaodeMap { - setCenter: (center: [number, number], immediately?: boolean) => void; - setZoom: (zoom: number, immediately?: boolean) => void; - setRotation: (rotation: number, immediately?: boolean) => void; - setPitch: (pitch: number, immediately?: boolean) => void; -} - -// 通过 Scene 获取到地图引擎类型 -function getMapType(scene: Scene) { - const mapVersion = scene.getMapService().version; - return mapVersion?.includes('MAPBOX') ? 'Mapbox' : 'Gaode'; -} - -// 根据不同地图引擎类型，设置地图的状态「缩放层级、地图中心点、旋转角、倾角」 -const updateSceneStatus = ( - scene: Scene, - status: { - zoom?: number; - center?: [number, number]; - pitch?: number; - rotation?: number; - }, -) => { - const mapType = getMapType(scene); - const { zoom, center, pitch, rotation } = status; - if (mapType === 'Gaode') { - const map = scene?.map as GaodeMap; - // 高德地图关闭动画效果 - if (center) map.setCenter(center, true); - if (isNumber(zoom)) map?.setZoom(zoom + 1, true); - if (isNumber(rotation)) map?.setRotation(360 - rotation, true); - if (isNumber(pitch)) map?.setPitch(pitch, true); - } else { - if (isNumber(zoom)) scene?.setZoom(zoom); - if (center) scene?.setCenter(center); - if (isNumber(rotation)) scene.setRotation(rotation); - if (isNumber(pitch)) scene?.setPitch(pitch); - } -}; - -/** - * - * @param scenes l7实例化的 scene 的数组 - * @param options - * @param options.zoomGap number 同步的缩放层级差距 - * @param options.mainIndex number 主场景的数组索引，用于搭配 zoomGap - * @returns Function 清除同步状态的监听函数。 - */ -export function syncScene(scenes: Scene[], options?: ISyncSceneOptions) { - const { zoomGap = 0, mainIndex = 0 } = options ?? {}; - const listeners: (() => void)[] = []; - let handlers: (() => void)[] = []; - - // 添加地图事件监听 - const listen = (index: number) => { - const scene = scenes[index]; - scene.on('mapmove', handlers[index]); - // Gaode 地图调整倾角和旋转角的事件 - scene.on('dragging', handlers[index]); - // Mapbox 地图调整倾角和旋转角的事件 - scene.on('rotate', handlers[index]); - scene.on('zoomchange', handlers[index]); - - return () => { - scene.off('mapmove', handlers[index]); - scene.off('dragging', handlers[index]); - scene.off('zoomchange', handlers[index]); - scene.off('rotate', handlers[index]); - }; - }; - - const clearListener = () => { - listeners?.forEach((call: any) => call()); - listeners.length = 0; - }; - - // 根据指定索引的 scene 同步其他 scene 状态 - const moveScenePosition = (index: number) => { - const movedScene = scenes[index]; - const center = movedScene.getCenter(); - const zoom = movedScene.getZoom(); - const rotation = movedScene.getRotation(); - const pitch = movedScene.getPitch(); - /** - * 根据当前地图是否为主地图，分两种情况 - * 1. 非主地图，则其他非主地图 zoom 设置当前 zoom ，主地图设置为 zoom - zoomGap - * 2. 主地图，则其他非主地图 zoom 设置为 zoom + zoomGap - */ - const isMovedMainScene = index === mainIndex; - scenes.forEach((scene, num) => { - if (num !== index) { - // 当前需要同步的状态是不是主地图 - const sceneZoom = isMovedMainScene ? zoom + zoomGap : num === mainIndex ? zoom - zoomGap : zoom; - updateSceneStatus(scene, { - zoom: sceneZoom, - center: [center.lng, center.lat], - rotation, - pitch, - }); - } - }); - }; - - /** - * 地图同步处理器 - * 1. 清空监听 - * 2. 同步指定地图状态 - * 3. 重新初始化地图监听 - * @param index - */ - const syncHandler = (index: number) => { - clearListener(); - moveScenePosition(index); - initListener(); - }; - - function initListener() { - handlers = scenes.map((value, index) => { - // 每个地图有自己的状态同步函数 - return syncHandler.bind(null, index); - }); - scenes.forEach((scene, index) => { - // 给每个地图绑定监听 - listeners.push(listen(index)); - }); - } - - // 初始化,先将所有地图状态同步。 - scenes.forEach((value, index) => { - moveScenePosition(index); - }); - - // 添加地图事件监听 - initListener(); - - // 返回清除绑定的监听事件函数 - return clearListener; -} diff --git a/legacy/dev-demos/src/component/sync-scene/syncScene.tsx b/legacy/dev-demos/src/component/sync-scene/syncScene.tsx deleted file mode 100644 index ea2ca62a8a9..00000000000 --- a/legacy/dev-demos/src/component/sync-scene/syncScene.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { GaodeMap, Scene } from '@antv/l7'; -import React from 'react'; -// tslint:disable-next-line:no-duplicate-imports -import type { FunctionComponent } from 'react'; -import { useEffect } from 'react'; -import { syncScene } from './helper'; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'dark', - center: [120.104697, 30.260704], - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - const newScene1 = new Scene({ - id: 'map1', - map: new GaodeMap({ - style: 'dark', - center: [120.104697, 30.260704], - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - syncScene([newScene, newScene1]); - }, []); - - return ( -
-
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/component/sync-scene/syncSene.md b/legacy/dev-demos/src/component/sync-scene/syncSene.md deleted file mode 100644 index b04c3f11d10..00000000000 --- a/legacy/dev-demos/src/component/sync-scene/syncSene.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 同步地图 -order: 4 ---- - - diff --git a/legacy/dev-demos/src/component/sync-scene/types.ts b/legacy/dev-demos/src/component/sync-scene/types.ts deleted file mode 100644 index e0d4079a1d7..00000000000 --- a/legacy/dev-demos/src/component/sync-scene/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { Scene } from '@antv/l7'; - -export interface ISyncSceneOptions { - zoomGap?: number; - mainIndex?: number; -} -export interface SyncSceneProps { - scenes: Scene[]; - options?: ISyncSceneOptions; -} diff --git a/legacy/dev-demos/src/draw/control.md b/legacy/dev-demos/src/draw/control.md deleted file mode 100644 index dc4ca106a8b..00000000000 --- a/legacy/dev-demos/src/draw/control.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 绘制组件 -order: 3 ---- - - diff --git a/legacy/dev-demos/src/draw/demo/destroy.tsx b/legacy/dev-demos/src/draw/demo/destroy.tsx deleted file mode 100644 index c533206a036..00000000000 --- a/legacy/dev-demos/src/draw/demo/destroy.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Scene } from '@antv/l7'; -import { DrawPolygon } from '@antv/l7-draw'; -import { Map } from '@antv/l7-maps'; -import { Button, Modal } from 'antd'; -import React, { useEffect, useState } from 'react'; - -const id = String(Math.random()); - -const Demo: React.FC = () => { - // const [circleDrawer, setCircleDrawer] = useState(null); - - useEffect(() => { - const scene = new Scene({ - id, - map: new Map({ - center: [120.151634, 30.244831], - pitch: 0, - zoom: 10, - }), - }); - let drawPolygon: DrawPolygon | undefined; - scene.on('loaded', () => { - - // 实例化 DrawControl - drawPolygon = new DrawPolygon(scene, { - distanceOptions: {}, - }); - // scene.addLayer(layer1); - // scene.addLayer(layer2); - drawPolygon.enable(); - }); - - return () => { - // drawPolygon?.destroy(); - scene.destroy(); - }; - }, []); - - return ( -
-
-
- ); -}; - -const Default = () => { - const [visible, setVisible] = useState(false); - return ( - <> - setVisible(false)} - > - - - - - ); -}; - -export default Default; \ No newline at end of file diff --git a/legacy/dev-demos/src/draw/demo/draw.tsx b/legacy/dev-demos/src/draw/demo/draw.tsx deleted file mode 100644 index 95500deebea..00000000000 --- a/legacy/dev-demos/src/draw/demo/draw.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Scene } from '@antv/l7'; -import { DrawPolygon } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; - -const id = String(Math.random()); - -const Demo: React.FC = () => { - const [, setPolygonDrawer] = useState(null); - - useEffect(() => { - const scene = new Scene({ - id, - map: new GaodeMap({ - center: [120.151634, 30.244831], - pitch: 0, - style: 'dark', - zoom: 10, - }), - }); - scene.on('loaded', () => { - const drawer = new DrawPolygon(scene, { - areaOptions: {}, - // liveUpdate: true, - }); - setPolygonDrawer(drawer); - console.log(drawer); - drawer.enable(); - }); - }, []); - - return ( -
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/draw/demo/drawControl.tsx b/legacy/dev-demos/src/draw/demo/drawControl.tsx deleted file mode 100644 index f636912e47f..00000000000 --- a/legacy/dev-demos/src/draw/demo/drawControl.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { RasterLayer, Scene } from '@antv/l7'; -import { DrawControl } from '@antv/l7-draw'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -const id = String(Math.random()); - -const Demo: React.FC = () => { - // const [circleDrawer, setCircleDrawer] = useState(null); - - useEffect(() => { - const scene = new Scene({ - id, - map: new Map({ - center: [120.151634, 30.244831], - pitch: 0, - zoom: 10, - }), - }); - scene.on('loaded', () => { - const url1 = - 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const url2 = - 'https://tiles{1-3}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const layer1 = new RasterLayer({ - zIndex: -10, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - }, - }); - - const layer2 = new RasterLayer({ - zIndex: -9, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - }, - }); - // 实例化 DrawControl - const drawControl = new DrawControl(scene, { - defaultActiveType: 'point', - commonDrawOptions: { - distanceOptions: { - - } - } - - }); - scene.addLayer(layer1); - scene.addLayer(layer2); - - // 将 Control 添加至地图中 - scene.addControl(drawControl); - }); - }, []); - - return ( -
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/draw/demo/drawline.tsx b/legacy/dev-demos/src/draw/demo/drawline.tsx deleted file mode 100644 index 14368fe682d..00000000000 --- a/legacy/dev-demos/src/draw/demo/drawline.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Scene } from '@antv/l7'; -import { DrawLine } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; - -const id = String(Math.random()); - -const Demo: React.FC = () => { - const [, setLineDrawer] = useState(null); - - useEffect(() => { - const scene = new Scene({ - id, - map: new GaodeMap({ - center: [120.151634, 30.244831], - pitch: 0, - style: 'dark', - zoom: 10, - }), - }); - scene.on('loaded', () => { - const drawer = new DrawLine(scene, { - // liveUpdate: true, - }); - setLineDrawer(drawer); - console.log(drawer); - drawer.enable(); - }); - }, []); - - return ( -
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/draw/demo/drawpolygon.tsx b/legacy/dev-demos/src/draw/demo/drawpolygon.tsx deleted file mode 100644 index de288617bd7..00000000000 --- a/legacy/dev-demos/src/draw/demo/drawpolygon.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Marker, PointLayer, Scene } from '@antv/l7'; -import { DrawEvent, DrawPoint } from '@antv/l7-draw'; -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; - -const id = String(Math.random()); - -const Demo: React.FC = () => { - const [, setLineDrawer] = useState(null); - - useEffect(() => { - const scene = new Scene({ - id, - map: new Mapbox({ - center: [116.39153415221631, 39.90678816789074], - pitch: 0, - style: 'mapbox://styles/mapbox/streets-v12', - zoom: 22, - token: - 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA', - }), - }); - - scene.on('loaded', () => { - const point = new PointLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [116.39153415221631, 39.90678816789074], - type: 'Point', - }, - }, - ], - }) - .color('red') - .shape('circle') - .size(5); - - const marker = new Marker().setLnglat({ - lng: 116.39153415221631, - lat: 39.90678816789074, - }); - scene.addMarker(marker); - scene.addLayer(point); - const drawer = new DrawPoint(scene, { - // liveUpdate: true, - }); - scene.on('zoomend', () => { - console.log(scene.getZoom()); - }); - - setLineDrawer(drawer); - drawer.enable(); - drawer.on(DrawEvent.Add, (newPoint, pointList) => { - console.log('add', newPoint, pointList); - }); - }); - }, []); - - return ( -
-
-
- ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/draw/destroy.md b/legacy/dev-demos/src/draw/destroy.md deleted file mode 100644 index bf6d669ebf2..00000000000 --- a/legacy/dev-demos/src/draw/destroy.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 图层销毁 -order: 3 -group: - path: /polygon - order: 3 ---- - - diff --git a/legacy/dev-demos/src/draw/line.md b/legacy/dev-demos/src/draw/line.md deleted file mode 100644 index 2cd7cf7d10a..00000000000 --- a/legacy/dev-demos/src/draw/line.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 绘制线 -order: 3 -group: - path: /polygon - order: 3 ---- - - diff --git a/legacy/dev-demos/src/draw/line_area.md b/legacy/dev-demos/src/draw/line_area.md deleted file mode 100644 index 6029fe4375d..00000000000 --- a/legacy/dev-demos/src/draw/line_area.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 展示距离和面积 -order: 3 -group: - path: /polygon - title: 图形绘制 - order: 3 ---- - - diff --git a/legacy/dev-demos/src/draw/polygon.md b/legacy/dev-demos/src/draw/polygon.md deleted file mode 100644 index 1a64562d044..00000000000 --- a/legacy/dev-demos/src/draw/polygon.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 绘制面 -order: 3 -group: - path: /polygon - order: 3 ---- - - diff --git a/legacy/dev-demos/src/features/canvasLayer/canvas2d.md b/legacy/dev-demos/src/features/canvasLayer/canvas2d.md deleted file mode 100644 index 2e5ef0ec227..00000000000 --- a/legacy/dev-demos/src/features/canvasLayer/canvas2d.md +++ /dev/null @@ -1,3 +0,0 @@ -### CanvasLayer - canvas2d - - diff --git a/legacy/dev-demos/src/features/canvasLayer/canvas2d.tsx b/legacy/dev-demos/src/features/canvasLayer/canvas2d.tsx deleted file mode 100644 index bfe1718d32b..00000000000 --- a/legacy/dev-demos/src/features/canvasLayer/canvas2d.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { CanvasLayer, GaodeMap, PointLayer, Scene } from '@antv/l7'; -import * as turf from '@turf/turf'; -import type { FunctionComponent } from 'react'; -import React, { useEffect } from 'react'; - -const POSITION = [120.104697, 30.260704] as [number, number]; - -const Demo: FunctionComponent = () => { - useEffect(() => { - const newScene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'normal', - center: POSITION, - pitch: 0, - zoom: 15, - }), - // logoVisible: false, - }); - - newScene.on('loaded', () => { - const canvasLayer = new CanvasLayer({ - zIndex: 100, - }); - canvasLayer.draw(({ ctx, container, utils }) => { - ctx.clearRect(0, 0, container.width, container.height); - ctx.fillStyle = 'blue'; - const { x, y } = utils.lngLatToContainer(POSITION); - const realSize = 36 * window.devicePixelRatio; - ctx.fillRect(x - realSize / 2, y - realSize / 2, realSize, realSize); - }); - newScene.addLayer(canvasLayer); - - const pointLayer = new PointLayer({}); - pointLayer - .source(turf.featureCollection([turf.point(POSITION)])) - .color('red') - .shape('circle') - .size(30); - newScene.addLayer(pointLayer); - - pointLayer.on('click', (e) => { - console.log('layer click', e); - }); - }); - }, []); - - return ( - <> -
- - ); -}; - -export default Demo; diff --git a/legacy/dev-demos/src/features/citybuilding/amap1.md b/legacy/dev-demos/src/features/citybuilding/amap1.md deleted file mode 100644 index e42ccb00fce..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/amap1.md +++ /dev/null @@ -1,2 +0,0 @@ -### building - amap1 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/citybuilding/amap1.tsx b/legacy/dev-demos/src/features/citybuilding/amap1.tsx deleted file mode 100644 index b64ae29e6c8..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/amap1.tsx +++ /dev/null @@ -1,125 +0,0 @@ -// @ts-ignore -import { CityBuildingLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - style: 'dark', - center: [120.145, 30.238915], - pitch: 60, - zoom: 13.2, - }), - }); - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', - ).then(async (res) => { - const pointLayer = new CityBuildingLayer(); - pointLayer - .source(await res.json()) - .size('floor', [0, 500]) - .color('rgba(242,246,250,1.0)') - .animate({ - enable: !process.env.CI, - }) - .active({ - color: '#0ff', - mix: 0.5, - }) - .style({ - opacity: 0.7, - baseColor: 'rgb(16, 16, 16)', - windowColor: 'rgb(30, 60, 89)', - brightColor: 'rgb(255, 176, 38)', - sweep: { - enable: true, - sweepRadius: 2, - sweepColor: '#1990FF', - sweepSpeed: 0.5, - sweepCenter: [120.145319, 30.238915], - }, - }); - scene.addLayer(pointLayer); - }); - - // fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json', - // ) - // .then((data) => data.json()) - // .then(({ lakeBorderData, lakeData, landData }) => { - // const lakeLayer = new PolygonLayer() - // .source(lakeData) - // .shape('fill') - // .color('#1E90FF') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'out', // in - out - // }, - // }); - // const landLayer = new PolygonLayer() - // .source(landData) - // .shape('fill') - // .color('#3CB371') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // const lakeBorderLayer = new PolygonLayer() - // .source(lakeBorderData) - // .shape('fill') - // .color('#ccc') - // .style({ - // opacity: 0.5, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // scene.addLayer(lakeLayer); - // scene.addLayer(lakeBorderLayer); - // scene.addLayer(landLayer); - // }); - - // fetch( - // 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', - // ) - // .then((res) => res.json()) - // .then((data) => { - // const layer = new LineLayer({ - // zIndex: 0, - // depth: true, - // }) - // .source(data) - // .size(1) - // .shape('line') - // .color('#1990FF') - // .animate({ - // interval: 1, // 间隔 - // duration: 2, // 持续时间，延时 - // trailLength: 2, // 流线长度 - // }); - // scene.addLayer(layer); - // }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/citybuilding/amap2.md b/legacy/dev-demos/src/features/citybuilding/amap2.md deleted file mode 100644 index 7357b7f283f..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/amap2.md +++ /dev/null @@ -1,2 +0,0 @@ -### building - amap2 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/citybuilding/amap2.tsx b/legacy/dev-demos/src/features/citybuilding/amap2.tsx deleted file mode 100644 index 52ba2984b7b..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/amap2.tsx +++ /dev/null @@ -1,125 +0,0 @@ -// @ts-ignore -import { CityBuildingLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - style: 'dark', - center: [120.145, 30.238915], - pitch: 60, - zoom: 13.2, - }), - }); - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', - ).then(async (res) => { - const pointLayer = new CityBuildingLayer(); - pointLayer - .source(await res.json()) - .size('floor', [0, 500]) - .color('rgba(242,246,250,1.0)') - .animate({ - enable: true, - }) - .active({ - color: '#0ff', - mix: 0.5, - }) - .style({ - opacity: 0.7, - baseColor: 'rgb(16, 16, 16)', - windowColor: 'rgb(30, 60, 89)', - brightColor: 'rgb(255, 176, 38)', - sweep: { - enable: true, - sweepRadius: 2, - sweepColor: '#1990FF', - sweepSpeed: 0.5, - sweepCenter: [120.145319, 30.238915], - }, - }); - scene.addLayer(pointLayer); - }); - - // fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json', - // ) - // .then((data) => data.json()) - // .then(({ lakeBorderData, lakeData, landData }) => { - // const lakeLayer = new PolygonLayer() - // .source(lakeData) - // .shape('fill') - // .color('#1E90FF') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'out', // in - out - // }, - // }); - // const landLayer = new PolygonLayer() - // .source(landData) - // .shape('fill') - // .color('#3CB371') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // const lakeBorderLayer = new PolygonLayer() - // .source(lakeBorderData) - // .shape('fill') - // .color('#ccc') - // .style({ - // opacity: 0.5, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // scene.addLayer(lakeLayer); - // scene.addLayer(lakeBorderLayer); - // scene.addLayer(landLayer); - // }); - - // fetch( - // 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', - // ) - // .then((res) => res.json()) - // .then((data) => { - // const layer = new LineLayer({ - // zIndex: 0, - // depth: true, - // }) - // .source(data) - // .size(1) - // .shape('line') - // .color('#1990FF') - // .animate({ - // interval: 1, // 间隔 - // duration: 2, // 持续时间，延时 - // trailLength: 2, // 流线长度 - // }); - // scene.addLayer(layer); - // }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/citybuilding/mapbox.md b/legacy/dev-demos/src/features/citybuilding/mapbox.md deleted file mode 100644 index 113fe7c691a..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/mapbox.md +++ /dev/null @@ -1,2 +0,0 @@ -### building - mapbox - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/citybuilding/mapbox.tsx b/legacy/dev-demos/src/features/citybuilding/mapbox.tsx deleted file mode 100644 index 80026a00653..00000000000 --- a/legacy/dev-demos/src/features/citybuilding/mapbox.tsx +++ /dev/null @@ -1,124 +0,0 @@ -// @ts-ignore -import { CityBuildingLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { MapLibre } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new MapLibre({ - style: 'https://api.maptiler.com/maps/satellite/style.json?key=731EwZL6mr4DFzqQkmtW', - center: [120.145, 30.238915], - pitch: 60, - zoom: 13.2, - }), - }); - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', - ).then(async (res) => { - const pointLayer = new CityBuildingLayer(); - pointLayer - .source(await res.json()) - .size('floor', [0, 500]) - .color('rgba(242,246,250,1.0)') - .animate({ - enable: true, - }) - .active({ - color: '#0ff', - mix: 0.5, - }) - .style({ - opacity: 0.7, - baseColor: 'rgb(16, 16, 16)', - windowColor: 'rgb(30, 60, 89)', - brightColor: 'rgb(255, 176, 38)', - sweep: { - enable: true, - sweepRadius: 2, - sweepColor: '#1990FF', - sweepSpeed: 0.5, - sweepCenter: [120.145319, 30.238915], - }, - }); - scene.addLayer(pointLayer); - }); - - // fetch( - // 'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json', - // ) - // .then((data) => data.json()) - // .then(({ lakeBorderData, lakeData, landData }) => { - // const lakeLayer = new PolygonLayer() - // .source(lakeData) - // .shape('fill') - // .color('#1E90FF') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'out', // in - out - // }, - // }); - // const landLayer = new PolygonLayer() - // .source(landData) - // .shape('fill') - // .color('#3CB371') - // .style({ - // opacity: 0.4, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // const lakeBorderLayer = new PolygonLayer() - // .source(lakeBorderData) - // .shape('fill') - // .color('#ccc') - // .style({ - // opacity: 0.5, - // opacityLinear: { - // enable: true, - // dir: 'in', // in - out - // }, - // }); - - // scene.addLayer(lakeLayer); - // scene.addLayer(lakeBorderLayer); - // scene.addLayer(landLayer); - // }); - - // fetch( - // 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', - // ) - // .then((res) => res.json()) - // .then((data) => { - // const layer = new LineLayer({ - // zIndex: 0, - // depth: true, - // }) - // .source(data) - // .size(1) - // .shape('line') - // .color('#1990FF') - // .animate({ - // interval: 1, // 间隔 - // duration: 2, // 持续时间，延时 - // trailLength: 2, // 流线长度 - // }); - // scene.addLayer(layer); - // }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/customLayer/marker-layer.md b/legacy/dev-demos/src/features/customLayer/marker-layer.md deleted file mode 100644 index 0ef48400f03..00000000000 --- a/legacy/dev-demos/src/features/customLayer/marker-layer.md +++ /dev/null @@ -1,143 +0,0 @@ -### marker-layer - -```tsx -import { Marker, MarkerLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [105, 30.258134], - zoom: 3, - }), - }); - // addMarkers(scene); - testRemoveMarkerLayer(scene); - // testClearMarkerLayer(scene); - }, []); - - const addMarkers = (scene) => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((nodes) => { - const markerLayer = new MarkerLayer(); - for (let i = 0; i < 400; i++) { - const { coordinates } = nodes.features[i].geometry; - const marker = new Marker().setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - markerLayer.addMarker(marker); - } - scene.addMarkerLayer(markerLayer); - }); - }; - - // bugfix验证：执行scene.removeMarkerLayer后，缩放图层marker数据还原 - const testRemoveMarkerLayer = (scene) => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((nodes) => { - const markerLayer = new MarkerLayer({ - cluster: true, - }); - for (let i = 0; i < nodes.features.length; i++) { - const { coordinates } = nodes.features[i].geometry; - const marker = new Marker().setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - markerLayer.addMarker(marker); - } - scene.addMarkerLayer(markerLayer); - // 3秒后删除图层 - setTimeout(() => { - scene.removeMarkerLayer(markerLayer); - }, 3000); - }); - }; - - // bugfix验证：执行markerLayer.clear后，图层聚合能力失效 - const testClearMarkerLayer = (scene) => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((nodes) => { - const markerLayer = new MarkerLayer({ - cluster: true, - }); - - for (let i = 0; i < nodes.features.length; i++) { - const { coordinates } = nodes.features[i].geometry; - const marker = new Marker().setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - markerLayer.addMarker(marker); - } - scene.addMarkerLayer(markerLayer); - - setTimeout(() => { - if (markerLayer.getMarkers().length > 0) { - markerLayer.clear(); - } - - for (let i = 0; i < 200; i++) { - const { coordinates } = nodes.features[i].geometry; - const marker = new Marker().setLnglat({ - lng: coordinates[0], - lat: coordinates[1], - }); - markerLayer.addMarker(marker); - } - }, 3 * 1000); - }); - }; - - const getColor = (v) => { - const colors = [ - '#ffffe5', - '#f7fcb9', - '#d9f0a3', - '#addd8e', - '#78c679', - '#41ab5d', - '#238443', - '#005a32', - ]; - return v > 50 - ? colors[7] - : v > 40 - ? colors[6] - : v > 30 - ? colors[5] - : v > 20 - ? colors[4] - : v > 10 - ? colors[3] - : v > 5 - ? colors[2] - : v > 0 - ? colors[1] - : colors[0]; - }; - - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/customLayer/marker.md b/legacy/dev-demos/src/features/customLayer/marker.md deleted file mode 100644 index a1bfda01445..00000000000 --- a/legacy/dev-demos/src/features/customLayer/marker.md +++ /dev/null @@ -1,78 +0,0 @@ -### marker - -```tsx -import { Marker, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7'; -import { GaodeMap, Mapbox,TMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map-marker', - map: new TMap({ - center: [120.184824, 30.248341], - pitch: 0, - zoom: 18, - }), - }); - - const popup = new Popup({ - offsets: [0, 20], - }).setHTML('

111111111111

'); - - const el = document.createElement('h1'); - el.innerHTML = '

111111111111

'; - - // const marker = new Marker({ - // element: el, - // // offsets: [0, -20], - // }) - const marker = new Marker() - .setLnglat({ - lng: 120.184824, - lat: 30.248341, - }) - .setPopup(popup); - - scene.addMarker(marker); - - const arr = [ - { - lng: 120.184824, - lat: 30.248341, - count: 40, - }, - ]; - - scene.on('loaded', () => { - // @ts-ignore - // marker.on('click', (e) => { - // }); - // const marker1 = new AMap.Marker({ - // map: scene.map, - // position: [120.184824, 30.248341], - // shadow: '#000', - // label: { - // content: '站点', - // direction: 'top', - // }, - // }); - // marker1.on('click', () => { - // console.log(this.scene.getZoom()); - // console.log('选中的点', 1111); - // }); - // this.scene = scene; - }); - }, []); - - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/earth/earth.md b/legacy/dev-demos/src/features/earth/earth.md deleted file mode 100644 index c2accaf45f7..00000000000 --- a/legacy/dev-demos/src/features/earth/earth.md +++ /dev/null @@ -1,2 +0,0 @@ -### earth - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/earth/earth.tsx b/legacy/dev-demos/src/features/earth/earth.tsx deleted file mode 100644 index f63d289ae80..00000000000 --- a/legacy/dev-demos/src/features/earth/earth.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// @ts-ignore -import { Earth, EarthLayer, Scene } from '@antv/l7'; - -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Earth({ - center: [120, 30], - pitch: 0, - zoom: 3, - }), - }); - - const earthlayer = new EarthLayer() - .source( - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - }, - }, - ) - .shape('base') - .style({ - globalOptions: { - ambientRatio: 0.6, // 环境光 - diffuseRatio: 0.4, // 漫反射 - specularRatio: 0.1, // 高光反射 - // earthTime: 4.0 - earthTime: 0.1, - }, - }) - .animate(true); - - const atomLayer = new EarthLayer() - .color('#2E8AE6') - .shape('atomSphere') - .style({ - opacity: 1, - }); - - const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere'); - - scene.on('loaded', () => { - scene.addLayer(earthlayer); - - scene.addLayer(atomLayer); - scene.addLayer(bloomLayer); - - earthlayer.setEarthTime(4.0); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/fix/demos/fix.tsx b/legacy/dev-demos/src/features/fix/demos/fix.tsx deleted file mode 100644 index 5a7f94a04d8..00000000000 --- a/legacy/dev-demos/src/features/fix/demos/fix.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { Scene, PointLayer, LineLayer, Source } from "@antv/l7"; -// import { DrawEvent, DrawLine } from "@antv/l7-draw"; -import { GaodeMap, Map, Mapbox } from "@antv/l7-maps"; -import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf"; -import { debounce, throttle } from "lodash"; -import React, { useEffect } from 'react'; - -const lineList: Feature[] = [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [119.988511, 30.269614], - [119.9851, 30.269323], - [119.985438, 30.267852], - [119.990291, 30.267257], - [119.991454, 30.261762], - [119.994974, 30.256115], - [119.983641, 30.246146], - [119.985286, 30.241228], - [119.983351, 30.224089], - [119.985473, 30.221814], - [119.99271, 30.22088], - ], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [120.075427, 30.147148], - [120.073659, 30.147609], - [120.074996, 30.154115], - [120.070946, 30.160916], - [120.074171, 30.161745], - [120.075425, 30.158086], - [120.081662, 30.159401], - [120.084335, 30.163868], - [120.112648, 30.17977], - [120.119262, 30.186753], - [120.137108, 30.198481], - [120.137962, 30.202496], - [120.135039, 30.208876], - [120.135625, 30.216541], - [120.138548, 30.225005], - [120.145412, 30.229088], - [120.155609, 30.230104], - [120.158572, 30.241788], - [120.160816, 30.245725], - [120.16441, 30.245929], - [120.164401, 30.247589], - [120.165608, 30.247515], - [120.166546, 30.254134], - ], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [120.216401, 30.291456], - [120.217689, 30.289456], - [120.218912, 30.28995], - [120.216862, 30.292565], - [120.221055, 30.293611], - [120.221909, 30.291061], - [120.211464, 30.28603], - [120.207209, 30.278355], - [120.207448, 30.270482], - [120.199987, 30.270352], - [120.200252, 30.247617], - [120.210037, 30.243515], - [120.204483, 30.237082], - [120.224585, 30.222153], - [120.213219, 30.213984], - [120.216402, 30.20977], - [120.194058, 30.196853], - [120.17329, 30.188212], - [120.174223, 30.181411], - [120.16777, 30.181168], - [120.167244, 30.173706], - [120.147426, 30.172062], - [120.146042, 30.176801], - [120.135382, 30.17619], - ], - }, - }, -]; - -const getPointFeatureCollection = (lineList: Feature[]) => { - const data = featureCollection( - coordAll(featureCollection([...lineList])).map((item) => point(item)) - ); - // console.log(data) - return data - // return {type: 'FeatureCollection', features: [ - // { - // type: "Feature", - // properties: {}, - // geometry: {type: 'Point', coordinates: lineList[0].geometry.coordinates[0]} - // } - // ]} -}; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [120.151634, 30.244831], - style: "dark", - zoom: 10 - }) - }); - scene.on("loaded", () => { - const lineLayer = new LineLayer(); - lineLayer - .source( - featureCollection( - lineList.map((item, index) => { - item.properties = { - index - }; - return item; - }) - ) - ) - .size(4) - .color("#f00"); - const pointLayer = new PointLayer({}); - pointLayer - .source(getPointFeatureCollection(lineList)) - .size(6) - .shape("circle") - .style({ - stroke: "#00f", - strokeWidth: 3 - }); - - scene.addLayer(lineLayer); - scene.addLayer(pointLayer); - - let isDrag = false; - let dragFeature: Feature | null = null; - let prePosition = [0, 0]; - - lineLayer.on("mousedown", (e) => { - const { lng, lat } = e.lngLat; - prePosition = [lng, lat]; - - isDrag = true; - // scene.setMapStatus({ - // dragEnable: false - // }); - dragFeature = e.feature; - }); - - scene.setMapStatus({ - dragEnable: false - }); - - scene.on("mousemove", (e) => { - - if (isDrag && lineLayer.modelLoaded && pointLayer.modelLoaded) { - // if (isDrag ) { - // requestAnimationFrame(() => { - - const { lng, lat } = e.lnglat; - const [lastLng, lastLat] = prePosition; - if (dragFeature) { - const positions = coordAll(dragFeature); - positions.forEach((position) => { - position[0] += lng - lastLng; - position[1] += lat - lastLat; - }); - dragFeature.geometry.coordinates = positions; - lineList[dragFeature.properties?.index] = dragFeature; - } - prePosition = [lng, lat]; - const lineData = featureCollection([...lineList]); - const pointData = getPointFeatureCollection([...lineList]); - - - lineLayer.setData(lineData); - pointLayer.setData(pointData); - - // }) - } - } ); - - scene.on("mouseup", (e) => { - isDrag = false; - // scene.setMapStatus({ - // dragEnable: true - // }); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/fix/demos/fix2.tsx b/legacy/dev-demos/src/features/fix/demos/fix2.tsx deleted file mode 100644 index 377257de25e..00000000000 --- a/legacy/dev-demos/src/features/fix/demos/fix2.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { Scene, PointLayer, Marker, LineLayer, Source } from "@antv/l7"; -// import { DrawEvent, DrawLine } from "@antv/l7-draw"; -import { GaodeMap, Map, Mapbox } from "@antv/l7-maps"; -import { coordAll, Feature, featureCollection, LineString, point } from "@turf/turf"; -import React, { useEffect } from 'react'; - -const lineList: Feature[] = [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [119.988511, 30.269614], - [119.9851, 30.269323], - [119.985438, 30.267852], - [119.990291, 30.267257], - [119.991454, 30.261762], - [119.994974, 30.256115], - [119.983641, 30.246146], - [119.985286, 30.241228], - [119.983351, 30.224089], - [119.985473, 30.221814], - [119.99271, 30.22088], - ], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [120.075427, 30.147148], - [120.073659, 30.147609], - [120.074996, 30.154115], - [120.070946, 30.160916], - [120.074171, 30.161745], - [120.075425, 30.158086], - [120.081662, 30.159401], - [120.084335, 30.163868], - [120.112648, 30.17977], - [120.119262, 30.186753], - [120.137108, 30.198481], - [120.137962, 30.202496], - [120.135039, 30.208876], - [120.135625, 30.216541], - [120.138548, 30.225005], - [120.145412, 30.229088], - [120.155609, 30.230104], - [120.158572, 30.241788], - [120.160816, 30.245725], - [120.16441, 30.245929], - [120.164401, 30.247589], - [120.165608, 30.247515], - [120.166546, 30.254134], - ], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [120.216401, 30.291456], - [120.217689, 30.289456], - [120.218912, 30.28995], - [120.216862, 30.292565], - [120.221055, 30.293611], - [120.221909, 30.291061], - [120.211464, 30.28603], - [120.207209, 30.278355], - [120.207448, 30.270482], - [120.199987, 30.270352], - [120.200252, 30.247617], - [120.210037, 30.243515], - [120.204483, 30.237082], - [120.224585, 30.222153], - [120.213219, 30.213984], - [120.216402, 30.20977], - [120.194058, 30.196853], - [120.17329, 30.188212], - [120.174223, 30.181411], - [120.16777, 30.181168], - [120.167244, 30.173706], - [120.147426, 30.172062], - [120.146042, 30.176801], - [120.135382, 30.17619], - ], - }, - }, -]; - - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [120.151634, 30.244831], - style: "dark", - zoom: 10 - }) - }); - - const source = new Source(featureCollection( - lineList.map((item, index) => { - item.properties = { - index - }; - return item; - }) - )) - scene.on("loaded", () => { - const lineLayer = new LineLayer(); - lineLayer - .source(source) - .size(4) - .color("#f00"); - scene.addLayer(lineLayer); - - const marker = new Marker() - marker.setLnglat([ - 120.1047383116185, 30.261127905299425, - ]); - marker.on('click', (e) => { - console.log( 'click') - }) - scene.addMarker(marker); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/fix/fix.md b/legacy/dev-demos/src/features/fix/fix.md deleted file mode 100644 index 9a7cf06af62..00000000000 --- a/legacy/dev-demos/src/features/fix/fix.md +++ /dev/null @@ -1,2 +0,0 @@ -### fix feature - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/fix/fix2.md b/legacy/dev-demos/src/features/fix/fix2.md deleted file mode 100644 index 804a084ae0f..00000000000 --- a/legacy/dev-demos/src/features/fix/fix2.md +++ /dev/null @@ -1,2 +0,0 @@ -### fix2 feature - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/geometry/billboard.md b/legacy/dev-demos/src/features/geometry/billboard.md deleted file mode 100644 index 4f57860dd9f..00000000000 --- a/legacy/dev-demos/src/features/geometry/billboard.md +++ /dev/null @@ -1,2 +0,0 @@ -### billboard - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/geometry/demos/billboard.tsx b/legacy/dev-demos/src/features/geometry/demos/billboard.tsx deleted file mode 100644 index 4963660fbd7..00000000000 --- a/legacy/dev-demos/src/features/geometry/demos/billboard.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// @ts-ignore -import { Scene, GeometryLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - pitch: 80, - style: 'dark', - center: [0, 0], - zoom: 5, - }), - }); - - scene.on('loaded', () => { - const img = new Image(); - img.crossOrigin = ''; - img.onload = () => { - let billboard = new GeometryLayer().shape('billboard').style({ - width: 90, - height: 30, - canvasWidth: 360, - canvasHeight: 120, - center: [120, 30], - drawCanvas: (canvas: HTMLCanvasElement) => { - let { width, height } = canvas; - let ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - ctx.globalAlpha = 0.5; - ctx.drawImage( - img, - 0, - 0, - img.width, - img.height, - 0, - 0, - width, - height, - ); - ctx.globalAlpha = 1; - ctx.fillStyle = '#0ff'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.font = '36px Georgia'; - ctx.fillText('Hello World! 蚂蚁', width / 2, height / 2); - }, - raisingHeight: 100, - }); - billboard.active({ - color: '#0ff', - mix: 0.5, - }); - scene.startAnimate(); - scene.addLayer(billboard); - }; - img.src = - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ'; - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/geometry/demos/plane.tsx b/legacy/dev-demos/src/features/geometry/demos/plane.tsx deleted file mode 100644 index 673b41fee7e..00000000000 --- a/legacy/dev-demos/src/features/geometry/demos/plane.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// @ts-ignore -import { Scene, GeometryLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [ 120.1025, 30.2594 ], - style: 'dark', - zoom: 10 - }) - }); - - scene.on('loaded', () => { - const layer = new GeometryLayer() - .shape('plane') - .style({ - opacity: 0.8, - width: 0.074, - height: 0.061, - center: [ 120.1025, 30.2594 ] - }) - .active(true) - .color('#ff0'); - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/geometry/demos/sprite.tsx b/legacy/dev-demos/src/features/geometry/demos/sprite.tsx deleted file mode 100644 index b638f57d9c1..00000000000 --- a/legacy/dev-demos/src/features/geometry/demos/sprite.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// @ts-ignore -import { GeometryLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: 'device', - map: new GaodeMap({ - // map: new GaodeMap({ - // map: new Mapbox({ - pitch: 40, - style: 'dark', - center: [120, 30], - zoom: 6, - }), - }); - - scene.on('loaded', () => { - const layer = new GeometryLayer() - // .source([{x: 0, y: 0}], {parser: {type: 'json', x: 'x', y: 'y'}}) - .shape('sprite') - .size(20) - .style({ - // opacity: 0.3, - mapTexture: - 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow - // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain - // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ', // blub - center: [120, 30], - // spriteAnimate: 'up', - spriteCount: 60, - spriteRadius: 10, - spriteTop: 2500000, - spriteUpdate: 10000, - spriteScale: 0.8, - - // spriteTop: 1000, - // spriteUpdate: 5, - // spriteBottom: -10, - // spriteScale: 0.6, - }) - .active(true) - .color('#f00'); - - scene.addLayer(layer); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/geometry/plane.md b/legacy/dev-demos/src/features/geometry/plane.md deleted file mode 100644 index ef51c0db735..00000000000 --- a/legacy/dev-demos/src/features/geometry/plane.md +++ /dev/null @@ -1,2 +0,0 @@ -### plane - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/geometry/sprite.md b/legacy/dev-demos/src/features/geometry/sprite.md deleted file mode 100644 index 879e3a556ea..00000000000 --- a/legacy/dev-demos/src/features/geometry/sprite.md +++ /dev/null @@ -1,2 +0,0 @@ -### sprite - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/heatmap/demos/grid.tsx b/legacy/dev-demos/src/features/heatmap/demos/grid.tsx deleted file mode 100644 index a7ce84c84a6..00000000000 --- a/legacy/dev-demos/src/features/heatmap/demos/grid.tsx +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Map({ - style: 'dark', - pitch: 0, - center: [127.5671666579043, 7.445038892195569], - zoom: 2.632456779444394, - }), - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({}) - .source(data, { - transforms: [ - { - type: 'grid', - size: 150000, - field: 'mag', - method: 'sum', - }, - ], - }) - .shape('square') - .style({ - coverage: 1, - angle: 0 - }) - .color( - 'count', - [ - '#0B0030', - '#100243', - '#100243', - '#1B048B', - '#051FB7', - '#0350C1', - '#0350C1', - '#0072C4', - '#0796D3', - '#2BA9DF', - '#30C7C4', - '#6BD5A0', - '#A7ECB2', - '#D0F4CA' - ].reverse() - ); - scene.addLayer(layer); - - scene.startAnimate(); - setTimeout(() => { - layer.style({ - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - }, 2000); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/heatmap/demos/grid3d.tsx b/legacy/dev-demos/src/features/heatmap/demos/grid3d.tsx deleted file mode 100644 index c74afff3b03..00000000000 --- a/legacy/dev-demos/src/features/heatmap/demos/grid3d.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Map({ - style: 'dark', - pitch: 0, - center: [127.5671666579043, 7.445038892195569], - zoom: 2.632456779444394, - }), - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({}) - .source(data, { - transforms: [ - { - type: 'grid', - size: 150000, - field: 'mag', - method: 'sum', - }, - ], - }) - .size('sum', sum => { - return sum * 20000; - }) - .shape('hexagonColumn') - .style({ - coverage: 0.8, - angle: 0, - }) - .color( - 'count', - [ - '#0B0030', - '#100243', - '#100243', - '#1B048B', - '#051FB7', - '#0350C1', - '#0350C1', - '#0072C4', - '#0796D3', - '#2BA9DF', - '#30C7C4', - '#6BD5A0', - '#A7ECB2', - '#D0F4CA' - ].reverse() - ); - scene.addLayer(layer); - - scene.startAnimate(); - setTimeout(() => { - layer.style({ - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - }, 2000); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/heatmap/demos/heatmap.tsx b/legacy/dev-demos/src/features/heatmap/demos/heatmap.tsx deleted file mode 100644 index 35b0b9ec6f3..00000000000 --- a/legacy/dev-demos/src/features/heatmap/demos/heatmap.tsx +++ /dev/null @@ -1,76 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Map({ - style: 'dark', - pitch: 0, - center: [127.5671666579043, 7.445038892195569], - zoom: 2.632456779444394, - }), - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({}) - .source(data) - .shape('heatmap') - .size('mag', [0, 1.0]) // weight映射通道 - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - scene.addLayer(layer); - - scene.startAnimate(); - setTimeout(() => { - layer.style({ - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - }, 2000); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/heatmap/demos/heatmap3d.tsx b/legacy/dev-demos/src/features/heatmap/demos/heatmap3d.tsx deleted file mode 100644 index 17eeb86ac6a..00000000000 --- a/legacy/dev-demos/src/features/heatmap/demos/heatmap3d.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Map({ - center: [120, 30], - pitch: 0, - zoom: 2, - }), - }); - - scene.on('loaded', () => { - // const url1 = - // 'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - - // const layer1 = new RasterLayer({ - // zIndex: 0, - // }).source(url1, { - // parser: { - // type: 'rasterTile', - // tileSize: 256, - // zoomOffset: 0, - // }, - // }); - // scene.addLayer(layer1) - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({}) - .source(data) - .shape('heatmap3d') - .size('mag', [0, 1.0]) // weight映射通道 - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#F27DEB', - '#8C1EB2', - '#421EB2', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - scene.addLayer(layer); - scene.startAnimate(); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/heatmap/demos/hexagon.tsx b/legacy/dev-demos/src/features/heatmap/demos/hexagon.tsx deleted file mode 100644 index c4f5d07cb04..00000000000 --- a/legacy/dev-demos/src/features/heatmap/demos/hexagon.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Map({ - style: 'light', - pitch: 0, - center: [114.07737552216226, 22.542656745583486], - rotation: 0, - zoom: 14, - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({}) - .source(data, { - transforms: [ - { - type: 'hexagon', - size: 100, - field: 'h12', - method: 'sum', - }, - ], - }) - .size('sum', [0, 60]) - .shape('squareColumn') - .style({ - opacity: 1, - }) - .color( - 'sum', - [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#CEF8D6', - ].reverse(), - ); - scene.startAnimate(); - scene.addLayer(layer); - scene.render(); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/heatmap/grid.md b/legacy/dev-demos/src/features/heatmap/grid.md deleted file mode 100644 index 39665caa540..00000000000 --- a/legacy/dev-demos/src/features/heatmap/grid.md +++ /dev/null @@ -1,2 +0,0 @@ -### grid - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/heatmap/grid3d.md b/legacy/dev-demos/src/features/heatmap/grid3d.md deleted file mode 100644 index 790d4aa4a76..00000000000 --- a/legacy/dev-demos/src/features/heatmap/grid3d.md +++ /dev/null @@ -1,2 +0,0 @@ -### grid3d - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/heatmap/heatmap.md b/legacy/dev-demos/src/features/heatmap/heatmap.md deleted file mode 100644 index 0d70bed5f38..00000000000 --- a/legacy/dev-demos/src/features/heatmap/heatmap.md +++ /dev/null @@ -1,2 +0,0 @@ -### Heatmap-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/heatmap/heatmap3d.md b/legacy/dev-demos/src/features/heatmap/heatmap3d.md deleted file mode 100644 index 6c63899402a..00000000000 --- a/legacy/dev-demos/src/features/heatmap/heatmap3d.md +++ /dev/null @@ -1,2 +0,0 @@ -### Heatmap - 3D-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/heatmap/hexagon.md b/legacy/dev-demos/src/features/heatmap/hexagon.md deleted file mode 100644 index afffcfb1f02..00000000000 --- a/legacy/dev-demos/src/features/heatmap/hexagon.md +++ /dev/null @@ -1,2 +0,0 @@ -### hexagon-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/imageLayer/image.md b/legacy/dev-demos/src/features/imageLayer/image.md deleted file mode 100644 index 4c2b5890447..00000000000 --- a/legacy/dev-demos/src/features/imageLayer/image.md +++ /dev/null @@ -1,2 +0,0 @@ -### Image Layer - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/imageLayer/image.tsx b/legacy/dev-demos/src/features/imageLayer/image.tsx deleted file mode 100644 index ed924e860c7..00000000000 --- a/legacy/dev-demos/src/features/imageLayer/image.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { ImageLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import dat from 'dat.gui' -import React, { useEffect } from 'react'; -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - pickBufferScale: 1.0, - renderer: 'device', - map: new GaodeMap({ - center: [121.268, 30.3628], - pitch: 0, - style: 'normal', - zoom: 10, - }), - }); - const layerStyle = { - brightness: 1.0, - gamma: 1.0, - color: '#ffffff', - opacity: 1.0, - saturation: 1.0, - contrast: 1.0, - }; - const layer = new ImageLayer({}); - layer.source( - 'https://cdn.uino.cn/thing-earth-space/images/refraction.jpg', - // 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4k6vT6rUsk4AAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - extent: [121.168, 30.2828, 121.384, 30.4219], - }, - }, - ); - layer.style(layerStyle); - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - }); - const gui = new dat.GUI(); - gui.domElement.style.position = 'absolute'; - gui.domElement.style.top = '202px'; - gui.domElement.style.right = '220px'; - gui.add(layerStyle, 'brightness', 0, 2, 0.01).onChange((v) => { - layer.style({ - brightness: v, - }); - scene.render(); - }); - gui.add(layerStyle, 'saturation', 0, 2, 0.01).onChange((v) => { - layer.style({ - saturation: v, - }); - scene.render(); - }); - gui.add(layerStyle, 'contrast', 0, 2, 0.01).onChange((v) => { - layer.style({ - contrast: v, - }); - scene.render(); - }); - gui.add(layerStyle, 'gamma', 0, 2, 0.01).onChange((v) => { - layer.style({ - gamma: v, - }); - scene.render(); - }); - gui.add(layerStyle, 'opacity', 0, 1, 0.01).onChange((v) => { - layer.style({ - opacity: v, - }); - scene.render(); - }); - - return () => { - gui.destroy(); - }; - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/imageLayer/raster.md b/legacy/dev-demos/src/features/imageLayer/raster.md deleted file mode 100644 index 5806fc4cde9..00000000000 --- a/legacy/dev-demos/src/features/imageLayer/raster.md +++ /dev/null @@ -1,2 +0,0 @@ -### Image Layer - raster - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/imageLayer/raster.tsx b/legacy/dev-demos/src/features/imageLayer/raster.tsx deleted file mode 100644 index eae6fec8aee..00000000000 --- a/legacy/dev-demos/src/features/imageLayer/raster.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import * as GeoTIFF from 'geotiff'; -import React, { useEffect } from 'react'; - -async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', - ); - const arrayBuffer = await response.arrayBuffer(); - const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { - data: values[0], - width, - height, - min: 0, - max: 8000, - }; -} - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [121.268, 30.3628], - zoom: 3, - }), - }); - - scene.on('loaded', async () => { - const tiffdata = await getTiffData(); - - const layer = new RasterLayer({}); - layer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.width, - height: tiffdata.height, - min: 0, - max: 80, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], - }, - }) - .style({ - opacity: 0.8, - domain: [0, 2000], - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/legend/cat.md b/legacy/dev-demos/src/features/legend/cat.md deleted file mode 100644 index 296267a01da..00000000000 --- a/legacy/dev-demos/src/features/legend/cat.md +++ /dev/null @@ -1,3 +0,0 @@ -### 枚举类型 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/legend/cat.tsx b/legacy/dev-demos/src/features/legend/cat.tsx deleted file mode 100644 index 27f2f1c3070..00000000000 --- a/legacy/dev-demos/src/features/legend/cat.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import type { ILayer} from '@antv/l7'; -import { PolygonLayer, Scene } from '@antv/l7'; -import { Button } from 'antd'; - -import { Map } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - const [filllayer, setFillLayer] = useState(); - const [mapScene, setScene] = useState(); - const colors = [ - ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0'], - ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e'], - ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99'], - ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6'], - ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00'], - ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3'], - ]; - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .shape('fill') - .color('name', colors[0]) - .style({ - opacity: 1, - }); - - scene.addLayer(layer); - setScene(scene); - - setFillLayer(layer); - layer.on('legend:color', (color) => { - console.log('color', color); - }); - addLayers(geoData, scene, layer); - } - return () => { - scene.destroy(); - }; - }, [geoData]); - - const changeColor = () => { - const index = Math.round(Math.random() * 6); - filllayer?.color('name', colors[index]); - mapScene?.render(); - console.log(filllayer?.getLegend('color')); - }; - - return ( -
-
- - -
- ); -}; diff --git a/legacy/dev-demos/src/features/legend/useLine.ts b/legacy/dev-demos/src/features/legend/useLine.ts deleted file mode 100644 index eeef94f6dc5..00000000000 --- a/legacy/dev-demos/src/features/legend/useLine.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { useEffect, useState } from 'react'; -import { LineLayer, PolygonLayer } from '@antv/l7'; -interface IData { - county: any; - state: any; - unemploymentdata: any; -} -interface IData2 { - country: any; - turnout: any; - } -export function useData() { - const [data, setData] = useState(undefined); - useEffect(() => { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/5c4c7e02-a796-4c09-baba-629a99c909aa.json', - ).then((d) => d.json()), - // https://lab.isaaclin.cn/nCoV/api/area?latest=1 - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/738993d1-cc7e-4630-a318-80d6452fd125.csv', - ).then((d) => d.text()), - fetch( - ' https://gw.alipayobjects.com/os/bmw-prod/d13721bf-f0c2-4897-b6e6-633e6e022c09.json', - ).then((d) => d.json()), - ]).then(([county, unemployment, state]) => { - const unemploymentdata = unemployment - .split('\n') - .slice(0) - .map((line) => { - const item = line.split(','); - return { - id: item[0], - state: item[1], - county: item[2], - rate: item[3] * 1, - }; - }); - setData({ - county, - unemploymentdata, - state, - }); - }); - }, []); - - return { geoData: data }; -} - -export function useEuropeData() { - const [data, setData] = useState(undefined); - useEffect(() => { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/01ff872b-99c6-4e41-bd3a-34c2134da597.json', - ).then((d) => d.json()), - // https://lab.isaaclin.cn/nCoV/api/area?latest=1 - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/64124f12-e086-4fe6-a900-bd57b410af69.csv', - ).then((d) => d.text()), - - ]).then(([country, turnoutData,]) => { - const turnout = turnoutData - .split('\n') - .slice(0) - .map((line) => { - const item = line.split(','); - return { - country: item[0], - turnout: item[1] *1, - }; - }); - setData({ - country, - turnout, - }); - }); - }, []); - - return { geoData: data }; - } - -export function addLayers(data: IData, scene, mainLayer) { - const linelayer = new PolygonLayer({}) - .source(data.county) - .size(0.5) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - const stateLayer = new PolygonLayer({}) - .source(data.state) - .size(1) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - - scene.addLayer(linelayer); - scene.addLayer(stateLayer); - addhightLayer(scene, mainLayer) - -} - -export function addEuropeLayers(data: IData2, scene, mainLayer) { - const linelayer = new PolygonLayer({}) - .source(data.country) - .size(0.5) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - - scene.addLayer(linelayer); - addhightLayer(scene, mainLayer) - } - - function addhightLayer(scene, mainLayer) { - const hightLayer = new LineLayer({ - zIndex: 4, // 设置显示层级 - name: 'hightlight', - }) - .source({ - type: 'FeatureCollection', - features: [], - }) - .shape('line') - .size(0.8) - .color('#000') - .style({ - opacity: 1, - }); - scene.addLayer(hightLayer); - mainLayer.on('click', (feature) => { - // console.log(feature) - hightLayer.setData({ - type: 'FeatureCollection', - features: [feature.feature], - }); - }); - } \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/demos/arc_deg.tsx b/legacy/dev-demos/src/features/line/demos/arc_deg.tsx deleted file mode 100644 index ffc9e131d2a..00000000000 --- a/legacy/dev-demos/src/features/line/demos/arc_deg.tsx +++ /dev/null @@ -1,267 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - style: 'dark', - // pitch: 60 - }), - }); - - const dataloc = { - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [116.340206, 39.975867] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [87.566017, 43.847704] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [101.75512, 36.618784] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [121.481053, 31.232806] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [118.795822, 32.140052] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [120.217415, 30.180315] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [119.230197, 26.07229] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [108.88416, 34.352489] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [106.75177, 29.529607] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [114.333599, 30.996152] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [113.306893, 34.417666] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [126.533967, 45.778455] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [123.588177, 41.616821] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [121.741563, 24.928935] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [102.967647, 24.928935] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [91.228453, 29.578236] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [26.241295, 51.909019] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [24.835045, 10.949795] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [-99.61808, 43.411413] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [-58.360865, -17.996588] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [142.28983, 48.30253] - } - }, - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "Point", - "coordinates": [132.98353, 33.421804] - } - } - ] - } - ; - // 随机生成地点的关联关系 - const relation: any[] = [] - dataloc.features.forEach((item, index) => { - const count = 1 + Math.floor(Math.random() * 10) - const count2 = 1 + Math.floor(Math.random() * 10) - const start = item.geometry.coordinates - const cityCount = 1+ Math.floor(Math.random() * 5); - for (let j = 0; j < cityCount; j++) { - const endidex = Math.floor(Math.random() * dataloc.features.length); - const end = dataloc.features[endidex].geometry.coordinates - for (let i = 0; i < count; i++) { - relation.push({ - coord: [start, end], - value: i - }) - } - for (let i = 0; i < count2; i++) { - relation.push({ - coord: [end, start], - value: i - }) - } - } - - }) - - - const layer = new LineLayer({ blend: 'normal' }) - .source(relation, { - parser: { - type: 'json', - coordinates: 'coord' - } - }) - .size(1) - .shape('arc') - .color('#8C1EB2') - .style({ - opacity: 0.8, - thetaOffset: { - field: 'value', - value: [0.01, 0.5] - }, - }); - - - - - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/flowline.tsx b/legacy/dev-demos/src/features/line/demos/flowline.tsx deleted file mode 100644 index 5edcf2a2650..00000000000 --- a/legacy/dev-demos/src/features/line/demos/flowline.tsx +++ /dev/null @@ -1,150 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - PointLayer, - PolygonLayer, - - // @ts-ignore - } from '@antv/l7'; - // @ts-ignore - import { GaodeMap,Map,BaiduMap } from '@antv/l7-maps'; - - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new BaiduMap({ - center: [8.654789284720719, 47.412606122294044], - zoom: 5, - style: 'dark', - // pitch: 60 - }), - }); - - // pointLayer https://mdn.alipayobjects.com/afts/file/A*O7PBQoWAMP4AAAAAAAAAAAAADrd2AQ/locations.json - - // lineLayer https://mdn.alipayobjects.com/afts/file/A*Q_x7TLOMcrAAAAAAAAAAAAAADrd2AQ/flows-2016.json - - // fetch locations data - - fetch('https://mdn.alipayobjects.com/afts/file/A*O7PBQoWAMP4AAAAAAAAAAAAADrd2AQ/locations.json') - .then(res => res.json()) - .then(fill => { - const filllayer = new PolygonLayer({ - autoFit:true, - }) - .source(fill) - .shape('fill') - .color('#aaa') - // scene.addLayer(filllayer); - - const pointdata = fill.features.map((item:any) => { - return item.properties; - }); - - const circleLayer = new PointLayer({ - zIndex: 1, - }).source(pointdata, { - parser: { - type: 'json', - coordinates: 'centroid', - } - }) - .shape('circle') - .size(10) - .color('rgb(8, 64, 129)') - .style({ - stroke: '#fff', - strokeWidth: 2, - } - ) - - // scene.addLayer(circleLayer); - - fetch('https://mdn.alipayobjects.com/afts/file/A*Q_x7TLOMcrAAAAAAAAAAAAAADrd2AQ/flows-2016.json') - .then(res => res.json()) - .then(lineData => { - const pointObj= {}; - pointdata.forEach((item:any) => { - pointObj[item.abbr] = item; - }) - - const oddata = lineData.map((item:any) => { - return { - ...item, - coordinates:[pointObj[item.origin].centroid,pointObj[item.dest].centroid] - } - }).sort((a:any,b:any) => { - return a.count - b.count; - }); - - - const layer = new LineLayer({ - zIndex: 0, - autoFit:true - }) - .source(oddata, { - parser: { - type: 'json', - coordinates: 'coordinates', - } - }) - .scale('count', { - type: 'quantile', - }) - .size('count', [0.5, 1, 2,2,2,6,8, 10]) - .shape('flowline') - .color('count',[ - '#fef6b5', - '#ffdd9a', - '#ffc285', - '#ffa679', - '#fa8a76', - '#f16d7a', - '#e15383', - ]) - .style({ - // symbol:{ - // target:'halfTriangle', - // source:'none', - // }, - opacity: { - field: 'count', - value: [0.2,0.4,0.6,0.8], - }, - // opacity:1, - gapWidth: 1, - offsets:{ - field: 'count', - value:()=>{ - return [20, 20] - } - },// 支持数据映射 - strokeWidth: 1, - strokeOpacity:1, - stroke: '#000', - }); - scene.addLayer(layer); - - }) - - }) - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/demos/greatcircleline.tsx b/legacy/dev-demos/src/features/line/demos/greatcircleline.tsx deleted file mode 100644 index 718ffa2d944..00000000000 --- a/legacy/dev-demos/src/features/line/demos/greatcircleline.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { LineLayer, Scene, Source } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - // pitch: 60 - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [116.371436,39.942372], - [121.467025,31.2327], - ], - ], - }, - }, - ], - }; - - const geoData2 = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'LineString', - coordinates: [ - [112.548194,37.786985], - [102.92417,24.9848] - ], - }, - }, - ], - }; - const source = new Source(geoData); - const source2 = new Source(geoData2); - - // scene.on('zoom', e => console.log(e)) - //北京-上海 - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(5) - .shape('greatcircle') - .color('#f00') - .style({ - lineType:'dash', - sourceColor: '#00f', - targetColor: '#0f0', - opacity: 1, - }); - //太原-昆明 - const layer2 = new LineLayer({ blend: 'normal' }) - .source(source2) - .size(5) - .shape('greatcircle') - .color('#f00') - .style({ - opacity: 1, - }); - scene.on('loaded', () => { - scene.addLayer(layer); - // scene.addLayer(layer2); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/line.tsx b/legacy/dev-demos/src/features/line/demos/line.tsx deleted file mode 100644 index ba8be133f10..00000000000 --- a/legacy/dev-demos/src/features/line/demos/line.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { Map,GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [99.228515625, 37.43997405227057], - [100.72265625, 27.994401411046148], - [110, 27.994401411046148], - [110, 25], - [100, 25], - ], - [ - [108.544921875, 37.71859032558816], - [112.412109375, 32.84267363195431], - [115, 32.84267363195431], - [115, 35], - ], - ], - }, - }, - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [110, 30], - [120, 30], - [120, 40], - ], - ], - }, - }, - ], - }; - const source = new Source(geoData); - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(10) - .shape('line') - .color('#f00') - .style({ - opacity:0.6 - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineAnimate.tsx b/legacy/dev-demos/src/features/line/demos/lineAnimate.tsx deleted file mode 100644 index 8ad5d65efec..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineAnimate.tsx +++ /dev/null @@ -1,70 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect(async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json', - ); - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [110.19382669582967, 40.258134], - pitch: 0, - zoom: 3, - style: 'dark', - }), - }); - const data = await response.json(); - data.features = data.features.map((fe: any) => { - if (fe.properties.saldo < 0) { - fe.geometry.coordinates = fe.geometry.coordinates.reverse(); - } - return fe; - }); - const lineLayer = new LineLayer({ - blend: 'normal', - autoFit: true, - }); - lineLayer - .source(data) - .shape('line') - .size('saldo', [0.4, 0.8]) - .color('saldo', (v) => { - return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)'; - }) - .animate({ - enable: true, - interval: 0.1, - duration: 3, - trailLength: 0.2, - }) - .style({ - opacity: 1, - }) - scene.addLayer(lineLayer); - // scene.render() - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineArc3d.tsx b/legacy/dev-demos/src/features/line/demos/lineArc3d.tsx deleted file mode 100644 index 561d0080212..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineArc3d.tsx +++ /dev/null @@ -1,138 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - pitch: 40, - center: [3.438, 40.16797], - zoom: 0, - viewMode: '3D', - style: 'dark', - }), - }); - - scene.on('loaded', () => { - scene.addImage( - 'plane', - 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg', - ); - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json', - ).then((d) => d.json()), - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json', - ).then((d) => d.text()), - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json', - ).then((d) => d.text()), - ]).then(function onLoad([world, dot, flyline]) { - const dotData = eval(dot); - // @ts-ignore - const flydata = eval(flyline).map((item) => { - // @ts-ignore - const latlng1 = item.from.split(',').map((e) => { - return e * 1; - }); - // @ts-ignore - const latlng2 = item.to.split(',').map((e) => { - return e * 1; - }); - return { coord: [latlng1, latlng2] }; - }); - - const worldLine = new LineLayer() - .source(world) - .color('#41fc9d') - .size(0.5) - .style({ - opacity: 0.4, - }); - const dotPoint = new PointLayer() - .source(dotData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .color('#ffed11') - .animate(true) - .size(40) - .style({ - opacity: 1.0, - }); - const flyLine = new LineLayer({ blend: 'normal' }) - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord', - }, - }) - .color('#00ff00') - // .texture('plane') - .shape('arc3d') - .size(10) - // .active(true) - .animate({ - duration: 1, - interval: 0.2, - trailLength: 1.0, - }) - .style({ - // textureBlend: 'replace', - // lineTexture: true, // 开启线的贴图功能 - iconStep: 10, // 设置贴图纹理的间距 - opacity: 1, - sourceColor: '#f00', - targetColor: '#0f0', - }); - - const flyLine2 = new LineLayer() - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord', - }, - }) - .color('#ff6b34') - .shape('arc3d') - // .shape('arc') - .size(1) - // .active(true) - .style({ - lineType: 'dash', - dashArray: [5, 5], - opacity: 0.5, - }); - // scene.addLayer(worldLine); - // scene.addLayer(dotPoint); - // scene.addLayer(flyLine2); - scene.addLayer(flyLine); - - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineArcLinear.tsx b/legacy/dev-demos/src/features/line/demos/lineArcLinear.tsx deleted file mode 100644 index e55488a4ef6..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineArcLinear.tsx +++ /dev/null @@ -1,142 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap,Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - // pitch: 60 - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [99.228515625, 37.43997405227057], - [100.72265625, 27.994401411046148], - ], - [ - [108.544921875, 37.71859032558816], - [112.412109375, 32.84267363195431], - ], - ], - }, - }, - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [116.43,39.97], - [108.39,22.91], - ], - ], - }, - }, - ], - }; - const source = new Source(geoData); - - - // scene.on('zoom', e => console.log(e)) - - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(2) - .shape('arc') - .color('#f00') - .style({ - lineType:'dash', - // thetaOffset: 'offset' - // segmentNumber: 10, - sourceColor: '#f00', - targetColor: '#0f0', - thetaOffset: 0.5, - }); - - - const point = new PointLayer({ blend: 'normal', zIndex: 1 }) - .source([{ - lng:116.43, - lat:39.97 - },{ - lng:108.39, - lat:22.91 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(10) - .color('blue'); - const point2 = new PointLayer({ blend: 'normal', zIndex: 1 }) - .source([{ - lng:116.43, - lat:39.97 - },{ - lng:108.39, - lat:22.91 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(100000) - .color('blue') - .style({ - opacity:0.5, - unit:'meter' - }) - // scene.addLayer(point); - // scene.addLayer(point2); - - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineArcPlane.tsx b/legacy/dev-demos/src/features/line/demos/lineArcPlane.tsx deleted file mode 100644 index 8790f71ea91..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineArcPlane.tsx +++ /dev/null @@ -1,125 +0,0 @@ -// @ts-ignore -import { LineLayer, PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - pitch: 40, - center: [40, 40.16797], - style: 'dark', - zoom: 2.5, - }), - }); - scene.addImage( - 'plane', - 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg', - ); - scene.on('loaded', () => { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json', - ).then((d) => d.json()), - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json', - ).then((d) => d.text()), - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json', - ).then((d) => d.text()), - ]).then(function onLoad([world, dot, flyline]) { - const dotData = eval(dot); - // @ts-ignore - const flydata = eval(flyline).map((item) => { - // @ts-ignore - const latlng1 = item.from.split(',').map((e) => { - return e * 1; - }); - // @ts-ignore - const latlng2 = item.to.split(',').map((e) => { - return e * 1; - }); - return { coord: [latlng1, latlng2] }; - }); - - const worldLine = new LineLayer() - .source(world) - .color('#41fc9d') - .size(0.5) - .style({ - opacity: 0.4, - }); - const dotPoint = new PointLayer() - .source(dotData, { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .color('#ffed11') - .animate({ enable: !process.env.CI }) - .size(40); - const flyLine = new LineLayer({ blend: 'normal' }) - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord', - }, - }) - .color('#ff6b34') - .texture('plane') - .shape('arc') - .size(15) - .animate( - process.env.CI - ? { enable: false } - : { - duration: 1, - interval: 0.2, - trailLength: 0.5, - }, - ) - .style({ - textureBlend: 'replace', - lineTexture: true, // 开启线的贴图功能 - iconStep: 10, // 设置贴图纹理的间距 - }); - - const flyLine2 = new LineLayer() - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord', - }, - }) - .color('#ff6b34') - .shape('arc') - .size(1) - .style({ - lineType: 'dash', - dashArray: [5, 5], - opacity: 0.5, - }); - scene.addLayer(worldLine); - scene.addLayer(dotPoint); - scene.addLayer(flyLine2); - scene.addLayer(flyLine); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineArrow.tsx b/legacy/dev-demos/src/features/line/demos/lineArrow.tsx deleted file mode 100644 index 68e2c4084d5..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineArrow.tsx +++ /dev/null @@ -1,159 +0,0 @@ -// @ts-ignore -import { LineLayer, Scene, PointLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap,Mapbox,Map,BaiduMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const symbol = { - source:'classic', - target:'classic', - }; - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [ 120.15, 30.3 ], - zoom: 5, - style: 'dark' - }) - }); - const scene2 = new Scene({ - id: 'map2', - renderer: process.env.renderer, - map: new BaiduMap({ - center: [ 120.15, 30.3 ], - zoom: 9, - style: 'dark' - }) - }); - - - const lineLayer = new LineLayer({autoFit: true}) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - - [ - 120.1863098144, - 30.321915039121 - ], - [ - 120.3401184082, - 30.321915039121 + 0.02 * 1, - ] - ] - } - } - ] - } - ) - .size(20) - .shape('flowline') - .color('#00f') - .style({ - strokeWidth: 1, - stroke: '#f00', - gapWidth: 10, - opacity: 1, - symbol - } - - ); - - const lineLayer2 = new LineLayer({autoFit: true}) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - - [ - 120.1863098144, - 30.321915039121 - ], - [ - 120.3401184082, - 30.321915039121 - ] - ] - } - }, - // { - // type: 'Feature', - // properties: {}, - // geometry: { - // type: 'LineString', - // coordinates: [ - - - // [ - // 120.3401184082, - // 30.321915039121 - // ], - // [ - // 120.1863098144, - // 30.321915039121 - // ], - // ] - // } - // } - ] - } - ) - .size(10) - .shape('flowline') - .color('#00f') - .style({ - strokeWidth: 1, - stroke: '#f00', - gapWidth: 10, - opacity: 1, - symbol,} - - ); - scene.on('loaded', () => { - scene.addLayer(lineLayer); - scene.startAnimate(); - }); - scene2.on('loaded', () => { - scene2.addLayer(lineLayer2); - // scene.startAnimate(); - }); - }, []); - return ( -
-
-
-
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/linePopulation.tsx b/legacy/dev-demos/src/features/line/demos/linePopulation.tsx deleted file mode 100644 index 6d150156854..00000000000 --- a/legacy/dev-demos/src/features/line/demos/linePopulation.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -/** - * @private - * 点数据转线数据 - * @param data Point类型的数据 - * @param minValue 最小值 用于数据过滤 - * @returns LineString类型的数据 - */ -function processPointToLine(data, minValue = 0) { - // 根据纬度对点进行分组 - const groupedPoints = data.features.reduce((acc, point) => { - const latitude = point.geometry.coordinates[1]; - if (!acc[latitude]) { - acc[latitude] = []; - } - acc[latitude].push(point); - return acc; - }, {}); - // 将每个纬度分组中的点连接成一条线 - let lines = Object.values(groupedPoints).map((points) => { - let result = []; - let lastLon = -500; - points = points.filter((v) => { - return parseFloat(v.properties.value) > minValue; - }); - for (let i = 0; i < points.length; i++) { - if (Math.abs(points[i].geometry.coordinates[0] - lastLon) >= 2) { - const line = { - type: 'Feature', - geometry: { type: 'LineString', coordinates: [] }, - properties: { heights: [] }, - }; - result.push(line); - } - const line = result[result.length - 1]; - const coordinates = points[i].geometry.coordinates; - coordinates[2] = parseFloat(points[i].properties.value); - line.geometry.coordinates.push(points[i].geometry.coordinates); - line.properties.heights.push(coordinates[2]); - lastLon = points[i].geometry.coordinates[0]; - } - result = result.filter((v) => { - return v.geometry.coordinates.length > 1; - }); - return result; - }); - lines = lines.flat(1); - // 创建包含多条线的新 GeoJSON 对象 - return { - type: 'FeatureCollection', - features: lines, - }; -} -/** - * @private - * csv转geojson - * @param csvString csv格式字符串 - * @returns geojson格式对象 - */ -function csvToGeojson(csvString) { - const dataArray = csvString.split('\n'); - const geojson = { - type: 'FeatureCollection', - features: [], - }; - for (let i = 1; i < dataArray.length; i++) { - const data = dataArray[i]; - const [x, y, value] = data.split(',').map(parseFloat); - const feature = { - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [x, y], - }, - properties: { - value: value, - }, - }; - geojson.features.push(feature); - } - return geojson; -} -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - pitch: 40, - style: 'dark', - center: [43.686824, -4.665872], - zoom: 1.2, - token: - 'pk.eyJ1Ijoic2tvcm5vdXMiLCJhIjoiY2s4dDBkNjY1MG13ZTNzcWEyZDYycGkzMyJ9.tjfwvJ8G_VDmXoClOyxufg', - }), - }); - const guiConfig = { - height: 30, - minValue: 10000, - color: '#0D5EFF', - // opacity:1.0, - blend: 'additive', - }; - let layer, originData, gui; - - scene.on('loaded', () => { - fetch( - 'https://static.observableusercontent.com/files/c517bc4710d3a5daf34549dde51fd3a0e457a62ce3113847cf804dd21b78a95dd0ecc0b975455c4c162f87e74e665e6994bb9bbd457a420e46d6b6179200b47d', - ) - .then((res) => res.text()) - .then((data) => { - originData = csvToGeojson(data); - const dataSource = processPointToLine(originData, guiConfig.minValue); - layer = new LineLayer({ - blend: guiConfig.blend, - }) - .source(dataSource) - .size(1) - .shape('simple') - .style({ - vertexHeightScale: 0.01 * guiConfig.height, - // opacity: guiConfig.opacity - }) - .color(guiConfig.color); - scene.addLayer(layer); - }); - gui = new dat.GUI(); - gui.domElement.style.position = 'absolute'; - gui.domElement.style.top = '202px'; - gui.domElement.style.right = '220px'; - gui.add(guiConfig, 'height', 1, 100, 0.1).onChange((v) => { - layer.style({ - vertexHeightScale: 0.01 * v, - }); - scene.render(); - }); - gui.add(guiConfig, 'minValue', 10000, 1000000, 1).onChange((v) => { - const dataSource = processPointToLine(originData, guiConfig.minValue); - layer.setData(dataSource); - }); - - gui.add(guiConfig, 'blend', ['additive', 'normal']).onChange((v) => { - layer.setBlend(v); - }); - gui.addColor(guiConfig, 'color').onChange((v) => { - layer.color(v); - scene.render(); - }); - }); - return () => { - gui.destroy(); - }; - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineTexture.tsx b/legacy/dev-demos/src/features/line/demos/lineTexture.tsx deleted file mode 100644 index 09dd117c9ce..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineTexture.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [120.15, 30.246], - pitch: 0, - zoom: 13.5, - style: 'dark', - pitchEnable: false, - rotation: -90, - }), - }); - - scene.addImage( - 'arrow', - 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', - ); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', - ) - .then((res) => res.json()) - .then((data) => { - const colors = ['#66c2a4', '#2ca25f', '#006d2c']; - const layer = new LineLayer({}) - .source(data) - .size(2.5) - .shape('line') - .texture('arrow') - .color('', () => { - return colors[Math.floor(Math.random() * colors.length)]; - }) - .animate({ - interval: 1, // 间隔 - duration: 1, // 持续时间，延时 - trailLength: 2, // 流线长度 - }) - .style({ - opacity: 0.6, - lineTexture: true, // 开启线的贴图功能 - iconStep: 20, // 设置贴图纹理的间距 - borderWidth: 0.4, // 默认文 0，最大有效值为 0.5 - borderColor: '#fff', // 默认为 #ccc - }); - scene.addLayer(layer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineWorker.tsx b/legacy/dev-demos/src/features/line/demos/lineWorker.tsx deleted file mode 100644 index e11488db11f..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineWorker.tsx +++ /dev/null @@ -1,55 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 2, - }), - }); - const layer = new LineLayer({ workerEnabled: true }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'LineString', - coordinates: [ - [95.625, 38.47939467327645], - [115.48828125000001, 28.92163128242129], - ], - }, - }, - ], - }) - .shape('line') - .color('#f00') - .size(5); - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/line_stroke.tsx b/legacy/dev-demos/src/features/line/demos/line_stroke.tsx deleted file mode 100644 index d712637a349..00000000000 --- a/legacy/dev-demos/src/features/line/demos/line_stroke.tsx +++ /dev/null @@ -1,100 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore - } from '@antv/l7'; - // @ts-ignore - import { Map,GaodeMap } from '@antv/l7-maps'; - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [99.228515625, 37.43997405227057], - [100.72265625, 27.994401411046148], - [110, 27.994401411046148], - [110, 25], - [100, 25], - ], - [ - [108.544921875, 37.71859032558816], - [112.412109375, 32.84267363195431], - [115, 32.84267363195431], - [115, 35], - ], - ], - }, - }, - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [110, 30], - [120, 30], - [120, 40], - ], - ], - }, - }, - ], - }; - const source = new Source(geoData); - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(10) - .shape('line') - .color('#f00') - .style({ - strokeWidth: 0.5, - stroke: '#00f', - }); - - - scene.on('loaded', () => { - scene.startAnimate(); - scene.addLayer(layer); - - - }); - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/demos/linearc.tsx b/legacy/dev-demos/src/features/line/demos/linearc.tsx deleted file mode 100644 index ce4be8649b0..00000000000 --- a/legacy/dev-demos/src/features/line/demos/linearc.tsx +++ /dev/null @@ -1,152 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap,Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - // pitch: 60 - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [116.371436,39.942372], - [121.467025,31.2327], - ], - ], - }, - }, - ], - }; - - const geoData2 = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'LineString', - coordinates: [ - [112.548194,37.786985], - [102.92417,24.9848] - ], - }, - }, - ], - }; - const source = new Source(geoData); - const source2 = new Source(geoData2); - - - // scene.on('zoom', e => console.log(e)) - - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(2) - .shape('arc') - .color('#f00') - .style({ - // lineType:'dash', - // thetaOffset: 'offset' - // segmentNumber: 10, - thetaOffset: 0.5, - }); - const layer2 = new LineLayer({ blend: 'normal' }) - .source(source2) - .size(2) - .shape('arc') - .color('#f00') - .style({ - lineType:'dash', - // thetaOffset: 'offset' - // segmentNumber: 10, - thetaOffset: 0.5, - }); - - const point = new PointLayer({ blend: 'normal', zIndex: 1 }) - .source([{ - lng:116.43, - lat:39.97 - },{ - lng:108.39, - lat:22.91 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(10) - .color('blue'); - const point2 = new PointLayer({ blend: 'normal', zIndex: 1 }) - .source([{ - lng:116.43, - lat:39.97 - },{ - lng:108.39, - lat:22.91 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(100000) - .color('blue') - .style({ - opacity:0.5, - unit:'meter' - }) - // scene.addLayer(point); - // scene.addLayer(point2); - - - scene.on('loaded', () => { - // scene.addLayer(layer); - scene.addLayer(layer2); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineblur.tsx b/legacy/dev-demos/src/features/line/demos/lineblur.tsx deleted file mode 100644 index 4582a484790..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineblur.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// @ts-ignore -import { LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [122, 28], - zoom: 5, - style: 'dark', - }), - }); - - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/55304d8d-4cb0-49e0-9d95-9eeacbe1c80a.json', - ) - .then((res) => res.json()) - .then((data) => { - const blurLine = new LineLayer() - .source(data) - .size(5) - .style({ - opacity: 0.8, - sourceColor: '#f00', - targetColor: '#ff0', - linearDir: 'horizontal', - }); - scene.addLayer(blurLine); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/linedash.tsx b/legacy/dev-demos/src/features/line/demos/linedash.tsx deleted file mode 100644 index 8cf2a04ab11..00000000000 --- a/legacy/dev-demos/src/features/line/demos/linedash.tsx +++ /dev/null @@ -1,88 +0,0 @@ -// @ts-ignore -import { LineLayer, PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap,Mapbox,Map, } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Mapbox({ - center: [116.3956, 39.9392], - zoom: 10, - token:"pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g", - }), - debug: true, - }); - - scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then(res => res.json()) - .then(data => { - const layer = new LineLayer({ - autoFit:true, - }) - .source(data) - .size('ELEV', h => { - return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20 ]; - }) - .shape('line') - .scale('ELEV', { - type: 'quantize' - }) - .style({ - lineType: 'dash', - opacity:1, - dashArray: [5, 5], - heightfixed: true - }) - .color('ELEV', [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#CEF8D6' - ]); - scene.addLayer(layer); - }); - // fetch( - // 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json', - // ) - // .then((res) => res.json()) - // .then((data) => { - // const layer = new LineLayer({autoFit:true}) - // .source(data) - // .size(1.5) - // .shape('line') - // .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']) - // .active(true) - // .style({ - // lineType: 'dash', - // opacity:1, - // dashArray: [5, 5], - // raisingHeight: 100 - // }); - // scene.addLayer(layer); - - - - // }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/lineheight.tsx b/legacy/dev-demos/src/features/line/demos/lineheight.tsx deleted file mode 100644 index 2247c0c3fb7..00000000000 --- a/legacy/dev-demos/src/features/line/demos/lineheight.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Mapbox({ - pitch: 40, - style: 'light', - center: [102.600579, 23.114887], - zoom: 14.66, - }), - }); - - scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then((res) => res.json()) - .then((data) => { - const layer = new LineLayer({}) - .source(data) - .size('ELEV', (h) => { - return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap - }) - .shape('line') - .scale('ELEV', { - type: 'quantize', - }) - .style({ - heightfixed: true, - }) - .color( - 'ELEV', - [ - '#E4682F', - '#FF8752', - '#FFA783', - '#FFBEA8', - '#FFDCD6', - '#EEF3FF', - '#C8D7F5', - '#A5C1FC', - '#7FA7F9', - '#5F8AE5', - ].reverse(), - ); - scene.addLayer(layer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/linelinear.tsx b/legacy/dev-demos/src/features/line/demos/linelinear.tsx deleted file mode 100644 index baf946b6fcf..00000000000 --- a/legacy/dev-demos/src/features/line/demos/linelinear.tsx +++ /dev/null @@ -1,99 +0,0 @@ -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { Map,GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [99.228515625, 37.43997405227057], - [100.72265625, 27.994401411046148], - [110, 27.994401411046148], - [110, 25], - [100, 25], - ], - [ - [108.544921875, 37.71859032558816], - [112.412109375, 32.84267363195431], - [115, 32.84267363195431], - [115, 35], - ], - ], - }, - }, - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [110, 30], - [120, 30], - [120, 40], - ], - ], - }, - }, - ], - }; - const source = new Source(geoData); - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(10) - .shape('line') - .color('#f00') - .style({ - lineType:'dash', - opacity:1, - sourceColor: '#f00', - targetColor: '#0f0', - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/linewall.tsx b/legacy/dev-demos/src/features/line/demos/linewall.tsx deleted file mode 100644 index 02ac84d90c0..00000000000 --- a/legacy/dev-demos/src/features/line/demos/linewall.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap,Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [115, 30.258134], - pitch: 40, - zoom: 6, - }), - }); - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - testOpacity: 0.8, - }, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [113.8623046875, 30.031055426540206], - [116.3232421875, 30.031055426540206], - [117, 30], - [117, 31], - [116, 30.5], - ], - ], - }, - }, - ], - }; - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', - ); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json' - ) - .then(res => res.json()) - .then(data => { - const layer = new LineLayer({autoFit: true}) - .source(geoData) - .size(40) - .shape('wall') - .style({ - opacity:{field:'testOpacity'}, - sourceColor: '#0DCCFF', - targetColor: 'rbga(255,255,255, 0)' - }); - scene.addLayer(layer); - }); - }); - - - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/demos/simplelines.tsx b/legacy/dev-demos/src/features/line/demos/simplelines.tsx deleted file mode 100644 index 4d7b0b16708..00000000000 --- a/legacy/dev-demos/src/features/line/demos/simplelines.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import { - LineLayer, - Scene, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { polygonToLineString, MultiPolygon } from '@turf/turf'; - -function getImageData(img: HTMLImageElement) { - const canvas: HTMLCanvasElement = document.createElement('canvas'); - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - const { width, height } = img; - canvas.width = width; - canvas.height = height; - - ctx.drawImage(img, 0, 0, width, height); - const imageData = ctx.getImageData(0, 0, width, height); - - return imageData; -} - -function getLatData(data: number[]) { - const size = Math.floor(Math.sqrt(data.length)); - - const arr = []; - const startLng = 110; - const lngStep = 5 / (size - 1); - const startLat = 30; - const latStep = -5 / (size - 1); - for (let i = 0; i < size; i++) { - const arr2 = []; - for (let j = 0; j < size; j++) { - const index = i + j * size; - const x = startLng + lngStep * i; - const y = startLat + latStep * j; - // @ts-ignore - arr2.push([x, y, data[index]]); - } - // @ts-ignore - arr.push(arr2); - } - return arr; -} - -function getLngData(data: number[]) { - const size = Math.floor(Math.sqrt(data.length)); - const arr = []; - const startLng = 110; - const lngStep = 5 / (size - 1); - const startLat = 30; - const latStep = -5 / (size - 1); - - for (let i = 0; i < size; i++) { - const arr2 = []; - for (let j = 0; j < size; j++) { - const index = i * size + j; - const x = startLng + lngStep * j; - const y = startLat + latStep * i; - // @ts-ignore - arr2.push([x, y, data[index]]); - } - // @ts-ignore - arr.push(arr2); - } - return arr; -} - -function getR(data: Uint8ClampedArray) { - const arr = []; - for (let i = 0; i < data.length; i += 4) { - // @ts-ignore - arr.push(data[i]); - } - return arr; -} - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - // center: [121.268, 30.3628], - // center: [115.565185546875,41.31082388091818], - // center: [112.796630859375, 21.80030805097259], - center: [112.796630859375, 27], - pitch: 60, - // style: 'blank', - // zoom: 3, - zoom: 6, - }), - }); - - const multipolygon = { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [112.796630859375, 21.80030805097259], - [112.796630859375, 21.601258036965902], - [112.69775390625, 21.70336934552425], - [112.796630859375, 21.80030805097259], - ], - ], - [ - [ - [113.5491943359375, 22.350075806124863], - [113.5986328125, 22.304343762932234], - [113.499755859375, 22.2026634080092], - [113.2965087890625, 22.2026634080092], - [113.1976318359375, 22.004174972902007], - [113.0987548828125, 22.10090935057272], - [112.9998779296875, 22.10090935057272], - [112.9998779296875, 21.902277966668635], - [112.8955078125, 21.902277966668635], - [112.8515625, 21.94304553343818], - [112.796630859375, 22.004174972902007], - [112.74169921875, 21.94304553343818], - [112.598876953125, 21.80030805097259], - [112.3956298828125, 21.80030805097259], - [112.3956298828125, 21.70336934552425], - [112.2967529296875, 21.70336934552425], - [112.1978759765625, 21.80030805097259], - [112.060546875, 21.80030805097259], - [112.060546875, 22.350075806124863], - [113.5491943359375, 22.350075806124863], - ], - ], - [ - [ - [114.2962646484375, 22.350075806124863], - [114.1973876953125, 22.304343762932234], - [114.049072265625, 22.350075806124863], - [114.2962646484375, 22.350075806124863], - ], - ], - ], - }, - properties: { - ECO_NAME: 'Mongolian-Manchurian grassland', - BIOME_NAME: 'Temperate Grasslands, Savannas & Shrublands', - REALM: 'Palearctic', - NNH: 3, - NNH_NAME: 'Nature Could Recover', - COLOR: '#F6FC38', - COLOR_BIO: '#FEFF73', - COLOR_NNH: '#F9A91B', - }, - }; - - const layer = new LineLayer() - // .source({ - // type: 'FeatureCollection', - // features: [ - // { - // type: 'Feature', - // properties: {}, - // geometry: { - // type: 'MultiLineString', - // coordinates: [ - // [ - // [80, 30, 5000], - // [150, 30, 5000], - // [150, 10, 5000], - // ], - // [ - // [120, 50, 5000], - // [120, 30, 5000], - // ], - // ], - // }, - // }, - // { - // type: 'Feature', - // properties: {}, - // geometry: { - // type: 'MultiLineString', - // coordinates: [ - // [ - // [100, 35, 100], - // [120, 50, 100], - // [120, 20, 100], - // [130, 20, 100], - // ], - // ], - // }, - // }, - // ], - // }) - // @ts-ignore - // .source(polygonToLine(testdata2)) - // .source(testdata) - .source(polygonToLineString((multipolygon as unknown) as MultiPolygon)) - - .shape('simple') - .color('#f00') - .style({ - // vertexHeightScale: 2000, - sourceColor: '#f00', - targetColor: '#0f0', - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - - const img: HTMLImageElement = new Image(); - img.crossOrigin = 'none'; - img.src = - 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UkvYRYS5jTAAAAAAAAAAAAAAARQnAQ'; - img.onload = function() { - const data = getImageData(img); - const rData = getR(data.data); - const d1 = getLngData(rData); - const d2 = getLatData(rData); - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'MultiLineString', - coordinates: d1, - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'MultiLineString', - coordinates: d2, - }, - }, - ], - }; - // console.log(geoData) - const layer = new LineLayer({}) - .source(geoData) - .size(1) - .shape('simple') - .color('#f00') - .style({ - vertexHeightScale: 2000, - opacity: 0.4, - }); - scene.addLayer(layer); - }; - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/line/flowline.md b/legacy/dev-demos/src/features/line/flowline.md deleted file mode 100644 index 7a6688b7336..00000000000 --- a/legacy/dev-demos/src/features/line/flowline.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - flowline - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/line.md b/legacy/dev-demos/src/features/line/line.md deleted file mode 100644 index 7446f8efa82..00000000000 --- a/legacy/dev-demos/src/features/line/line.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - Normal - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineAnimate.md b/legacy/dev-demos/src/features/line/lineAnimate.md deleted file mode 100644 index 2decd3f3042..00000000000 --- a/legacy/dev-demos/src/features/line/lineAnimate.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - animate - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArc.md b/legacy/dev-demos/src/features/line/lineArc.md deleted file mode 100644 index a7b1e405856..00000000000 --- a/legacy/dev-demos/src/features/line/lineArc.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - arc - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArc3d.md b/legacy/dev-demos/src/features/line/lineArc3d.md deleted file mode 100644 index c7275bddeb5..00000000000 --- a/legacy/dev-demos/src/features/line/lineArc3d.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - arc3d - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArc3dEarth.md b/legacy/dev-demos/src/features/line/lineArc3dEarth.md deleted file mode 100644 index 2f033bb7494..00000000000 --- a/legacy/dev-demos/src/features/line/lineArc3dEarth.md +++ /dev/null @@ -1,95 +0,0 @@ -### Line - arc3d_earth - -```tsx -import { Scene, EarthLayer, LineLayer } from '@antv/l7'; -import { Earth } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer:'device', - map: new Earth({}), - }); - - // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色 - scene.setBgColor('#333'); - - const earthlayer = new EarthLayer() - .source( - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - }, - }, - ) - .shape('base') - .style({ - globalOptions: { - ambientRatio: 0.6, // 环境光 - diffuseRatio: 0.4, // 漫反射 - specularRatio: 0.1, // 高光反射 - // earthTime: 4.0 - earthTime: 0.1, - }, - }) - .animate(true); - - const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere'); - - const bloomLayer = new EarthLayer() - .color('#fff') - .shape('bloomSphere') - .style({ - opacity: 0.7, - }); - - scene.on('loaded', () => { - scene.addLayer(earthlayer); - scene.addLayer(atomLayer); - scene.addLayer(bloomLayer); - - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/20a69b46-3d6d-4ab5-b8b5-150b6aa52c88.json', - ) - .then((res) => res.json()) - .then((flydata) => { - const flyLine = new LineLayer({ blend: 'normal' }) - .source(flydata, { - parser: { - type: 'json', - coordinates: 'coord', - }, - }) - .color('#b97feb') - .shape('earthArc3d') - .size(0.5) - .active(true) - .animate({ - interval: 2, - trailLength: 2, - duration: 1, - }) - .style({ - segmentNumber: 60, - globalArcHeight: 20, - sourceColor: '#f00', - targetColor: '#0f0', - }); - scene.addLayer(flyLine); - }); - - }); - }, []); - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/line/lineArcDeg.md b/legacy/dev-demos/src/features/line/lineArcDeg.md deleted file mode 100644 index a3d5c45201e..00000000000 --- a/legacy/dev-demos/src/features/line/lineArcDeg.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - 弧线角度 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArcLinear.md b/legacy/dev-demos/src/features/line/lineArcLinear.md deleted file mode 100644 index 34a0240ce94..00000000000 --- a/legacy/dev-demos/src/features/line/lineArcLinear.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - arcLinear - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArcPlane.md b/legacy/dev-demos/src/features/line/lineArcPlane.md deleted file mode 100644 index be2f92bfd2f..00000000000 --- a/legacy/dev-demos/src/features/line/lineArcPlane.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - arc - plane - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineArrow.md b/legacy/dev-demos/src/features/line/lineArrow.md deleted file mode 100644 index 1a4f0c4c6d3..00000000000 --- a/legacy/dev-demos/src/features/line/lineArrow.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - arrow - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineGreatcircle.md b/legacy/dev-demos/src/features/line/lineGreatcircle.md deleted file mode 100644 index 7b700830a9f..00000000000 --- a/legacy/dev-demos/src/features/line/lineGreatcircle.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - greatCircle - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/linePopulation.md b/legacy/dev-demos/src/features/line/linePopulation.md deleted file mode 100644 index 31ad423f720..00000000000 --- a/legacy/dev-demos/src/features/line/linePopulation.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - Population - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineTexture.md b/legacy/dev-demos/src/features/line/lineTexture.md deleted file mode 100644 index 1aad27b587a..00000000000 --- a/legacy/dev-demos/src/features/line/lineTexture.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - texture - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineWorker.md b/legacy/dev-demos/src/features/line/lineWorker.md deleted file mode 100644 index fdb577023e4..00000000000 --- a/legacy/dev-demos/src/features/line/lineWorker.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - worker - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/line_stroke.md b/legacy/dev-demos/src/features/line/line_stroke.md deleted file mode 100644 index d1613f39a93..00000000000 --- a/legacy/dev-demos/src/features/line/line_stroke.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - stroke - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/linearline.md b/legacy/dev-demos/src/features/line/linearline.md deleted file mode 100644 index 3383851f69b..00000000000 --- a/legacy/dev-demos/src/features/line/linearline.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - linear - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineblur.md b/legacy/dev-demos/src/features/line/lineblur.md deleted file mode 100644 index 1ad3218a8c8..00000000000 --- a/legacy/dev-demos/src/features/line/lineblur.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - blur - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/linedash.md b/legacy/dev-demos/src/features/line/linedash.md deleted file mode 100644 index eeea7d0b097..00000000000 --- a/legacy/dev-demos/src/features/line/linedash.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - dash - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/lineheight.md b/legacy/dev-demos/src/features/line/lineheight.md deleted file mode 100644 index 40a02eae36a..00000000000 --- a/legacy/dev-demos/src/features/line/lineheight.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - height - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/linewall.md b/legacy/dev-demos/src/features/line/linewall.md deleted file mode 100644 index 611663edeba..00000000000 --- a/legacy/dev-demos/src/features/line/linewall.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - wall - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/simpleLine_linear.md b/legacy/dev-demos/src/features/line/simpleLine_linear.md deleted file mode 100644 index 5ab7281fe9b..00000000000 --- a/legacy/dev-demos/src/features/line/simpleLine_linear.md +++ /dev/null @@ -1,103 +0,0 @@ -### Line - simpleLinear -```tsx -// @ts-ignore -import { - LineLayer, - Scene, - Source, - lineAtOffset, - lineAtOffsetAsyc, - PointLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { Map,GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [105, 32], - zoom: 4, - }), - }); - - const geoData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - offset: 0.3, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [99.228515625, 37.43997405227057], - [100.72265625, 27.994401411046148], - [110, 27.994401411046148], - [110, 25], - [100, 25], - ], - [ - [108.544921875, 37.71859032558816], - [112.412109375, 32.84267363195431], - [115, 32.84267363195431], - [115, 35], - ], - ], - }, - }, - { - type: 'Feature', - properties: { - offset: 0.8, - }, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [110, 30], - [120, 30], - [120, 40], - ], - ], - }, - }, - ], - }; - const source = new Source(geoData); - const layer = new LineLayer({ blend: 'normal' }) - .source(source) - .size(10) - .shape('simple') - .color('#f00') - .style({ - lineType:'dash', - dashArray:[0.5,0.5], - opacity:1, - sourceColor: '#f00', - targetColor: '#0f0', - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - - }); - }, []); - return ( -
- ); -}; -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/line/simpleline.md b/legacy/dev-demos/src/features/line/simpleline.md deleted file mode 100644 index 4deb1f703ab..00000000000 --- a/legacy/dev-demos/src/features/line/simpleline.md +++ /dev/null @@ -1,2 +0,0 @@ -### Line - simple - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/marker/demos/marker.tsx b/legacy/dev-demos/src/features/marker/demos/marker.tsx deleted file mode 100644 index df01467f0bd..00000000000 --- a/legacy/dev-demos/src/features/marker/demos/marker.tsx +++ /dev/null @@ -1,70 +0,0 @@ -// @ts-ignore -import { Popup,PointLayer, Marker,Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox,TencentMap} from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - map: new TencentMap({ - style: 'normal', - center: [ 120.104446,30.261081 ], - zoom: 19.056 - }) -}); -scene.on('loaded', () => { -// 创建默认 marker - const popup = new Popup({ - offsets: [ 0, 20 ] - }).setText('Hello World 1024'); - - const marker = new Marker() - .setLnglat([ 120.1047383116185,30.261127905299425 ]) - .setPopup(popup); - const marker1 = new Marker() - .setLnglat([ 120.1147383116185,30.261127905299425 ]) - .setPopup(popup); - const pointLayer = new PointLayer({}) - .source([{ - x:120.1047383116185, - y:120.1047383116185 - } - ],{ - parser: { - type: 'json', - x: 'x', - y: 'y', - }, - }) - .shape('circle') - .size(5) - .color('red') - .style({ - opacity: 1, - strokeWidth: 0, - stroke: '#fff', - }); - scene.on('click',(e)=>{ - console.log(e); - }) -scene.addLayer(pointLayer); - scene.addMarker(marker); - scene.addMarker(marker1); - marker.togglePopup(); - marker1.togglePopup(); -}); - - - }, []); - return ( -
- ); - }; diff --git a/legacy/dev-demos/src/features/marker/marker.md b/legacy/dev-demos/src/features/marker/marker.md deleted file mode 100644 index 1c2dddc0971..00000000000 --- a/legacy/dev-demos/src/features/marker/marker.md +++ /dev/null @@ -1,2 +0,0 @@ -### Marker - 标注 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/demos/heatmap.tsx b/legacy/dev-demos/src/features/mask/demos/heatmap.tsx deleted file mode 100644 index 5354fc86deb..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/heatmap.tsx +++ /dev/null @@ -1,112 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 2, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [125.15625000000001, 8.407168163601076], - [116.54296874999999, -21.289374355860424], - [156.26953125, -20.632784250388013], - [150.29296875, 2.1088986592431382], - ], - ], - [ - [ - [78.57421875, 46.92025531537451], - [51.67968749999999, 37.020098201368114], - [87.890625, 28.76765910569123], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', - ) - .then((res) => res.json()) - .then((data) => { - const polygonLayer = new PolygonLayer({ visible: true }) - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.4 }); - const heatmapLayer = new HeatmapLayer({ - maskLayers: [polygonLayer], - // mask: false, - }) - .source(data) - .shape('heatmap') // heatmap3D heatmap - .size('mag', [0, 1.0]) // weight映射通道 - .style({ - intensity: 2, - radius: 20, - opacity: 1.0, - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - scene.addLayer(polygonLayer); - scene.addLayer(heatmapLayer); - - // setTimeout(() => { - // console.log('add mask'); - // // heatmapLayer.addMask(polygonLayer); - // // scene.render(); - - // console.log('disable mask'); - // // heatmapLayer.disableMask(); - // // scene.render(); - // heatmapLayer.enableMask(); - // scene.render(); - // }, 2000); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/heatmapgrid.tsx b/legacy/dev-demos/src/features/mask/demos/heatmapgrid.tsx deleted file mode 100644 index 7d1d9da67a8..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/heatmapgrid.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - // renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 2, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [125.15625000000001, 8.407168163601076], - [116.54296874999999, -21.289374355860424], - [156.26953125, -20.632784250388013], - [150.29296875, 2.1088986592431382], - ], - ], - [ - [ - [78.57421875, 46.92025531537451], - [51.67968749999999, 37.020098201368114], - [87.890625, 28.76765910569123], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', - ) - .then((res) => res.text()) - .then((data) => { - const heatmapLayer = new HeatmapLayer({ - mask: true, - maskInside: true, - maskfence: maskData, - maskColor: '#ff0', - maskOpacity: 0.2, - }) - // const heatmapLayer = new HeatmapLayer({ mask: true, maskInside: false }) - .source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat', - }, - transforms: [ - { - type: 'grid', // grid - size: 20000, - field: 'v', - method: 'sum', - }, - ], - }) - .shape('circle') - .style({ - coverage: 0.9, - angle: 0, - }) - .color( - 'count', - [ - '#8C1EB2', - '#8C1EB2', - '#DA05AA', - '#F0051A', - '#FF2A3C', - '#FF4818', - '#FF4818', - '#FF8B18', - '#F77B00', - '#ED9909', - '#ECC357', - '#EDE59C', - ].reverse(), - ); - scene.addLayer(heatmapLayer); - // scene.addMask(mask1, heatmapLayer.id); - // scene.addMask(mask2, heatmapLayer.id); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/heatmapgrid3d.tsx b/legacy/dev-demos/src/features/mask/demos/heatmapgrid3d.tsx deleted file mode 100644 index 26e91840278..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/heatmapgrid3d.tsx +++ /dev/null @@ -1,105 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - style: 'light', - pitch: 56.499, - center: [114.07737552216226, 22.542656745583486], - rotation: 39.19, - zoom: 12.47985, - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [114.11087036132811, 22.669778674332314], - [114.02847290039062, 22.59372606392931], - [114.11636352539062, 22.485912942320958], - [114.22622680664062, 22.51255695405145], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new HeatmapLayer({ - mask: true, - maskInside: false, - maskColor: '#0f0', - maskfence: maskData, - maskOpacity: 0.3, - }) - .source(data, { - transforms: [ - { - type: 'grid', - size: 100, - field: 'h12', - method: 'sum', - }, - ], - }) - .size('sum', [0, 600]) - .shape('cylinder') - .style({ - coverage: 0.8, - angle: 0, - opacity: 1.0, - }) - .color( - 'sum', - [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#CEF8D6', - ].reverse(), - ); - scene.addLayer(layer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/hexgon.tsx b/legacy/dev-demos/src/features/mask/demos/hexgon.tsx deleted file mode 100644 index 0c269051d96..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/hexgon.tsx +++ /dev/null @@ -1,117 +0,0 @@ -// @ts-ignore -import { HeatmapLayer, PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 6, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [117.20214843749999, 30.29701788337205], - [119.66308593749999, 30.050076521698735], - [117.20214843749999, 29.286398892934763], - ], - ], - [ - [ - [119.13574218749999, 28.188243641850313], - [119.64111328125, 29.19053283229458], - [120.60791015625, 27.955591004642553], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv', - ) - .then((res) => res.text()) - .then((data) => { - const polygonLayer = new PolygonLayer() - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.5 }); - const layer = new HeatmapLayer({ - maskLayers: [polygonLayer], - }) - .source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat', - }, - transforms: [ - { - type: 'hexagon', - size: 2500, - field: 'v', - method: 'sum', - }, - ], - }) - .size('sum', (sum) => { - return sum * 200; - }) - .shape('hexagonColumn') - .style({ - coverage: 0.8, - angle: 0, - opacity: 1.0, - }) - .color('sum', [ - '#094D4A', - '#146968', - '#1D7F7E', - '#289899', - '#34B6B7', - '#4AC5AF', - '#5FD3A6', - '#7BE39E', - '#A1EDB8', - '#C3F9CC', - '#DEFAC0', - '#ECFFB1', - ]); - scene.addLayer(layer); - scene.addLayer(polygonLayer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/image.tsx b/legacy/dev-demos/src/features/mask/demos/image.tsx deleted file mode 100644 index 5e75e8c3875..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/image.tsx +++ /dev/null @@ -1,87 +0,0 @@ -// @ts-ignore -import { ImageLayer, PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 15, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [120.16021728515624, 30.259660295442085], - [120.15987396240234, 30.25313608393673], - [120.16605377197266, 30.253729211980726], - [120.1658821105957, 30.258474107402265], - ], - ], - [ - [ - [120.1703453063965, 30.258474107402265], - [120.17086029052733, 30.254174055663515], - [120.17583847045898, 30.254915457324778], - [120.17446517944336, 30.258474107402265], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - const polygonLayer = new PolygonLayer() - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.5 }); - const layer = new ImageLayer({ - maskLayers: [polygonLayer], - }); - layer.source( - 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4UApTKmeiy4AAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - extent: [ - 120.14802932739258, 30.262773970881057, 120.17669677734374, - 30.25239466884559, - ], - }, - }, - ); - scene.addLayer(layer); - scene.addLayer(polygonLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/raster.tsx b/legacy/dev-demos/src/features/mask/demos/raster.tsx deleted file mode 100644 index 2f89e6db0ac..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/raster.tsx +++ /dev/null @@ -1,105 +0,0 @@ -// @ts-ignore -import { PolygonLayer, RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -import * as GeoTIFF from 'geotiff'; - -async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', - // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff', - ); - const arrayBuffer = await response.arrayBuffer(); - const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { - data: values[0], - width, - height, - min: 0, - max: 8000, - }; -} - -export default () => { - // @ts-ignore - useEffect(async () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 2, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - - const tiffdata = await getTiffData(); - - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ) - .then((res) => res.json()) - .then((maskData) => { - const polygonLayer = new PolygonLayer({ - visible: false, - }) - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.5 }); - const layer = new RasterLayer({ - maskLayers: [polygonLayer], - }); - const mindata = -0; - const maxdata = 8000; - layer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.width, - height: tiffdata.height, - extent: [ - 73.482190241, 3.82501784112, 135.106618732, 57.6300459963, - ], - }, - }) - .style({ - opacity: 0.8, - domain: [mindata, maxdata], - clampLow: true, - rampColors: { - colors: [ - 'rgb(166,97,26)', - 'rgb(223,194,125)', - 'rgb(245,245,245)', - 'rgb(128,205,193)', - 'rgb(1,133,113)', - ], - positions: [0, 0.25, 0.5, 0.75, 1.0], - }, - }); - scene.addLayer(layer); - scene.addLayer(polygonLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/raster_point.tsx b/legacy/dev-demos/src/features/mask/demos/raster_point.tsx deleted file mode 100644 index 508133594c5..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/raster_point.tsx +++ /dev/null @@ -1,147 +0,0 @@ -// @ts-ignore -import { PointLayer, RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -import * as GeoTIFF from 'geotiff'; - -async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', - // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff', - ); - const arrayBuffer = await response.arrayBuffer(); - const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { - data: values[0], - width, - height, - min: 0, - max: 8000, - }; -} - -export default () => { - // @ts-ignore - useEffect(async () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 2, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - - const tiffdata = await getTiffData(); - - const maskPointData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [110.64070700180974, 38.725170221383365], - type: 'Point', - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [117.05859241946035, 41.44428218345186], - type: 'Point', - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [114.98363698367831, 37.113784885036424], - type: 'Point', - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [118.77967948635097, 37.47208097958061], - type: 'Point', - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - coordinates: [113.729012766695, 39.22535473120385], - type: 'Point', - }, - }, - ], - }; - - const maskPoint = new PointLayer({ - visible: false, - }) - .source(maskPointData) - .shape('circle') - .size(100000) - .color('#f00') - .style({ - opacity: 0.5, - unit: 'meter', - }); - const layer = new RasterLayer({ - maskLayers: [maskPoint], - }); - const mindata = -0; - const maxdata = 8000; - layer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.width, - height: tiffdata.height, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], - }, - }) - .style({ - opacity: 0.8, - domain: [mindata, maxdata], - clampLow: true, - rampColors: { - colors: [ - 'rgb(166,97,26)', - 'rgb(223,194,125)', - 'rgb(245,245,245)', - 'rgb(128,205,193)', - 'rgb(1,133,113)', - ], - positions: [0, 0.25, 0.5, 0.75, 1.0], - }, - }); - scene.addLayer(layer); - scene.addLayer(maskPoint); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/singleMask.tsx b/legacy/dev-demos/src/features/mask/demos/singleMask.tsx deleted file mode 100644 index e969895ca55..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/singleMask.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-ignore -import { PointLayer, PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.165, 30.26], - pitch: 0, - zoom: 15, - style: 'dark', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [120.16, 30.259660295442085], - [120.16, 30.25313608393673], - [120.17, 30.253729211980726], - [120.17, 30.258474107402265], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - const polygonLayer = new PolygonLayer() - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.5 }); - - let point1 = new PointLayer({ - zIndex: 1, - maskLayers: [polygonLayer], - }) - .source( - [ - { - name: 'n5', - lng: 120.17, - lat: 30.255, - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('simple') - .size(30) - .style({ - opacity: 0.6, - }) - .active(true); - - let point2 = new PointLayer({ - maskLayers: [polygonLayer], - }) - .source( - [ - { - name: 'n4', - lng: 120.17, - lat: 30.2565, - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('simple') - .size(30) - .color('#0f0') - .active(true); - - scene.addLayer(point1); - scene.addLayer(polygonLayer); - scene.addLayer(point2); - // scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/text.tsx b/legacy/dev-demos/src/features/mask/demos/text.tsx deleted file mode 100644 index 42c1f73e576..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/text.tsx +++ /dev/null @@ -1,98 +0,0 @@ -// @ts-ignore -import { PointLayer, PolygonLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [105, 32], - pitch: 0, - zoom: 4, - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [112.8515625, 47.635783590864854], - [117.59765625, 38.54816542304656], - [125.15625000000001, 45.02695045318546], - ], - ], - [ - [ - [88.681640625, 40.17887331434696], - [100.37109375, 35.460669951495305], - [89.82421875, 29.53522956294847], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', - ) - .then((res) => res.json()) - .then((data) => { - const polygonLayer = new PolygonLayer() - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.5 }); - const pointLayer = new PointLayer({ - maskLayers: [polygonLayer], - }) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w', - }, - }) - .shape('m', 'text') - .size(12) - .color('w', ['#0e0030', '#0e0030', '#0e0030']) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - // textAllowOverlap: true - }); - scene.addLayer(pointLayer); - scene.addLayer(polygonLayer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/demos/wind.tsx b/legacy/dev-demos/src/features/mask/demos/wind.tsx deleted file mode 100644 index 5b750c62e1d..00000000000 --- a/legacy/dev-demos/src/features/mask/demos/wind.tsx +++ /dev/null @@ -1,102 +0,0 @@ -// @ts-ignore -import { PolygonLayer, Scene, WindLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [105.732421875, 32.24997445586331], - pitch: 0, - style: 'light', - zoom: 2, - }), - }); - - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [125.15625000000001, 8.407168163601076], - [116.54296874999999, -21.289374355860424], - [156.26953125, -20.632784250388013], - [150.29296875, 2.1088986592431382], - ], - ], - [ - [ - [78.57421875, 46.92025531537451], - [51.67968749999999, 37.020098201368114], - [87.890625, 28.76765910569123], - ], - ], - ], - }, - }, - ], - }; - - scene.on('loaded', () => { - const polygonLayer = new PolygonLayer({ - visible: false, - }) - .source(maskData) - .shape('fill') - .color('#f00') - .style({ opacity: 0.3 }); - const layer = new WindLayer({ - maskLayers: [polygonLayer], - zIndex: 2, - }); - layer - .source( - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - extent: [-180, -85, 180, 85], - }, - }, - ) - .animate(true) - .style({ - uMin: -21.32, - uMax: 26.8, - vMin: -21.57, - vMax: 21.42, - numParticles: 35535, - fadeOpacity: 0.996, - sizeScale: 1.2, - rampColors: { - 0.0: '#c6dbef', - 0.1: '#9ecae1', - 0.2: '#6baed6', - 0.3: '#4292c6', - 0.4: '#2171b5', - 0.5: '#084594', - }, - }); - scene.addLayer(layer); - scene.addLayer(polygonLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/mask/heatmap.md b/legacy/dev-demos/src/features/mask/heatmap.md deleted file mode 100644 index 6df8dc50819..00000000000 --- a/legacy/dev-demos/src/features/mask/heatmap.md +++ /dev/null @@ -1,2 +0,0 @@ -### heatmap - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/heatmapgrid.md b/legacy/dev-demos/src/features/mask/heatmapgrid.md deleted file mode 100644 index cbef235e6fe..00000000000 --- a/legacy/dev-demos/src/features/mask/heatmapgrid.md +++ /dev/null @@ -1,2 +0,0 @@ -### heatmapgrid - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/heatmapgrid3d.md b/legacy/dev-demos/src/features/mask/heatmapgrid3d.md deleted file mode 100644 index 100facc3f69..00000000000 --- a/legacy/dev-demos/src/features/mask/heatmapgrid3d.md +++ /dev/null @@ -1,2 +0,0 @@ -### heatmapgrid3d - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/hexgon.md b/legacy/dev-demos/src/features/mask/hexgon.md deleted file mode 100644 index 9fc93e16c29..00000000000 --- a/legacy/dev-demos/src/features/mask/hexgon.md +++ /dev/null @@ -1,2 +0,0 @@ -### hexgon - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/image.md b/legacy/dev-demos/src/features/mask/image.md deleted file mode 100644 index 12e1691101e..00000000000 --- a/legacy/dev-demos/src/features/mask/image.md +++ /dev/null @@ -1,2 +0,0 @@ -### image - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/raster.md b/legacy/dev-demos/src/features/mask/raster.md deleted file mode 100644 index b0225f5cc31..00000000000 --- a/legacy/dev-demos/src/features/mask/raster.md +++ /dev/null @@ -1,2 +0,0 @@ -### raster - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/raster_point.md b/legacy/dev-demos/src/features/mask/raster_point.md deleted file mode 100644 index 21f295e803f..00000000000 --- a/legacy/dev-demos/src/features/mask/raster_point.md +++ /dev/null @@ -1,2 +0,0 @@ -### raster-point - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/singleMask.md b/legacy/dev-demos/src/features/mask/singleMask.md deleted file mode 100644 index 1e3c59e8807..00000000000 --- a/legacy/dev-demos/src/features/mask/singleMask.md +++ /dev/null @@ -1,2 +0,0 @@ -### singleMask - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/text.md b/legacy/dev-demos/src/features/mask/text.md deleted file mode 100644 index 82c33124c52..00000000000 --- a/legacy/dev-demos/src/features/mask/text.md +++ /dev/null @@ -1,2 +0,0 @@ -### text - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/mask/wind.md b/legacy/dev-demos/src/features/mask/wind.md deleted file mode 100644 index be482f67623..00000000000 --- a/legacy/dev-demos/src/features/mask/wind.md +++ /dev/null @@ -1,2 +0,0 @@ -### wind - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/circle.md b/legacy/dev-demos/src/features/point/circle.md deleted file mode 100644 index 87531aa48d1..00000000000 --- a/legacy/dev-demos/src/features/point/circle.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -group: - title: 点 - order: 1 ---- - -### point - circle 等面积 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/billboard.tsx b/legacy/dev-demos/src/features/point/demos/billboard.tsx deleted file mode 100644 index 76e2ac35e87..00000000000 --- a/legacy/dev-demos/src/features/point/demos/billboard.tsx +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.188193, 30.292542], - pitch: 0, - zoom: 16, - }), - }); - - const layer = new PointLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.188193, 30.292542], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.201665, 30.26873], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.225209, 30.290802], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.189641, 30.293248], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.189389, 30.292542], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.190837, 30.293303], - }, - }, - ], - }) - .size(10) - .color('#f00') - .shape('simple'); - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/circle-device.tsx b/legacy/dev-demos/src/features/point/demos/circle-device.tsx deleted file mode 100644 index 8c184e6c6da..00000000000 --- a/legacy/dev-demos/src/features/point/demos/circle-device.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - pickBufferScale: 1.0, - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'light', - center: [-121.24357, 37.58264], - pitch: 0, - zoom: 6.45, - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv', - ) - .then((res) => res.text()) - .then((data) => { - const pointLayer = new PointLayer({ - blend: 'normal', - }) - .source(data, { - parser: { - type: 'csv', - x: 'Longitude', - y: 'Latitude', - }, - }) - .shape('circle') - .size(16) - .active(true) - // .animate(true) - .select({ - color: 'red', - }) - .color('Magnitude', [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0', - ]) - .style({ - opacity: 0.3, - strokeWidth: 0, - stroke: '#fff', - }); - scene.addLayer(pointLayer); - // scene.startAnimate(); - // let i =0; - // setInterval(() => { - // i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal'); - - // },20) - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/circle-webgpu.tsx b/legacy/dev-demos/src/features/point/demos/circle-webgpu.tsx deleted file mode 100644 index 5c75b0d83ee..00000000000 --- a/legacy/dev-demos/src/features/point/demos/circle-webgpu.tsx +++ /dev/null @@ -1,77 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point_circle', - pickBufferScale: 1.0, - renderer: process.env.renderer, - enableWebGPU: true, - shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm', - map: new GaodeMap({ - style: 'light', - center: [-121.24357, 37.58264], - pitch: 0, - zoom: 6.45, - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv', - ) - .then((res) => res.text()) - .then((data) => { - const pointLayer = new PointLayer() - .source(data, { - parser: { - type: 'csv', - x: 'Longitude', - y: 'Latitude', - }, - }) - .shape('circle') - .size(16) - .active(true) - .select({ - color: 'red', - }) - .color('Magnitude', [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0', - ]) - .style({ - opacity: 1, - strokeWidth: 0, - stroke: '#fff', - }); - scene.addLayer(pointLayer); - // let i =0; - // setInterval(() => { - // i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal'); - - // },20) - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/circlemeter.tsx b/legacy/dev-demos/src/features/point/demos/circlemeter.tsx deleted file mode 100644 index 5f110899c9b..00000000000 --- a/legacy/dev-demos/src/features/point/demos/circlemeter.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - style: 'light', - center: [120.099658370018, 30.263445807542666], - zoom: 10, - }), - }); - scene.on('loaded', () => { - const pointLayer = new PointLayer({ - autoFit: false, - }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.099658370018, 30.263445807542666], - }, - }, - ], - }) - .shape('circle') - .size(1000) - .color('#ff0000') - .active(true) - // .animate({ enable: true }) - .style({ - opacity: 1, - strokeWidth: 1, - unit: 'meter', - }); - pointLayer.on('click', (e) => { - console.log(e); - }); - setTimeout(() => { - pointLayer.style({ - opacity: 0.5, - }); - scene.render(); - }, 1000); - scene.addLayer(pointLayer); - // scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/column.tsx b/legacy/dev-demos/src/features/point/demos/column.tsx deleted file mode 100644 index 9145232c5b4..00000000000 --- a/legacy/dev-demos/src/features/point/demos/column.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - pitch: 66.02383, - style: 'dark', - center: [121.400257, 31.25287], - zoom: 14.55, - rotation: 134.9507, - }), - }); - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({}) - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('name', [ - 'cylinder', - 'triangleColumn', - 'hexagonColumn', - 'squareColumn', - ]) - .active(true) - .size('unit_price', (h) => { - return [6, 6, 100]; - }) - .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) - .style({ - opacity: 1, - }); - scene.addLayer(pointLayer); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/cylinder.tsx b/legacy/dev-demos/src/features/point/demos/cylinder.tsx deleted file mode 100644 index 7fe7b612300..00000000000 --- a/legacy/dev-demos/src/features/point/demos/cylinder.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [121.107846, 30.267069], - pitch: 35.210526315789465, - style: 'dark', - zoom: 8, - animateEnable: false, - }), - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({ depth: false }) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w', - }, - }) - .shape('cylinder') // cylinder triangleColumn hexagonColumn squareColumn - .size('t', function(level) { - return [1, 1, level * 2 + 20]; - }) - .active(true) - .color('#0ff') - .style({ - // opacity: 0.8, - opacityLinear: { - enable: true, // true - false - dir: 'up', // up - down - }, - lightEnable: false, - // sourceColor: '#f00', - // targetColor: "#0f0" - }); - scene.addLayer(pointLayer); - }); - }); - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/fill-image.tsx b/legacy/dev-demos/src/features/point/demos/fill-image.tsx deleted file mode 100644 index b2fee82a867..00000000000 --- a/legacy/dev-demos/src/features/point/demos/fill-image.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point_fillImage', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - style: 'light', - center: [120, 30], - pitch: 60, - zoom: 14, - }), - }); - - scene.addImage( - 'marker', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ', - ); - - const pointLayer = new PointLayer({ layerType: 'fillImage' }) - .source( - [ - { - lng: 120, - lat: 30, - name: 'marker', - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .style({ - unit: 'meter', - }) - .shape('marker') - .size(36); - - const pointLayer2 = new PointLayer({ layerType: 'fillImage' }) - .source( - [ - { - lng: 120, - lat: 30, - name: 'marker', - }, - ], - { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }, - ) - .shape('marker') - .size(36) - .active(true) - .style({ - rotation: 90, - }); - - scene.on('loaded', () => { - scene.addLayer(pointLayer); - scene.addLayer(pointLayer2); - // scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/iconfont.tsx b/legacy/dev-demos/src/features/point/demos/iconfont.tsx deleted file mode 100644 index 820df1b6b67..00000000000 --- a/legacy/dev-demos/src/features/point/demos/iconfont.tsx +++ /dev/null @@ -1,89 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - - const fontFamily = 'iconfont'; - // 指定 iconfont 字体文件 - const fontPath = - '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140'; - - - scene.on('loaded', () => { - scene.once('fontloaded',(e)=>{ - const imageLayer = new PointLayer() - .source( - [ - { - j: 118.234433, - w: 35.007936, - icon: 'icon1', - value: 10, - name: 'AA', - type: 'dibiaoshui', - }, - ], - { - parser: { - type: 'json', - x: 'j', - y: 'w', - }, - }, - ) - .color('#f00') - .shape('icon', 'text') - .size(30) - .style({ - // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - // textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] - padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - fontFamily, - iconfont: true, - textAllowOverlap: true, - rotation: 90, - }); - console.log(imageLayer); - scene.addLayer(imageLayer); - // } - - }) - - - scene.addFontFace(fontFamily, fontPath); - scene.addIconFont('icon1', ''); - - // 全局添加资源 - - // 全局添加 iconfont 字段的映射; - - - - }); - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/icons.tsx b/legacy/dev-demos/src/features/point/demos/icons.tsx deleted file mode 100644 index b7ce44ab8a8..00000000000 --- a/legacy/dev-demos/src/features/point/demos/icons.tsx +++ /dev/null @@ -1,83 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene,Popup } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - // @ts-ignore - useEffect( async () => { - const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - ); - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [121.4, 31.258134], - zoom: 12, - pitch: 0, - style: 'normal', - }), - }); - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', - ); - const data = await response.json(); - const newData = data.map((item: any) => { - item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)]; - return item; - }); - const imageLayer = new PointLayer({ - }) - .source(newData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('type', (v: any) => { - return v; - }) - .active(false) - .size('unit_price', [10, 30]) - .style({ - opacity: { - field: 'unit_price', - value: [0.3, 1.0], - }, - offsets:{ - field: 'unit_price', - value: (v: any) => { - return [0, v * 0.0005]; - } - } - }) - ; - scene.addLayer(imageLayer); - - - - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/normal-device.tsx b/legacy/dev-demos/src/features/point/demos/normal-device.tsx deleted file mode 100644 index a0e4747c425..00000000000 --- a/legacy/dev-demos/src/features/point/demos/normal-device.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - // style: 'blank', - center: [120.099658370018, 30.263445807542666], - pitch: 0, - zoom: 11, - }), - }); - scene.on('loaded', () => { - // fetch( - // 'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', - // ) - // .then((res) => res.text()) - // .then((data) => { - const pointLayer = new PointLayer({ blend: 'additive' }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.099658370018, 30.263445807542666], - }, - }, - ], - }) - .size(40) - .shape('dot') - .color('#f00') - .style({ - sizeScale: 0.5, - opacity: 0.6, - stroke: '#00f', - }); - - scene.addLayer(pointLayer); - // }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/normal.tsx b/legacy/dev-demos/src/features/point/demos/normal.tsx deleted file mode 100644 index 66dcf88acf1..00000000000 --- a/legacy/dev-demos/src/features/point/demos/normal.tsx +++ /dev/null @@ -1,52 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'dark', - center: [121.417463, 31.215175], - pitch: 0, - zoom: 11, - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', - ) - .then((res) => res.text()) - .then((data) => { - const pointLayer = new PointLayer({ blend: 'additive' }) - .source(data, { - parser: { - type: 'csv', - y: 'lat', - x: 'lng', - }, - }) - .size(0.5) - .color('#080298') - .style({ - opacity: 1, - }); - - scene.addLayer(pointLayer); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/radar.tsx b/legacy/dev-demos/src/features/point/demos/radar.tsx deleted file mode 100644 index 3576e147021..00000000000 --- a/legacy/dev-demos/src/features/point/demos/radar.tsx +++ /dev/null @@ -1,162 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new (process.env.CI ? Map : GaodeMap)({ - center: [120.188193, 30.292542], - pitch: 0, - zoom: 13, - }), - }); - - const layer = new PointLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.188193, 30.292542], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.201665, 30.26873], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.225209, 30.290802], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.189641, 30.293248], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.189389, 30.292542], - }, - }, - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [120.190837, 30.293303], - }, - }, - ], - }) - .size(100) - .color('#f00') - .shape('radar') - .style({ - unit: 'meter', - speed: 5, - }) - .animate(!process.env.CI) - .active(true); - - // const layer2 = new PointLayer() - // .source( - // { - // "type": "FeatureCollection", - // "features": [ - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.188193, 30.292542] - // } - // }, - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.201665, 30.26873] - // } - // }, - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.225209, 30.290802] - // } - // }, - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.189641, 30.293248] - // } - // }, - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.189389, 30.292542] - // } - // }, - // { - // "type": "Feature", - // "properties": {}, - // "geometry": { - // "type": "Point", - // "coordinates": [120.190837, 30.293303] - // } - // } - // ] - // } - - // ) - // .size(5) - // .color('#0f0') - // .shape('circle') - // .style({ - // unit:'pixel', - // }) - // .active(true); - - scene.on('loaded', () => { - scene.addLayer(layer); - // scene.addLayer(layer2); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/point/demos/simple.tsx b/legacy/dev-demos/src/features/point/demos/simple.tsx deleted file mode 100644 index b9e428578a4..00000000000 --- a/legacy/dev-demos/src/features/point/demos/simple.tsx +++ /dev/null @@ -1,79 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMapV2 } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - map: new GaodeMapV2({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { - const highlightLayer = new PointLayer({ blend: 'normal' }) - .source([], { - parser: { - type: 'json', - coordinates:'coordinates', - } - }) - .shape('circle') - .active(false) - .select(false) - .size(20) - .color('#f0027f') - .style({ - opacity: 1, - }); - const pointLayer = new PointLayer({ blend: 'normal' }) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('circle') - .active(false) - .select(false) - .size(10) - .color('t',['#7fc97f','#beaed4','#fdc086','#ffff99','#386cb0','#f0027f','#bf5b17','#666666']) - .style({ - opacity: 1 - }); - pointLayer.on('mousemove',(e)=>{ - - highlightLayer.setData([e.feature - ],{ - parser: { - type: 'json', - coordinates:'coordinates', - } - }) - }) - scene.addLayer(pointLayer); - scene.addLayer(highlightLayer) - }); - - }); - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/text.tsx b/legacy/dev-demos/src/features/point/demos/text.tsx deleted file mode 100644 index ebf8df8968f..00000000000 --- a/legacy/dev-demos/src/features/point/demos/text.tsx +++ /dev/null @@ -1,87 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap} from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'light', - zoom: 3 - }) - }); - scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { - const pointLayer1 = new PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('circle') - .size(5) - .color('blue') - const pointLayer = new PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w' - } - }) - .shape('m', 'text') - .size(12) - .color('red') - .style({ - opacity: 0.8, - // textAllowOverlap: true, - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 2, // 描边宽度 - strokeOpacity: 1.0, - rotation:{ - field:'m', - value: [0,350] - } - }); - scene.addLayer(pointLayer1); - scene.addLayer(pointLayer); - setTimeout(()=>{ - pointLayer.style({ - textAnchor:'left' - // textOffset: [ 40, 40 ], // 文本相对锚点的偏移量 [水平, 垂直] - }) - scene.render() - },2000) - }); - - }); - - return ()=>{ - scene.destroy(); - } - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/demos/text2.tsx b/legacy/dev-demos/src/features/point/demos/text2.tsx deleted file mode 100644 index 942948f00cb..00000000000 --- a/legacy/dev-demos/src/features/point/demos/text2.tsx +++ /dev/null @@ -1,81 +0,0 @@ -// @ts-ignore -import { PointLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap} from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect( () => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [ 110, 36 ], - style: 'blank', - zoom: 3 - }) - }); - scene.on('loaded', () => { - fetch('https://mdn.alipayobjects.com/afts/file/A*N5AuT5BKK3gAAAAAAAAAAAAADrd2AQ/china_point.json') - .then(res => res.json()) - .then(data => { - const pointLayer1 = new PointLayer({}) - .source(data) - .shape('circle') - .size(5) - .color('blue') - .style({ - stroke: '#f00', - strokeWidth: 2, - offset: [ 10, 10 ] - }) - const pointLayer = new PointLayer({}) - .source(data) - .shape('NAME', 'text') - .size(12) - .color('red') - .scale('Alignment', { - type: 'cat', - range: [ '1', '2', '3' ], - }) - .style({ - // textAllowOverlap: true, - textAnchor: { - field:'Alignment', - value:[ 'left', 'top', 'right' ], - },// 文本相对锚点的位置 center|left|right|top|bottom|top-left - // textOffset: { - // field:'Location', - // value: (v)=>{ - // return [v *2, 10+ 20* Math.random()] - // } - // }, // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 2, // 描边宽度 - strokeOpacity: 1.0 - }); - scene.addLayer(pointLayer1); - scene.addLayer(pointLayer); - - }); - - }); - - return ()=>{ - scene.destroy(); - } - - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointBillboard.md b/legacy/dev-demos/src/features/point/pointBillboard.md deleted file mode 100644 index 291748d38a1..00000000000 --- a/legacy/dev-demos/src/features/point/pointBillboard.md +++ /dev/null @@ -1,2 +0,0 @@ -### point - billboard(simple) - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointCircle.md b/legacy/dev-demos/src/features/point/pointCircle.md deleted file mode 100644 index f6b2aa01181..00000000000 --- a/legacy/dev-demos/src/features/point/pointCircle.md +++ /dev/null @@ -1,79 +0,0 @@ -### point - circle - -```tsx -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point_circle', - pickBufferScale: 1.0, - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'light', - center: [-121.24357, 37.58264], - pitch: 0, - zoom: 6.45, - }), - }); - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv', - ) - .then((res) => res.text()) - .then((data) => { - const pointLayer = new PointLayer({ - blend: 'normal', - }) - .source(data, { - parser: { - type: 'csv', - x: 'Longitude', - y: 'Latitude', - }, - }) - .shape('circle') - .size(16) - .active(true) - .select({ - color: 'red', - }) - .color('Magnitude', [ - '#0A3663', - '#1558AC', - '#3771D9', - '#4D89E5', - '#64A5D3', - '#72BED6', - '#83CED6', - '#A6E1E0', - '#B8EFE2', - '#D7F9F0', - ]) - .style({ - opacity: 0.3, - strokeWidth: 0, - stroke: '#fff', - }); - scene.addLayer(pointLayer); - // let i =0; - // setInterval(() => { - // i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal'); - - // },20) - }); - }); - }, []); - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/point/pointCircleWebGPU.md b/legacy/dev-demos/src/features/point/pointCircleWebGPU.md deleted file mode 100644 index c1bdddfbb80..00000000000 --- a/legacy/dev-demos/src/features/point/pointCircleWebGPU.md +++ /dev/null @@ -1,3 +0,0 @@ -### point - circle - WebGPU - - diff --git a/legacy/dev-demos/src/features/point/pointColumn.md b/legacy/dev-demos/src/features/point/pointColumn.md deleted file mode 100644 index cff012ddac9..00000000000 --- a/legacy/dev-demos/src/features/point/pointColumn.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -group: - title: 点 - order: 4 ---- - -### point - column-device - - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointCylinder.md b/legacy/dev-demos/src/features/point/pointCylinder.md deleted file mode 100644 index 6f4510921a1..00000000000 --- a/legacy/dev-demos/src/features/point/pointCylinder.md +++ /dev/null @@ -1,2 +0,0 @@ -### point - cylinder - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointEarthfill.md b/legacy/dev-demos/src/features/point/pointEarthfill.md deleted file mode 100644 index d04d0514f8c..00000000000 --- a/legacy/dev-demos/src/features/point/pointEarthfill.md +++ /dev/null @@ -1,119 +0,0 @@ -### point - earthfill - -```tsx -import { PointLayer, Scene, Earth, LineLayer, EarthLayer } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new Earth({}), - }); - - // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色 - scene.setBgColor('#333'); - - // const earthlayer = new EarthLayer() - // .source( - // 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', - // { - // parser: { - // type: 'image', - // }, - // }, - // ) - // // .animate(true); - // .color('#2E8AE6') - // .shape('fill') - // .style({ - // globalOptions: { - // ambientRatio: 0.6, // 环境光 - // diffuseRatio: 0.4, // 漫反射 - // specularRatio: 0.1, // 高光反射 - // }, - // }); - - // const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere'); - - // const bloomLayer = new EarthLayer() - // .color('#fff') - // .shape('bloomSphere') - // .style({ - // opacity: 0.7, - // }); - - scene.on('loaded', () => { - // scene.addLayer(earthlayer); - // scene.addLayer(atomLayer); - // scene.addLayer(bloomLayer); - - - const pointLayer = new PointLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [116.5, 39.5], - }, - }, - ], - }) - .shape('circle') - .size(20) - .color('#ff0000') - .active(true) - // .animate({ enable: true }) - .style({ - opacity: 1, - strokeWidth: 1, - }); - - scene.addLayer(pointLayer); - - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer1 = new PointLayer({}) - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('squareColumn') - .active(true) - .size('unit_price', (h) => { - return [6, 6, 100]; - }) - .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) - .style({ - opacity:1, - }) - ; - scene.addLayer(pointLayer1); - }); - // earthlayer.setEarthTime(4.0); - scene.startAnimate(); - }); - }, []); - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/point/pointFillImage.md b/legacy/dev-demos/src/features/point/pointFillImage.md deleted file mode 100644 index 1bd373ed732..00000000000 --- a/legacy/dev-demos/src/features/point/pointFillImage.md +++ /dev/null @@ -1,3 +0,0 @@ -### point - fillImage - - diff --git a/legacy/dev-demos/src/features/point/pointIconfont.md b/legacy/dev-demos/src/features/point/pointIconfont.md deleted file mode 100644 index e6061f59586..00000000000 --- a/legacy/dev-demos/src/features/point/pointIconfont.md +++ /dev/null @@ -1,4 +0,0 @@ -### Point - text - iconfont - -#### iconfont - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointIcons.md b/legacy/dev-demos/src/features/point/pointIcons.md deleted file mode 100644 index ae5e5ee5a7f..00000000000 --- a/legacy/dev-demos/src/features/point/pointIcons.md +++ /dev/null @@ -1,2 +0,0 @@ -### point - icons - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointImage.md b/legacy/dev-demos/src/features/point/pointImage.md deleted file mode 100644 index 1b4396534ed..00000000000 --- a/legacy/dev-demos/src/features/point/pointImage.md +++ /dev/null @@ -1,81 +0,0 @@ -### point - image -```tsx -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point_fillImage', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'light', - center: [120, 30], - pitch: 0, - zoom: 14 - }), - }); - - scene.addImage( - 'marker', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ' - ).then(()=>{ - console.log(1111) - }) - - const pointLayer = new PointLayer({ }) - .source([{ - lng: 120, lat: 30, name: 'marker' - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .color('red') - .size(20) - - const pointLayer2 = new PointLayer({ }) - .source([{ - lng: 120, lat: 30, name: 'marker' - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('marker') - .size(24) - .active(true) - .style({ - offsets:{ - field:'name', - value: ()=>{ - return [0,20] - } - } - // raisingHeight: 100, - // heightfixed: true - }) - - - scene.on('loaded', () => { - scene.addLayer(pointLayer); - scene.addLayer(pointLayer2); - }) - }, []) - return ( -
- ); -} -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointNormal.md b/legacy/dev-demos/src/features/point/pointNormal.md deleted file mode 100644 index badcfe5a486..00000000000 --- a/legacy/dev-demos/src/features/point/pointNormal.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - normal-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointNormalDevice.md b/legacy/dev-demos/src/features/point/pointNormalDevice.md deleted file mode 100644 index cca7565418b..00000000000 --- a/legacy/dev-demos/src/features/point/pointNormalDevice.md +++ /dev/null @@ -1,3 +0,0 @@ -### Point - normal - Device API - - diff --git a/legacy/dev-demos/src/features/point/pointRadar.md b/legacy/dev-demos/src/features/point/pointRadar.md deleted file mode 100644 index 50c687e5975..00000000000 --- a/legacy/dev-demos/src/features/point/pointRadar.md +++ /dev/null @@ -1,2 +0,0 @@ -### point - radar-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointSimple.md b/legacy/dev-demos/src/features/point/pointSimple.md deleted file mode 100644 index 4df6bb8f9d6..00000000000 --- a/legacy/dev-demos/src/features/point/pointSimple.md +++ /dev/null @@ -1,2 +0,0 @@ -### Point - simple - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointText.md b/legacy/dev-demos/src/features/point/pointText.md deleted file mode 100644 index 9548a099133..00000000000 --- a/legacy/dev-demos/src/features/point/pointText.md +++ /dev/null @@ -1,3 +0,0 @@ -### Point - text -#### normal text - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointText2.md b/legacy/dev-demos/src/features/point/pointText2.md deleted file mode 100644 index 799cd0d422e..00000000000 --- a/legacy/dev-demos/src/features/point/pointText2.md +++ /dev/null @@ -1,3 +0,0 @@ -### Point - text2 -#### 文本偏移 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/point/pointWave.md b/legacy/dev-demos/src/features/point/pointWave.md deleted file mode 100644 index 8819a1e6cd2..00000000000 --- a/legacy/dev-demos/src/features/point/pointWave.md +++ /dev/null @@ -1,78 +0,0 @@ -### point - wave -```tsx -import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point_wave', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'light', - center: [120, 30], - pitch: 60, - zoom: 14 - }), - }); - const pointLayer = new PointLayer() - .source([{ - lng: 120, lat: 30 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(36) - .active(true) - .select({ - color: 'red', - }) - .color('red') - .animate(true) - - const pointLayer2 = new PointLayer() - .source([{ - lng: 120, lat: 30 - }], { - parser: { - type: 'json', - x: 'lng', - y: 'lat', - }, - }) - .shape('circle') - .size(36) - .active(true) - .select({ - color: 'red', - }) - .color('blue') - .animate(true) - .style({ - raisingHeight: 200, - heightfixed: true - }) - - - scene.on('loaded', () => { - scene.addLayer(pointLayer); - scene.addLayer(pointLayer2); - }) - }, []) - return ( -
- ); -} - -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/demos/extrude.tsx b/legacy/dev-demos/src/features/polygon/demos/extrude.tsx deleted file mode 100644 index ad43e2c684a..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/extrude.tsx +++ /dev/null @@ -1,179 +0,0 @@ - -import { - Scene, - PolygonLayer, - PointLayer, - LineLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - // renderer: process.env.renderer, - map: new GaodeMap({ - style: 'dark', - center: [120, 29.732983], - zoom: 6.2, - pitch: 60, - }), - }); - - 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); - 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[] = []; - - 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, - }); - scene.addLayer(textLayer); - - lineDown = new LineLayer() - .source(data) - .shape('line') - .color('#0DCCFF') - .size(1) - .style({ - raisingHeight: 200000, - }); - - lineUp = new LineLayer({ zIndex: 1 }) - .source(data) - .shape('line') - .color('#0DCCFF') - .size(1) - .style({ - raisingHeight: 200000 + 150000, - }); - - 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 provincelayerSide = new PolygonLayer({}) - .source(data) - .size(150000) - .shape('extrude') - .color('#0DCCFF') - .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') - .color('#0DCCFF') - .active({ - color: 'rgb(100,230,255)', - }) - .style({ - heightfixed: true, - pickLight: true, - raisingHeight: 200000, - opacity: 0.8, - sidesurface: false, - }); - scene.addLayer(provincelayerTop); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/polygon/demos/fill.tsx b/legacy/dev-demos/src/features/polygon/demos/fill.tsx deleted file mode 100644 index f0d9b33b4b8..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/fill.tsx +++ /dev/null @@ -1,97 +0,0 @@ - -import { - Scene, - PolygonLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - pitch: 40, - center: [113.8623046875, 30.031055426540206], - zoom: 7.5, - }), - }); - const data = { - type: 'FeatureCollection', - features: [ - { - 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], - ], - ], - }, - }, - ], - }; - - const data2 = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - testOpacity: 0.8, - }, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [113.8623046875, 30.031055426540206], - [115.3232421875, 30.031055426540206], - [115.3232421875, 31.090574094954192], - [113.8623046875, 31.090574094954192], - [113.8623046875, 30.031055426540206], - ], - ], - }, - }, - ], - }; - - - const layer = new PolygonLayer({}) - .source(data) - .shape('fill') - .color('red') - .active(true) - .style({ - opacity:0.5, - opacityLinear:{ - enable:true, - dir:'in' - } - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/polygon/demos/fill_3d.tsx b/legacy/dev-demos/src/features/polygon/demos/fill_3d.tsx deleted file mode 100644 index 02fbb9de0fd..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/fill_3d.tsx +++ /dev/null @@ -1,91 +0,0 @@ - - -import { Scene, PolygonLayer } from '@antv/l7'; -import { GaodeMap,Mapbox } from '@antv/l7-maps'; - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'dark', - pitch: 50, - center: [ 118.8, 32.056 ], - zoom: 10, - // style: 'mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g', - // token: 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w4bXNyeHgzMGl0cjNvbXlmeHFjeDBwZCJ9.05W7JfyT6BVkpu12dYL58w' - }) - }); - const colors = [ - '#87CEFA', - '#00BFFF', - - '#7FFFAA', - '#00FF7F', - '#32CD32', - - '#F0E68C', - '#FFD700', - - '#FF7F50', - '#FF6347', - '#FF0000' - ]; - scene.on('loaded', () => { - fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json') - .then(res => res.json()) - .then(data => { - - const filllayer = new PolygonLayer({ - name: 'fill', - zIndex: 3, - autoFit: true, - }) - .source(data) - .shape('extrude') - .active(true) - .size('unit_price', unit_price => unit_price) - // .size(10000) - .color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ]) - .style({ - pickLight:true, - - opacity: 1, - // opacity: { - // field:'unit_price', - // value: [0,1] - // } - // opacityLinear: { - // enable: true, - // dir: 'out' // in - out - // } - }); - scene.addLayer(filllayer); - }); - - }); - - }, []); - return ( -
- ); - }; - - - - - - - - - - - diff --git a/legacy/dev-demos/src/features/polygon/demos/indoor.tsx b/legacy/dev-demos/src/features/polygon/demos/indoor.tsx deleted file mode 100644 index 6e0d09933e3..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/indoor.tsx +++ /dev/null @@ -1,64 +0,0 @@ - -import { - Scene, - PolygonLayer, - PointLayer, - LineLayer, - // @ts-ignore - } from '@antv/l7'; - // @ts-ignore - import { GaodeMap,Mapbox } from '@antv/l7-maps'; - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'dark', - center: [120, 29.732983], - zoom: 6.2, - pitch: 60, - token:"pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g" - }), - }); - - - scene.on('loaded', () => { - - fetch('https://mdn.alipayobjects.com/afts/file/A*CGKZTL6s_ywAAAAAAAAAAAAADrd2AQ/indoor-3d-map.json') - .then((res) => res.json()) - .then((data) => { - - - const provincelayerSide = new PolygonLayer({ - autoFit: true, - }) - .source(data) - .size('height') - .shape('extrusion') - .color('color') - .style({ - extrusionBase:{ - field:'base_height', - }, - opacity: 1.0, - }); - scene.addLayer(provincelayerSide); - scene.startAnimate() - - }); - }); - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/demos/ocean.tsx b/legacy/dev-demos/src/features/polygon/demos/ocean.tsx deleted file mode 100644 index 40331d283ba..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/ocean.tsx +++ /dev/null @@ -1,63 +0,0 @@ - -import { - Scene, - PolygonLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 2, - }), - }); - const layer = new PolygonLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [104.4140625, 35.460669951495305], - [98.7890625, 24.206889622398023], - [111.796875, 27.371767300523047], - [104.4140625, 35.460669951495305], - ], - ], - }, - }, - ], - }) - .shape('ocean') - .animate(true) - .color('#f00') - .style({ - watercolor: '#6D99A8', - }); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/polygon/demos/texture.tsx b/legacy/dev-demos/src/features/polygon/demos/texture.tsx deleted file mode 100644 index 3315445db52..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/texture.tsx +++ /dev/null @@ -1,68 +0,0 @@ - -import { - Scene, - PolygonLayer, - PointLayer, - LineLayer, - // @ts-ignore - } from '@antv/l7'; - // @ts-ignore - import { GaodeMap } from '@antv/l7-maps'; - import React, { useEffect } from 'react'; - - export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - style: 'dark', - center: [120, 29.732983], - zoom: 6.2, - pitch: 0, - }), - }); - - - scene.on('loaded', () => { - - fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json') - .then((res) => res.json()) - .then((data) => { - - console.log(data); - - const provincelayerTop = new PolygonLayer({}) - .source(data) - .size(1000) - .shape('extrude') - .size(10000) - .color('#0DCCFF') - // .active({ - // color: 'rgb(100,230,255)', - // }) - .style({ - heightfixed: true, - // pickLight: true, - mapTexture:'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*bm0eRKOCcNoAAAAAAAAAAAAADmJ7AQ/original', - // mapTexture:'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3UcORbAv_zEAAAAAAAAAAAAADmJ7AQ/original', - // raisingHeight: 10000, - opacity: 0.8, - // sidesurface: false, - }); - scene.addLayer(provincelayerTop); - scene.startAnimate(); - }); - }); - }, []); - return ( -
- ); - }; - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/demos/water.tsx b/legacy/dev-demos/src/features/polygon/demos/water.tsx deleted file mode 100644 index 8608c95b2ae..00000000000 --- a/legacy/dev-demos/src/features/polygon/demos/water.tsx +++ /dev/null @@ -1,65 +0,0 @@ - -import { - Scene, - PolygonLayer, - // @ts-ignore -} from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: process.env.renderer, - map: new GaodeMap({ - center: [120, 30], - pitch: 0, - zoom: 3, - }), - }); - const layer = new PolygonLayer() - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Polygon', - coordinates: [ - [ - [104.4140625, 35.460669951495305], - [114.4140625, 35.460669951495305], - [114.4140625, 30.460669951495305], - [104.4140625, 30.460669951495305], - [104.4140625, 35.460669951495305], - ], - ], - }, - }, - ], - }) - .shape('water') - .color('#1E90FF') - .style({ - speed: 0.4, - // waterTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ' - }) - .animate(true); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/polygon/extrude.md b/legacy/dev-demos/src/features/polygon/extrude.md deleted file mode 100644 index 17144217faa..00000000000 --- a/legacy/dev-demos/src/features/polygon/extrude.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - extrude - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/fill.md b/legacy/dev-demos/src/features/polygon/fill.md deleted file mode 100644 index c73216c6bfa..00000000000 --- a/legacy/dev-demos/src/features/polygon/fill.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - fill-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/fill_3d.md b/legacy/dev-demos/src/features/polygon/fill_3d.md deleted file mode 100644 index 471ce42934d..00000000000 --- a/legacy/dev-demos/src/features/polygon/fill_3d.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - fill 3D-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/indoor.md b/legacy/dev-demos/src/features/polygon/indoor.md deleted file mode 100644 index 4220a3958c3..00000000000 --- a/legacy/dev-demos/src/features/polygon/indoor.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - indoor-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/ocean.md b/legacy/dev-demos/src/features/polygon/ocean.md deleted file mode 100644 index df5c14e80ad..00000000000 --- a/legacy/dev-demos/src/features/polygon/ocean.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - ocean-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/texture.md b/legacy/dev-demos/src/features/polygon/texture.md deleted file mode 100644 index ceeebf2b59a..00000000000 --- a/legacy/dev-demos/src/features/polygon/texture.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - texture-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/polygon/water.md b/legacy/dev-demos/src/features/polygon/water.md deleted file mode 100644 index 2010e240be5..00000000000 --- a/legacy/dev-demos/src/features/polygon/water.md +++ /dev/null @@ -1,2 +0,0 @@ -### Polygon - water-device - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/something/demos/wind.tsx b/legacy/dev-demos/src/features/something/demos/wind.tsx deleted file mode 100644 index 2494e042878..00000000000 --- a/legacy/dev-demos/src/features/something/demos/wind.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// @ts-ignore -import { Scene, WindLayer } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [105.732421875, 32.24997445586331], - pitch: 0, - style: 'dark', - zoom: 2, - }), - }); - - scene.on('loaded', () => { - const layer = new WindLayer({}); - layer - .source( - 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ', - { - parser: { - type: 'image', - extent: [-180, -85, 180, 85], - }, - }, - ) - .animate(true) - .style({ - uMin: -21.32, - uMax: 26.8, - vMin: -21.57, - vMax: 21.42, - numParticles: 35535, - fadeOpacity: 0.996, - sizeScale: 1.2, - rampColors: { - 0.0: '#c6dbef', - 0.1: '#9ecae1', - 0.2: '#6baed6', - 0.3: '#4292c6', - 0.4: '#2171b5', - 0.5: '#084594', - }, - }); - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/something/wind.md b/legacy/dev-demos/src/features/something/wind.md deleted file mode 100644 index be482f67623..00000000000 --- a/legacy/dev-demos/src/features/something/wind.md +++ /dev/null @@ -1,2 +0,0 @@ -### wind - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/threejs/amap1.md b/legacy/dev-demos/src/features/threejs/amap1.md deleted file mode 100644 index d532a50102f..00000000000 --- a/legacy/dev-demos/src/features/threejs/amap1.md +++ /dev/null @@ -1,90 +0,0 @@ -### threejs - amap1 -```tsx -import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [111.4453125, 32.84267363195431], - pitch: 45, - rotation: 30, - zoom: 10, - }), - }); - scene.registerRenderService(ThreeRender); - scene.on('loaded', () => { - const threeJSLayer = new ThreeLayer({ - enableMultiPassRenderer: false, - // @ts-ignore - onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => { - threeScene.add(new THREE.AmbientLight(0xffffff)); - const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - let center = scene.getCenter(); - let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); - let cubeMaterial = new THREE.MeshNormalMaterial(); - let cube = new THREE.Mesh(cubeGeometry, cubeMaterial); - layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0); - threeScene.add(cube); - - // 使用 Three.js glTFLoader 加载模型 - const loader = new GLTFLoader(); - loader.load( - 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', - (gltf) => { - // 根据 GeoJSON 数据放置模型 - const gltfScene = gltf.scene; - - layer.adjustMeshToMap(gltfScene); - layer.setMeshScale(gltfScene, 1000, 1000, 1000); - - layer.setObjectLngLat( - gltfScene, - [ center.lng, center.lat ], - 0, - ); - - const animations = gltf.animations; - if (animations && animations.length) { - const mixer = new THREE.AnimationMixer(gltfScene); - const animation = animations[2]; - const action = mixer.clipAction(animation); - action.play(); - layer.addAnimateMixer(mixer); - } - // 向场景中添加模型 - threeScene.add(gltfScene); - - // 重绘图层 - layer.render(); - }, - ); - }, - }) - .animate(true); - scene.addLayer(threeJSLayer); - }); - }, []) - return ( -
- ); -} - -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/threejs/amap2.md b/legacy/dev-demos/src/features/threejs/amap2.md deleted file mode 100644 index 3573a94a71b..00000000000 --- a/legacy/dev-demos/src/features/threejs/amap2.md +++ /dev/null @@ -1,115 +0,0 @@ -### threejs - amap2 -```tsx -import { Scene,RasterLayer } from '@antv/l7'; -import { GaodeMap, } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [111.4453125, 32.84267363195431], - pitch: 45, - rotation: 30, - zoom: 9, - }), - }); - scene.registerRenderService(ThreeRender); - const url1 = - 'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const url2 = - 'https://tiles{1-3}.geovisearth.com/base/v1/cat/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const layer1 = new RasterLayer({ - zIndex: 1, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - - const layer2 = new RasterLayer({ - zIndex: 1, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - scene.addLayer(layer1); - scene.addLayer(layer2); - scene.on('loaded', () => { - const threeJSLayer = new ThreeLayer({ - enableMultiPassRenderer: false, - // @ts-ignore - onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => { - threeScene.add(new THREE.AmbientLight(0xffffff)); - const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - let center = scene.getCenter(); - let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); - let cubeMaterial = new THREE.MeshNormalMaterial(); - let cube = new THREE.Mesh(cubeGeometry, cubeMaterial); - layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0); - threeScene.add(cube); - - // 使用 Three.js glTFLoader 加载模型 - const loader = new GLTFLoader(); - loader.load( - 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', - (gltf) => { - // 根据 GeoJSON 数据放置模型 - const gltfScene = gltf.scene; - - layer.adjustMeshToMap(gltfScene); - layer.setMeshScale(gltfScene, 1000, 1000, 1000); - - layer.setObjectLngLat( - gltfScene, - [ center.lng, center.lat ], - 0, - ); - - const animations = gltf.animations; - if (animations && animations.length) { - const mixer = new THREE.AnimationMixer(gltfScene); - const animation = animations[2]; - const action = mixer.clipAction(animation); - action.play(); - layer.addAnimateMixer(mixer); - } - // 向场景中添加模型 - threeScene.add(gltfScene); - - // 重绘图层 - layer.render(); - }, - ); - }, - }) - .animate(true); - scene.addLayer(threeJSLayer); - }); - }, []) - return ( -
- ); -} - -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/threejs/amapCar.md b/legacy/dev-demos/src/features/threejs/amapCar.md deleted file mode 100644 index f8ce75175d5..00000000000 --- a/legacy/dev-demos/src/features/threejs/amapCar.md +++ /dev/null @@ -1,250 +0,0 @@ -### threejs - car -```tsx -import { Scene, PolygonLayer, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion'; -let isTravel = false; - -function travel( - mesh, - path, - duration, - callback -) { - if (path.length < 2 || isTravel) return; - isTravel = true; - let startIndex = 0; - const len = path.length; - const currentP = path[0], - nextP = path[1]; - const t = duration / len; - - move(currentP, nextP); - function move(currentP, nextP) { - animate({ - from: { - x: currentP.x, - y: currentP.y, - z: currentP.z - }, - to: { - x: nextP.x, - y: nextP.y, - z: nextP.z - }, - ease: easeInOut, - duration: t, - repeatType: 'loop', - onUpdate: o => { - mesh.position.set(o.x, o.y, o.z); - }, - onComplete: () => { - startIndex++; - if (startIndex < len - 1) { - const currentP = path[startIndex], - nextP = path[startIndex + 1]; - mesh.lookAt(nextP); - - move(currentP, nextP); - } else { - isTravel = false; - callback && callback(); - } - } - }); - } -} -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [ 110, 35.39847 ], - pitch: 20, - style: 'dark', - zoom: 3 - }) - }); - - scene.on('loaded', () => { - scene.registerRenderService(ThreeRender); - - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json' - ) - .then(d => d.json()) - .then(data => { - const polygonlayer = new PolygonLayer({}) - .source(data) - .color('rgb(22,119,255)') - .shape('fill') - .active({ - enable: true, - blend: 0.5 - }) - .style({ - opacity: 0.6, - opacityLinear: { - enable: true, - dir: 'out' // in - out - } - }); - - const linelayer = new LineLayer({ }) - .source(data) - .color('rgb(72,169,255)') - .shape('line') - .size(0.5) - .style({ - opacity: 0.6 - }); - - scene.addLayer(polygonlayer); - scene.addLayer(linelayer); - }); - - - const threeJSLayer = new ThreeLayer({ - zIndex: 2, - enableMultiPassRenderer: false, - onAddMeshes: (threeScene, layer) => { - // 添加光 - threeScene.add(new THREE.AmbientLight(0xffffff)); - const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - const lineData = [ - [ 116.71874999999999, 26.745610382199022 ], - [ 117.3779296875, 28.8831596093235 ], - [ 115.75195312499999, 31.466153715024294 ], - [ 113.466796875, 33.32134852669881 ], - [ 113.9501953125, 35.85343961959182 ], - [ 115.400390625, 38.272688535980976 ], - [ 116.5869140625, 40.3130432088809 ], - [ 115.6201171875, 42.261049162113856 ], - [ 112.236328125, 42.94033923363181 ], - [ 109.3798828125, 41.04621681452063 ], - [ 103.84277343749999, 39.80853604144591 ], - [ 98.9208984375, 39.842286020743394 ], - [ 95.2294921875, 40.713955826286046 ], - [ 91.7138671875, 39.87601941962116 ], - [ 90.8349609375, 37.125286284966805 ], - [ 90.3076171875, 35.88905007936091 ], - [ 90.703125, 33.284619968887675 ], - [ 92.94433593749999, 31.98944183792288 ], - [ 96.2841796875, 32.21280106801518 ], - [ 98.87695312499999, 32.0639555946604 ], - [ 102.919921875, 28.459033019728043 ], - [ 107.9736328125, 28.497660832963472 ], - [ 108.10546875, 24.206889622398023 ], - [ 109.072265625, 23.039297747769726 ], - [ 112.763671875, 24.44714958973082 ], - [ 116.54296874999999, 25.958044673317843 ] - ]; - - const lineCoordData = lineData.map(d => { - return layer.lnglatToCoord(d); - }); - - - const rawPoints = []; - lineCoordData.map(d => { - rawPoints.push(new THREE.Vector3(d[0], d[1], 0)); - return ''; - }); - const curve = new THREE.CatmullRomCurve3(rawPoints); - const points = curve.getPoints(200); - const geometry = new THREE.BufferGeometry().setFromPoints(points); - - const material = new THREE.LineBasicMaterial({ color: new THREE.Color('rgb(22,119,255)') }); - - const line = new THREE.LineLoop(geometry, material); - threeScene.add(line); - - - // 使用 Three.js glTFLoader 加载模型 - const loader = new GLTFLoader(); - loader.load( - 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck - gltf => { - // 根据 GeoJSON 数据放置模型 - const gltfScene = gltf.scene.clone(); - setMaterial(gltfScene); - layer.getSource().data.dataArray.forEach(() => { - layer.adjustMeshToMap(gltfScene); - gltfScene.scale.set(500000, 500000, 500000); - - const animations = gltf.animations; - if (animations && animations.length) { - const mixer = new THREE.AnimationMixer(gltfScene); - // @ts-ignore - for (let i = 0; i < animations.length; i++) { - const animation = animations[i]; - - const action = mixer.clipAction(animation); - - action.play(); - } - layer.addAnimateMixer(mixer); - } - - // 向场景中添加模型 - threeScene.add(gltfScene); - }); - - travelLoop(); - function travelLoop() { - travel(gltfScene, points, 5000, () => { - travelLoop(); - }); - } - // 重绘图层 - layer.render(); - } - ); - } - }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'Point', - coordinates: [ 112, 35.39847 ] - } - } - ] - }) - .animate(true); - scene.addLayer(threeJSLayer); - }); - - function setMaterial(object) { - if (object.children && object.children.length && object.children.length > 0) { - object.children.map(child => setMaterial(child)); - } else if (object.material) { - object.material.side = THREE.DoubleSide; - } - } - - }, []) - return ( -
- ); -} - -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/threejs/map.md b/legacy/dev-demos/src/features/threejs/map.md deleted file mode 100644 index 3912909ecb5..00000000000 --- a/legacy/dev-demos/src/features/threejs/map.md +++ /dev/null @@ -1,139 +0,0 @@ -### threejs - Map - -```tsx -import { Scene, RasterLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [111.4453125, 32.84267363195431], - pitch: 45, - rotation: 30, - zoom: 12, - token: - 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw', - }), - }); - - scene.on('loaded', () => { - scene.registerRenderService(ThreeRender); - const url1 = - 'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const url2 = - 'https://tiles{1-3}.geovisearth.com/base/v1/cat/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const layer1 = new RasterLayer({ - zIndex: 1, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - - const layer2 = new RasterLayer({ - zIndex: 1, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - }, - }); - scene.addLayer(layer1); - scene.addLayer(layer2); - const threeJSLayer = new ThreeLayer({ - enableMultiPassRenderer: false, - onAddMeshes: (threeScene, layer) => { - threeScene.add(new THREE.AmbientLight(0xffffff)); - const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - const center = scene.getCenter(); - - const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); - const cubeMaterial = new THREE.MeshNormalMaterial({ - side: THREE.DoubleSide, - }); - const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); - layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0); - threeScene.add(cube); - - // 使用 Three.js glTFLoader 加载模型 - const loader = new GLTFLoader(); - loader.load( - 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', - (gltf) => { - const gltfScene = gltf.scene; - setDouble(gltfScene); - layer.adjustMeshToMap(gltfScene); - // gltfScene.scale.set(1000, 1000, 1000) - layer.setMeshScale(gltfScene, 100, 100, 100); - - layer.setObjectLngLat(gltfScene, [center.lng, center.lat], 0); - - const animations = gltf.animations; - if (animations && animations.length) { - const mixer = new THREE.AnimationMixer(gltfScene); - - const animation = animations[2]; - - const action = mixer.clipAction(animation); - - action.play(); - layer.addAnimateMixer(mixer); - } - let t = 0; - setInterval(() => { - t += 0.01; - layer.setObjectLngLat( - gltfScene, - [center.lng, center.lat + Math.sin(t) * 0.1], - 0, - ); - }, 16); - - // 向场景中添加模型 - threeScene.add(gltfScene); - // 重绘图层 - layer.render(); - }, - ); - }, - }).animate(true); - scene.addLayer(threeJSLayer); - }); - - function setDouble(object) { - if ( - object.children && - object.children.length && - object.children.length > 0 - ) { - object.children.map((child) => setDouble(child)); - } else if (object.material) { - object.material.side = THREE.DoubleSide; - } - } - }, []); - return ( -
- ); -}; -``` diff --git a/legacy/dev-demos/src/features/threejs/mapbox.md b/legacy/dev-demos/src/features/threejs/mapbox.md deleted file mode 100644 index 76c2ab76b74..00000000000 --- a/legacy/dev-demos/src/features/threejs/mapbox.md +++ /dev/null @@ -1,113 +0,0 @@ -### threejs - Mapbox -```tsx -import { Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { ThreeLayer, ThreeRender } from '@antv/l7-three'; -import * as THREE from 'three'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { animate, easeInOut } from 'popmotion'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Mapbox({ - center: [ 111.4453125, 32.84267363195431 ], - pitch: 45, - rotation: 30, - zoom: 12, - token: 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw', - }) - }); - - scene.on('loaded', () => { - scene.registerRenderService(ThreeRender); - - const threeJSLayer = new ThreeLayer({ - enableMultiPassRenderer: false, - onAddMeshes: (threeScene, layer) => { - threeScene.add(new THREE.AmbientLight(0xffffff)); - const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); - sunlight.position.set(0, 80000000, 100000000); - sunlight.matrixWorldNeedsUpdate = true; - threeScene.add(sunlight); - - const center = scene.getCenter(); - - const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); - const cubeMaterial = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); - const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); - layer.setObjectLngLat(cube, [ center.lng + 0.05, center.lat ], 0); - threeScene.add(cube); - - // 使用 Three.js glTFLoader 加载模型 - const loader = new GLTFLoader(); - loader.load( - 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', - gltf => { - const gltfScene = gltf.scene; - setDouble(gltfScene); - layer.adjustMeshToMap(gltfScene); - // gltfScene.scale.set(1000, 1000, 1000) - layer.setMeshScale(gltfScene, 100, 100, 100); - - layer.setObjectLngLat( - gltfScene, - [ center.lng, center.lat ], - 0 - ); - - const animations = gltf.animations; - if (animations && animations.length) { - const mixer = new THREE.AnimationMixer(gltfScene); - - const animation = animations[2]; - - const action = mixer.clipAction(animation); - - action.play(); - layer.addAnimateMixer(mixer); - }; - let t = 0; - setInterval(() => { - t += 0.01; - layer.setObjectLngLat( - gltfScene, - [ center.lng, center.lat + Math.sin(t) * 0.1 ], - 0 - ); - }, 16); - - // 向场景中添加模型 - threeScene.add(gltfScene); - // 重绘图层 - layer.render(); - } - ); - } - }) - .animate(true); - scene.addLayer(threeJSLayer); - }); - - function setDouble(object) { - if (object.children && object.children.length && object.children.length > 0) { - object.children.map(child => setDouble(child)); - } else if (object.material) { - object.material.side = THREE.DoubleSide; - } - } - }, []) - return ( -
- ); -} - -``` \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/basemap.md b/legacy/dev-demos/src/features/tile/basemap.md deleted file mode 100644 index c184e89da15..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap.md +++ /dev/null @@ -1,3 +0,0 @@ -### Render Map - Base Tile Map （ L7Layer X 12） -绘制地图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/basemap/basemap.tsx b/legacy/dev-demos/src/features/tile/basemap/basemap.tsx deleted file mode 100644 index edf25b0c358..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/basemap.tsx +++ /dev/null @@ -1,191 +0,0 @@ -// @ts-ignore -import { - Scene, - LineLayer, - Source, - PolygonLayer, - PointLayer, - TileDebugLayer, -} from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new Map({ - center: [121.268, 29], - // zoom: 12, - // zoom: 7, - zoom: 6, - }), - }); - - const url = - 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token='; - const token = - // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ'; - // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw'; - 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w4bXNyeHgzMGl0cjNvbXlmeHFjeDBwZCJ9.05W7JfyT6BVkpu12dYL58w'; - const source = new Source(url + token, { - parser: { - type: 'mvt', - tileSize: 256, - // extent: [-180, -85.051129, 179, 85.051129], - }, - }); - /** - * admin - * country_label - * marine_label - * place_label - * state_label - * water - * road - * road_label - * landuse - * landuse_overlay - * waterway - * tunnel - */ - - scene.on('loaded', () => { - const admin = new LineLayer({ - sourceLayer: 'admin', - usage: 'basemap', - }) - .source(source) - .shape('simple') - .color('#696969'); - - scene.addLayer(admin); - - const road = new LineLayer({ - sourceLayer: 'road', - usage: 'basemap', - }) - .source(source) - .shape('simple') - .color('#FFA500'); - scene.addLayer(road); - - const poiLabel = new PointLayer({ - sourceLayer: 'poi_label', - usage: 'basemap', - zIndex: 1, - }) - .source(source) - .shape('name', 'text') - .color('#333') - .size(10); - scene.addLayer(poiLabel); - - const landuse_overlay = new PolygonLayer({ - sourceLayer: 'landuse_overlay', - usage: 'basemap', - }) - .source(source) - .color('#f00'); - scene.addLayer(landuse_overlay); - - // const waterway = new LineLayer({ - // sourceLayer: 'waterway', - // usage: 'basemap', - // }) - // .source(source) - // .shape('simple') - // // .color('#87CEFA'); - // .color('#f00'); - // scene.addLayer(waterway); - - const tunnel = new LineLayer({ - sourceLayer: 'tunnel', - usage: 'basemap', - }) - .source(source) - .shape('simple') - // .color('#A9A9A9'); - .color('#f00'); - scene.addLayer(tunnel); - - const landuse = new PolygonLayer({ - sourceLayer: 'landuse', - usage: 'basemap', - }) - .source(source) - .color('#90EE90'); - scene.addLayer(landuse); - - const state_label = new PointLayer({ - sourceLayer: 'state_label', - zIndex: 1, - usage: 'basemap', - }) - .source(source) - .shape('name', 'text') - .color('#000') - .size(12); - scene.addLayer(state_label); - - // const placeLabel = new PointLayer({ - // sourceLayer: 'place_label', - // zIndex: 1, - // usage: 'basemap', - // }) - // .source(source) - // .shape('name', 'text') - // .color('#000') - // .size(8); - // scene.addLayer(placeLabel); - - const marineLabel = new PointLayer({ - sourceColor: 'marine_label', - zIndex: 1, - usage: 'basemap', - }) - .source(source) - .shape('name', 'text') - .color('#0ff') - .size(15); - scene.addLayer(marineLabel); - - const countryLabel = new PointLayer({ - sourceLayer: 'country_label', - zIndex: 2, - usage: 'basemap', - }) - .source(source) - .shape('name', 'text') - .color('#f00') - .size(15); - scene.addLayer(countryLabel); - - const water = new PolygonLayer({ - sourceLayer: 'water', - usage: 'basemap', - }) - .source(source) - .color('#87CEFA'); - scene.addLayer(water); - - const debugerLayer = new TileDebugLayer(); - scene.addLayer(debugerLayer); - - // scene.on('zoom', () => { - // console.log(scene.getLayers().length) - // }) - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/basemap/chinadistrictmap.tsx b/legacy/dev-demos/src/features/tile/basemap/chinadistrictmap.tsx deleted file mode 100644 index 3e73765182f..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/chinadistrictmap.tsx +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-ignore -import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - - const scene = new Scene({ - id: 'map', - - map: new Map({ - zoom: 4.5, - center: [116.412427, 39.303573], - }), - }); - - const url = - 'https://mvt.amap.com/district/CHN3/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version='; - const source = new Source(url, { - parser: { - type: 'mvt', - tileSize: 256, - warp: false, - }, - }); - - scene.on('loaded', () => { - const colors = {}; - const getColorByAdcode = function(adcode) { - if (!colors[adcode]) { - const gb = Math.floor(Math.random() * 155 + 50); - colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)'; - } - - return colors[adcode]; - }; - // 绿地 - const fill = new PolygonLayer({ - sourceLayer: 'CHN_Districts', - }) - .source(source) - .shape('fill') - .color('adcode',getColorByAdcode); - - const line = new LineLayer({ - sourceLayer: 'CHN_Districts_L', - usage: 'basemap', - }) - .source(source) - .shape('simple') - .color('#fee0d2'); - - const line2 = new LineLayer({ - sourceLayer: 'CHN_Citys_L', - usage: 'basemap', - }) - .source(source) - .shape('line') - .size(0.6) - .color('#fc9272'); - - const line3 = new LineLayer({ - sourceLayer: 'CHN_Provinces_L', - usage: 'basemap', - }) - .source(source) - .shape('line') - .size(0.6) - .color('#de2d26'); - - scene.addLayer(fill); - scene.addLayer(line); - scene.addLayer(line2); - scene.addLayer(line3); - // scene.addLayer(line2); - // const debugerLayer = new TileDebugLayer({ usage: 'basemap' }); - // scene.addLayer(debugerLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/basemap/chinamap.tsx b/legacy/dev-demos/src/features/tile/basemap/chinamap.tsx deleted file mode 100644 index 93bd14cd4f5..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/chinamap.tsx +++ /dev/null @@ -1,122 +0,0 @@ -// @ts-ignore -import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const colors = {}; - const GDPSpeed = { - '520000': 10, //贵州 - '540000': 10, //西藏 - '530000': 8.5, //云南 - '500000': 8.5, //重庆 - '360000': 8.5, //江西 - '340000': 8.0, //安徽 - '510000': 7.5, //四川 - '350000': 8.5, //福建 - '430000': 8.0, //湖南 - '420000': 7.5, //湖北 - '410000': 7.5, //河南 - '330000': 7.0, //浙江 - '640000': 7.5, //宁夏 - '650000': 7.0, //新疆 - '440000': 7.0, //广东 - '370000': 7.0, //山东 - '450000': 7.3, //广西 - '630000': 7.0, //青海 - '320000': 7.0, //江苏 - '140000': 6.5, //山西 - '460000': 7, // 海南 - '310000': 6.5, //上海 - '110000': 6.5, // 北京 - '130000': 6.5, // 河北 - '230000': 6, // 黑龙江 - '220000': 6, // 吉林 - '210000': 6.5, //辽宁 - '150000': 6.5, //内蒙古 - '120000': 5, // 天津 - '620000': 6, // 甘肃 - '610000': 8.5, // 甘肃 - '710000': 6.64, //台湾 - '810000': 6.0, //香港 - '820000': 6.7, //澳门 - }; - const getColorByDGP = function(adcode) { - if (!colors[adcode]) { - const gdp = GDPSpeed[adcode]; - if (!gdp) { - colors[adcode] = 'rgb(227,227,227)'; - } else { - const rg = 255 - Math.floor(((gdp - 5) / 5) * 255); - colors[adcode] = 'rgb(' + rg + ',' + rg + ',255)'; - } - } - return colors[adcode]; - }; - - const scene = new Scene({ - id: 'map', - - map: new Map({ - center: [112, 30], - // zoom: 12, - zoom: 3, - }), - }); - - const url = - 'https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version='; - const source = new Source(url, { - parser: { - type: 'mvt', - tileSize: 256, - warp: false, - }, - }); - - scene.on('loaded', () => { - // 绿地 - const fill = new PolygonLayer({ - sourceLayer: 'CHN_Cities', - }) - .source(source) - .shape('fill') - .color('adcode_pro', getColorByDGP); - - - const line = new LineLayer({ - sourceLayer: 'CHN_Cities_L', - usage: 'basemap', - }) - .source(source) - .shape('simple') - .color('#FFA500'); - - const line2 = new LineLayer({ - sourceLayer: 'CHN_L', - usage: 'basemap', - }) - .source(source) - .shape('line') - .size(0.6) - .color('#053061'); - - scene.addLayer(fill); - scene.addLayer(line); - scene.addLayer(line2); - // const debugerLayer = new TileDebugLayer({ usage: 'basemap' }); - // scene.addLayer(debugerLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/basemap/data.ts b/legacy/dev-demos/src/features/tile/basemap/data.ts deleted file mode 100644 index 56e54fdb9c9..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/data.ts +++ /dev/null @@ -1 +0,0 @@ -export const data = [{ "name": "美国", "qz": "82404" }, { "name": "格陵兰（丹）", "qz": "18" }, { "name": "中国", "qz": "79404" }, { "name": "意大利", "qz": "80539" }, { "name": "西班牙", "qz": "56188" }, { "name": "德国", "qz": "36508" }, { "name": "伊朗", "qz": "29406" }, { "name": "法国", "qz": "29155" }, { "name": "英国", "qz": "11658" }, { "name": "韩国", "qz": "9232" }, { "name": "瑞士", "qz": "8789" }, { "name": "荷兰", "qz": "7431" }, { "name": "比利时", "qz": "6235" }, { "name": "奥地利", "qz": "5888" }, { "name": "土耳其", "qz": "3629" }, { "name": "加拿大", "qz": "3409" }, { "name": "葡萄牙", "qz": "2995" }, { "name": "挪威", "qz": "2916" }, { "name": "澳大利亚", "qz": "2799" }, { "name": "瑞典", "qz": "2510" }, { "name": "巴西", "qz": "2433" }, { "name": "以色列", "qz": "2369" }, { "name": "马来西亚", "qz": "2031" }, { "name": "爱尔兰", "qz": "1819" }, { "name": "丹麦", "qz": "1724" }, { "name": "捷克", "qz": "1654" }, { "name": "卢森堡", "qz": "1453" }, { "name": "日本", "qz": "1313" }, { "name": "厄瓜多尔", "qz": "1211" }, { "name": "智利", "qz": "1142" }, { "name": "巴基斯坦", "qz": "1057" }, { "name": "波兰", "qz": "1051" }, { "name": "泰国", "qz": "1045" }, { "name": "罗马尼亚", "qz": "906" }, { "name": "沙特阿拉伯", "qz": "900" }, { "name": "印度尼西亚", "qz": "893" }, { "name": "芬兰", "qz": "880" }, { "name": "俄罗斯", "qz": "840" }, { "name": "希腊", "qz": "821" }, { "name": "冰岛", "qz": "737" }, { "name": "钻石公主号邮轮", "qz": "712" }, { "name": "南非", "qz": "709" }, { "name": "印度", "qz": "694" }, { "name": "菲律宾", "qz": "636" }, { "name": "新加坡", "qz": "631" }, { "name": "巴拿马", "qz": "558" }, { "name": "卡塔尔", "qz": "537" }, { "name": "斯洛文尼亚", "qz": "528" }, { "name": "阿根廷", "qz": "502" }, { "name": "秘鲁", "qz": "480" }, { "name": "墨西哥", "qz": "478" }, { "name": "哥伦比亚", "qz": "470" }, { "name": "埃及", "qz": "456" }, { "name": "巴林", "qz": "419" }, { "name": "克罗地亚", "qz": "418" }, { "name": "爱沙尼亚", "qz": "404" }, { "name": "多米尼加共和国", "qz": "392" }, { "name": "塞尔维亚", "qz": "384" }, { "name": "黎巴嫩", "qz": "368" }, { "name": "伊拉克", "qz": "346" }, { "name": "阿拉伯联合酋长国", "qz": "333" }, { "name": "亚美尼亚", "qz": "290" }, { "name": "立陶宛", "qz": "290" }, { "name": "新西兰", "qz": "262" }, { "name": "匈牙利", "qz": "261" }, { "name": "阿尔及利亚", "qz": "246" }, { "name": "保加利亚", "qz": "242" }, { "name": "摩洛哥", "qz": "225" }, { "name": "拉脱维亚", "qz": "221" }, { "name": "乌拉圭", "qz": "217" }, { "name": "斯洛伐克", "qz": "216" }, { "name": "安道尔共和国", "qz": "213" }, { "name": "圣马力诺", "qz": "208" }, { "name": "科威特", "qz": "208" }, { "name": "哥斯达黎加", "qz": "201" }, { "name": "北马其顿共和国", "qz": "177" }, { "name": "阿尔巴尼亚", "qz": "174" }, { "name": "波斯尼亚和黑塞哥维那", "qz": "173" }, { "name": "突尼斯", "qz": "173" }, { "name": "约旦", "qz": "172" }, { "name": "乌克兰", "qz": "156" }, { "name": "摩尔多瓦", "qz": "149" }, { "name": "布基纳法索", "qz": "146" }, { "name": "越南", "qz": "141" }, { "name": "塞浦路斯", "qz": "132" }, { "name": "法罗群岛", "qz": "132" }, { "name": "马耳他", "qz": "129" }, { "name": "文莱", "qz": "109" }, { "name": "委内瑞拉", "qz": "107" }, { "name": "塞内加尔", "qz": "105" }, { "name": "斯里兰卡", "qz": "102" }, { "name": "阿曼", "qz": "99" }, { "name": "柬埔寨", "qz": "98" }, { "name": "哈萨克斯坦", "qz": "97" }, { "name": "阿塞拜疆", "qz": "93" }, { "name": "白俄罗斯", "qz": "86" }, { "name": "留尼汪岛", "qz": "83" }, { "name": "阿富汗", "qz": "80" }, { "name": "科特迪瓦", "qz": "80" }, { "name": "格鲁吉亚", "qz": "77" }, { "name": "瓜德罗普", "qz": "76" }, { "name": "喀麦隆", "qz": "72" }, { "name": "科索沃地区", "qz": "71" }, { "name": "加纳", "qz": "68" }, { "name": "马提尼克", "qz": "66" }, { "name": "乌兹别克斯坦", "qz": "65" }, { "name": "巴勒斯坦", "qz": "64" }, { "name": "特立尼达和多巴哥", "qz": "60" }, { "name": "古巴", "qz": "57" }, { "name": "黑山", "qz": "52" }, { "name": "洪都拉斯", "qz": "52" }, { "name": "波多黎各", "qz": "51" }, { "name": "刚果（金）", "qz": "51" }, { "name": "列支敦士登", "qz": "51" }, { "name": "毛里求斯", "qz": "47" }, { "name": "尼日利亚", "qz": "46" }, { "name": "吉尔吉斯斯坦", "qz": "44" }, { "name": "巴拉圭", "qz": "41" }, { "name": "卢旺达", "qz": "41" }, { "name": "玻利维亚", "qz": "39" }, { "name": "孟加拉国", "qz": "39" }, { "name": "关岛", "qz": "37" }, { "name": "马约特岛", "qz": "35" }, { "name": "肯尼亚", "qz": "31" }, { "name": "根西岛", "qz": "30" }, { "name": "法属圭亚那", "qz": "28" }, { "name": "牙买加", "qz": "26" }, { "name": "直布罗陀", "qz": "26" }, { "name": "法属玻利尼西亚", "qz": "25" }, { "name": "危地马拉", "qz": "24" }, { "name": "多哥", "qz": "23" }, { "name": "马恩岛", "qz": "23" }, { "name": "摩纳哥", "qz": "23" }, { "name": "阿鲁巴岛", "qz": "19" }, { "name": "马达加斯加", "qz": "19" }, { "name": "巴巴多斯", "qz": "18" }, { "name": "泽西岛", "qz": "18" }, { "name": "美属维尔京群岛", "qz": "17" }, { "name": "新喀里多尼亚", "qz": "14" }, { "name": "乌干达", "qz": "14" }, { "name": "马尔代夫", "qz": "13" }, { "name": "坦桑尼亚", "qz": "13" }, { "name": "萨尔瓦多", "qz": "13" }, { "name": "吉布提", "qz": "12" }, { "name": "埃塞俄比亚", "qz": "12" }, { "name": "赤道几内亚", "qz": "11" }, { "name": "法属圣马丁岛", "qz": "11" }, { "name": "蒙古", "qz": "10" }, { "name": "海地", "qz": "8" }, { "name": "开曼群岛", "qz": "8" }, { "name": "塞舌尔", "qz": "7" }, { "name": "百慕大群岛", "qz": "7" }, { "name": "苏里南", "qz": "7" }, { "name": "加蓬", "qz": "6" }, { "name": "库拉索", "qz": "6" }, { "name": "圭亚那", "qz": "5" }, { "name": "叙利亚", "qz": "5" }, { "name": "格林兰岛", "qz": "5" }, { "name": "中非共和国", "qz": "5" }, { "name": "莫桑比克", "qz": "5" }, { "name": "斐济", "qz": "5" }, { "name": "贝宁", "qz": "5" }, { "name": "纳米比亚", "qz": "5" }, { "name": "巴哈马", "qz": "5" }, { "name": "缅甸", "qz": "5" }, { "name": "几内亚", "qz": "5" }, { "name": "史瓦帝尼", "qz": "4" }, { "name": "斯威士兰", "qz": "4" }, { "name": "厄立特里亚", "qz": "4" }, { "name": "梵蒂冈", "qz": "4" }, { "name": "刚果（布）", "qz": "4" }, { "name": "尼日尔", "qz": "4" }, { "name": "老挝", "qz": "3" }, { "name": "安提瓜和巴布达", "qz": "3" }, { "name": "圣卢西亚", "qz": "3" }, { "name": "圣巴泰勒米岛", "qz": "3" }, { "name": "尼泊尔", "qz": "3" }, { "name": "乍得", "qz": "3" }, { "name": "苏丹", "qz": "3" }, { "name": "利比里亚", "qz": "3" }, { "name": "佛得角", "qz": "3" }, { "name": "赞比亚", "qz": "3" }, { "name": "毛里塔尼亚", "qz": "2" }, { "name": "索马里", "qz": "2" }, { "name": "尼加拉瓜", "qz": "2" }, { "name": "马里", "qz": "2" }, { "name": "几内亚比绍", "qz": "2" }, { "name": "多米尼克", "qz": "2" }, { "name": "圣基茨和尼維斯", "qz": "2" }, { "name": "蒙特塞拉特", "qz": "2" }, { "name": "冈比亚", "qz": "2" }, { "name": "伯利兹", "qz": "2" }, { "name": "安哥拉", "qz": "2" }, { "name": "津巴布韦", "qz": "2" }, { "name": "不丹", "qz": "2" }, { "name": "荷属圣马丁", "qz": "2" }, { "name": "圣文森特和格林纳丁斯", "qz": "1" }, { "name": "东帝汶", "qz": "1" }, { "name": "格林纳达", "qz": "1" }, { "name": "特克斯和凯科斯群岛", "qz": "1" }, { "name": "利比亚", "qz": "1" }, { "name": "巴布亚新几内亚", "qz": "1" }]; \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/basemap/vectormap.tsx b/legacy/dev-demos/src/features/tile/basemap/vectormap.tsx deleted file mode 100644 index 65f2352420d..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/vectormap.tsx +++ /dev/null @@ -1,167 +0,0 @@ -// @ts-ignore -import { - Scene, - LineLayer, - Source, - PolygonLayer, - PointLayer, - TileDebugLayer, -} from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new Map({ - center: [121.268, 30.3628], - // zoom: 12, - zoom: 7, - }), - }); - - const url = - 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token='; - const token = - // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ'; - // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw'; - 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w4bXNyeHgzMGl0cjNvbXlmeHFjeDBwZCJ9.05W7JfyT6BVkpu12dYL58w'; - const source = new Source(url + token, { - parser: { - type: 'mvt', - tileSize: 256, - // extent: [-180, -85.051129, 179, 85.051129], - }, - }); - /** - * admin - * country_label - * marine_label - * place_label - * state_label - * water - * road - * road_label - * landuse - * landuse_overlay - * waterway - * tunnel - */ - - scene.on('loaded', () => { - const admin = new LineLayer({ - sourceLayer: 'admin', - }) - .source(source) - .shape('simple') - .size(1) - .color('#696969'); - scene.addLayer(admin); - - const road = new LineLayer({ - sourceLayer: 'road', - }) - .source(source) - .shape('simple') - .color('#FFA500'); - scene.addLayer(road); - - // const landuse_overlay = new PolygonLayer({ - // sourceLayer: 'landuse_overlay', - // }) - // .source(source) - // .color('#f00'); - // scene.addLayer(landuse_overlay); - - // const waterway = new LineLayer({ - // sourceLayer: 'waterway', - // }) - // .source(source) - // .shape('simple') - // .color('#87CEFA'); - // scene.addLayer(waterway); - - // const tunnel = new LineLayer({ - // sourceLayer: 'tunnel', - // }) - // .source(source) - // .shape('simple') - // // .color('#A9A9A9'); - // .color('#f00'); - // scene.addLayer(tunnel); - - const landuse = new PolygonLayer({ - sourceLayer: 'landuse', - }) - .source(source) - .color('#90EE90'); - scene.addLayer(landuse); - - const state_label = new PointLayer({ - sourceLayer: 'state_label', - zIndex: 1, - }) - .source(source) - .shape('name', 'text') - .color('#000') - .size(10); - scene.addLayer(state_label); - - // const placeLabel = new PointLayer({ - // sourceLayer: 'place_label', - // zIndex: 1, - // }) - // .source(source) - // .shape('name', 'text') - // .color('#000') - // .size(8); - // scene.addLayer(placeLabel); - - const marineLabel = new PointLayer({ - sourceColor: 'marine_label', - zIndex: 1, - }) - .source(source) - .shape('name', 'text') - .color('#0ff') - .size(15); - scene.addLayer(marineLabel); - - const countryLabel = new PointLayer({ - sourceLayer: 'country_label', - zIndex: 2, - }) - .source(source) - .shape('name', 'text') - .color('#f00') - .size(15); - scene.addLayer(countryLabel); - - const water = new PolygonLayer({ - sourceLayer: 'water', - }) - .source(source) - .color('#87CEFA'); - scene.addLayer(water); - - const debugerLayer = new TileDebugLayer(); - scene.addLayer(debugerLayer); - - // scene.on('zoom', () => { - // console.log(scene.getLayers().length) - // }) - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/basemap/vectormap2.tsx b/legacy/dev-demos/src/features/tile/basemap/vectormap2.tsx deleted file mode 100644 index 8604f2f4167..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/vectormap2.tsx +++ /dev/null @@ -1,174 +0,0 @@ -// @ts-ignore -import { - Scene, - Source, - PolygonLayer, - TileDebugLayer, -} from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new Map({ - center: [121.268, 30.3628], - // zoom: 12, - zoom: 4, - }), - }); - - const url = - 'https://minedata.cn/service/data/mvt-layer?datasource=merge2&z={z}&x={x}&y={y}&request=GetTile&appKey=ca78282dfff148e3be5390ce027068f5&solu=12612'; - const source = new Source(url, { - parser: { - type: 'mvt', - tileSize: 256, - // extent: [-180, -85.051129, 179, 85.051129], - }, - }); - /** - * admin - * country_label - * marine_label - * place_label - * state_label - * water - * road - * road_label - * landuse - * landuse_overlay - * waterway - * tunnel - */ - - scene.on('loaded', () => { - // 绿地 - const water_surface = new PolygonLayer({ - sourceLayer: 'water_surface', - - }) - .source(source) - .shape('fill') - .color('#9fd7fc'); - // const landuse = new PolygonLayer({ - // sourceLayer: 'Landuse', - - // }) - // .source(source) - // .shape('fill') - // .color('#f0f2f5') - // .style({ - // opacity: 0.25 - // }); - - scene.addLayer(water_surface); - // scene.addLayer(landuse); - - // const road = new LineLayer({ - // sourceLayer: 'road', - // }) - // .source(source) - // .shape('simple') - // .color('#FFA500'); - // scene.addLayer(road); - - // const landuse_overlay = new PolygonLayer({ - // sourceLayer: 'landuse_overlay', - // }) - // .source(source) - // .color('#f00'); - // scene.addLayer(landuse_overlay); - - // const waterway = new LineLayer({ - // sourceLayer: 'waterway', - // }) - // .source(source) - // .shape('simple') - // .color('#87CEFA'); - // scene.addLayer(waterway); - - // const tunnel = new LineLayer({ - // sourceLayer: 'tunnel', - // }) - // .source(source) - // .shape('simple') - // // .color('#A9A9A9'); - // .color('#f00'); - // scene.addLayer(tunnel); - - // const landuse = new PolygonLayer({ - // sourceLayer: 'landuse', - // }) - // .source(source) - // .color('#90EE90'); - // scene.addLayer(landuse); - - // const state_label = new PointLayer({ - // sourceLayer: 'state_label', - // zIndex: 1, - // }) - // .source(source) - // .shape('name', 'text') - // .color('#000') - // .size(10); - // scene.addLayer(state_label); - - // const placeLabel = new PointLayer({ - // sourceLayer: 'place_label', - // zIndex: 1, - // }) - // .source(source) - // .shape('name', 'text') - // .color('#000') - // .size(8); - // scene.addLayer(placeLabel); - - // const marineLabel = new PointLayer({ - // sourceColor: 'marine_label', - // zIndex: 1, - // }) - // .source(source) - // .shape('name', 'text') - // .color('#0ff') - // .size(15); - // scene.addLayer(marineLabel); - - // const countryLabel = new PointLayer({ - // sourceLayer: 'country_label', - // zIndex: 2, - // }) - // .source(source) - // .shape('name', 'text') - // .color('#f00') - // .size(15); - // scene.addLayer(countryLabel); - - // const water = new PolygonLayer({ - // sourceLayer: 'water', - // }) - // .source(source) - // .color('#87CEFA'); - // scene.addLayer(water); - - const debugerLayer = new TileDebugLayer(); - scene.addLayer(debugerLayer); - - // scene.on('zoom', () => { - // console.log(scene.getLayers().length) - // }) - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/basemap/worldmap.tsx b/legacy/dev-demos/src/features/tile/basemap/worldmap.tsx deleted file mode 100644 index 8c5cd3f1f02..00000000000 --- a/legacy/dev-demos/src/features/tile/basemap/worldmap.tsx +++ /dev/null @@ -1,101 +0,0 @@ -// @ts-ignore -import { Scene, Source, PolygonLayer,LineLayer } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { data } from './data'; - -export default () => { - useEffect(() => { - const counts = [10000, 5000, 1000, 500, 100]; - const color = ['#41ae76', '#99d8c9', '#ccece6', '#e5f5f9', '#f7fcfd']; - const scene = new Scene({ - id: 'map', - - map: new Map({ - center: [112, 30], - // zoom: 12, - zoom: 0, - }), - }); - - const url = - 'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version='; - const source = new Source(url, { - parser: { - type: 'mvt', - tileSize: 256, - warp: false, - }, - }); - function unicode2Char(name) { - const code = name.split('/').slice(1).map((c)=>{ - return String.fromCharCode('0x'+c) - }); - return code.join(''); - } - - scene.on('loaded', () => { - // 绿地 - const water_surface = new PolygonLayer({ - sourceLayer: 'WLD', - }) - .source(source) - .shape('fill') - .color('NAME_CHN', (NAME_CHN) => { - - const namestr = unicode2Char(NAME_CHN) - const country = data.find((c) => { - return c.name == namestr; - }); - if (!country) { - return '#fff'; - } - const qz = (country.qz as unknown as number)* 1; - if (qz > counts[0]) { - return color[0]; - } else if (qz > counts[1]) { - return color[1]; - } else if (qz > counts[2]) { - return color[2]; - } else if (qz > counts[3]) { - return color[3]; - } else { - return color[4]; - } - }); - - const line = new LineLayer({ - sourceLayer: 'WLD_L', - }) - .source(source) - .shape('line') - .size(0.6) - .color('type',(t)=>{ - - if (t === '0') { - return 'red'; - } - if (t === '2') { - return '#09f'; - } - return '#fc9272' - }); - - scene.addLayer(water_surface); - scene.addLayer(line); - // const debugerLayer = new TileDebugLayer({ usage: 'basemap' }); - // scene.addLayer(debugerLayer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/hillshade.md b/legacy/dev-demos/src/features/tile/hillshade.md deleted file mode 100644 index 462c363b593..00000000000 --- a/legacy/dev-demos/src/features/tile/hillshade.md +++ /dev/null @@ -1,3 +0,0 @@ -### Raster - HillShade -山体阴影 - diff --git a/legacy/dev-demos/src/features/tile/mask.md b/legacy/dev-demos/src/features/tile/mask.md deleted file mode 100644 index 4e06a423d6c..00000000000 --- a/legacy/dev-demos/src/features/tile/mask.md +++ /dev/null @@ -1,5 +0,0 @@ -### Vector - Mask - -#### vector mask -mask 掩模瓦片图层 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/minedatamap.md b/legacy/dev-demos/src/features/tile/minedatamap.md deleted file mode 100644 index 6f6780cfa26..00000000000 --- a/legacy/dev-demos/src/features/tile/minedatamap.md +++ /dev/null @@ -1,4 +0,0 @@ -### 底图- Vector Tile Map - -地图底图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/raster/imageDataMapping.tsx b/legacy/dev-demos/src/features/tile/raster/imageDataMapping.tsx deleted file mode 100644 index f04ea1cf353..00000000000 --- a/legacy/dev-demos/src/features/tile/raster/imageDataMapping.tsx +++ /dev/null @@ -1,68 +0,0 @@ -//@ts-ignore -import { Scene, RasterLayer } from '@antv/l7'; -//@ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map2', - map: new Map({ - center: [130, 30], - pitch: 0, - style: 'normal', - zoom: 1.5, - }), - }); - - scene.on('loaded', () => { - const layer = new RasterLayer({}) - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - updateStrategy: 'overlap', - }, - }, - ) - .shape('tileDataImage') - .style({ - clampLow: false, - clampHigh: false, - domain: [0, 8000], - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - // float value = u_pixelConstant + ((r * u_pixelConstantR + g * u_pixelConstantG + b * u_pixelConstantB) * u_pixelConstantRGB); - pixelConstant: 0.0, - pixelConstantR: 256 * 20, - pixelConstantG: 256, - pixelConstantB: 1, - pixelConstantRGB: 1, - }); - - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/rasterData.md b/legacy/dev-demos/src/features/tile/rasterData.md deleted file mode 100644 index b681b0f55c3..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData.md +++ /dev/null @@ -1,10 +0,0 @@ -### Raster - RasterData -数据栅格 -#### 加载 tiff - - -#### 加载 lerc - - -#### 加载 image - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterData/hillShading.tsx b/legacy/dev-demos/src/features/tile/rasterData/hillShading.tsx deleted file mode 100644 index 5ac9e73f558..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/hillShading.tsx +++ /dev/null @@ -1,205 +0,0 @@ -//@ts-ignore -import { Scene, RasterLayer } from '@antv/l7'; -//@ts-ignore -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Mapbox({ - center: [-119.5591, 37.715], - zoom: 9, - style: 'mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g', - token: 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w4bXNyeHgzMGl0cjNvbXlmeHFjeDBwZCJ9.05W7JfyT6BVkpu12dYL58w' - }), - }); - - const canvas = document.createElement('canvas'); - canvas.width = 256; - canvas.height = 256; - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - - scene.on('loaded', () => { - const layer = new RasterLayer(); - layer - .source( - // 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw', - 'https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.webp?sku=101xrmKJip7uQ&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w4bXNyeHgzMGl0cjNvbXlmeHFjeDBwZCJ9.05W7JfyT6BVkpu12dYL58w', - // 'https://b.tiles.mapbox.com/v3/aj.sf-dem/12/657/1589.png', - // https://b.tiles.mapbox.com/v3/aj.sf-dem/12/659/1589.png - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - // extent: [-180, -85.051129, 179, 85.051129], - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], { - type: 'image/png', - }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - - const shadeOptions = { - resolution: 256, - sunEl: 0, - sunAz: 131, - vert: 2 - } - const elevationImage = ctx.getImageData(0, 0, 256, 256); - const width = elevationImage.width; - const height = elevationImage.height; - const elevationData = elevationImage.data; - const shadeData = new Uint8ClampedArray(elevationData.length); - const dp = shadeOptions.resolution * 2; - const maxX = width - 1; - const maxY = height - 1; - const pixel = [0, 0, 0, 0]; - const twoPi = 2 * Math.PI; - const halfPi = Math.PI / 2; - - const sunEl = (Math.PI * shadeOptions.sunEl) / 180; - const sunAz = (Math.PI * shadeOptions.sunAz) / 180; - - const cosSunEl = Math.cos(sunEl); - const sinSunEl = Math.sin(sunEl); - let pixelX, - pixelY, - x0, - x1, - y0, - y1, - offset, - z0, - z1, - dzdx, - dzdy, - slope, - aspect, - cosIncidence, - scaled; - function calculateElevation(pixel) { - // The method used to extract elevations from the DEM. - // In this case the format used is - // red + green * 2 + blue * 3 - // - // Other frequently used methods include the Mapbox format - // (red * 256 * 256 + green * 256 + blue) * 0.1 - 10000 - // and the Terrarium format - // (red * 256 + green + blue / 256) - 32768 - // - // return pixel[0] + pixel[1] * 2 + pixel[2] * 3; - - return -10000 + (pixel[0] * 256 * 256 + pixel[1] * 2 * 256 + pixel[2]) * 0.1; - - } - - const arr2: number[] = []; - - for (pixelY = 0; pixelY <= maxY; ++pixelY) { - y0 = pixelY === 0 ? 0 : pixelY - 1; - y1 = pixelY === maxY ? maxY : pixelY + 1; - for (pixelX = 0; pixelX <= maxX; ++pixelX) { - x0 = pixelX === 0 ? 0 : pixelX - 1; - x1 = pixelX === maxX ? maxX : pixelX + 1; - - // determine elevation for (x0, pixelY) - offset = (pixelY * width + x0) * 4; - pixel[0] = elevationData[offset]; - pixel[1] = elevationData[offset + 1]; - pixel[2] = elevationData[offset + 2]; - pixel[3] = elevationData[offset + 3]; - z0 = shadeOptions.vert * calculateElevation(pixel); - - // determine elevation for (x1, pixelY) - offset = (pixelY * width + x1) * 4; - pixel[0] = elevationData[offset]; - pixel[1] = elevationData[offset + 1]; - pixel[2] = elevationData[offset + 2]; - pixel[3] = elevationData[offset + 3]; - z1 = shadeOptions.vert * calculateElevation(pixel); - - dzdx = (z1 - z0) / dp; - - // determine elevation for (pixelX, y0) - offset = (y0 * width + pixelX) * 4; - pixel[0] = elevationData[offset]; - pixel[1] = elevationData[offset + 1]; - pixel[2] = elevationData[offset + 2]; - pixel[3] = elevationData[offset + 3]; - z0 = shadeOptions.vert * calculateElevation(pixel); - - // determine elevation for (pixelX, y1) - offset = (y1 * width + pixelX) * 4; - pixel[0] = elevationData[offset]; - pixel[1] = elevationData[offset + 1]; - pixel[2] = elevationData[offset + 2]; - pixel[3] = elevationData[offset + 3]; - z1 = shadeOptions.vert * calculateElevation(pixel); - - dzdy = (z1 - z0) / dp; - - slope = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy)); - - aspect = Math.atan2(dzdy, -dzdx); - if (aspect < 0) { - aspect = halfPi - aspect; - } else if (aspect > halfPi) { - aspect = twoPi - aspect + halfPi; - } else { - aspect = halfPi - aspect; - } - - cosIncidence = - sinSunEl * Math.cos(slope) + - cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect); - - offset = (pixelY * width + pixelX) * 4; - scaled = 255 * cosIncidence; - shadeData[offset + 1] = scaled; - shadeData[offset + 2] = scaled; - shadeData[offset + 3] = elevationData[offset + 3]; - - const r = shadeData[offset] - const g = shadeData[offset + 1] - const b = shadeData[offset + 2] - // (0.30*R)+(0.59*G)+(0.11*B) - arr2.push( 0.30 * r + 0.59 * g + 0.11 * b ); - } - } - - return {rasterData: arr2, width: width, height: height}; - }, - }, - }, - ) - .style({ - opacity: 0.5, - domain: [0, 255], - rampColors: { - colors: [ - '#fff', - '#000', - ], - positions: [0, 1.0], - }, - }); - - scene.addLayer(layer) - - }); - }, []); - - return ( -
- ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadImage.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadImage.tsx deleted file mode 100644 index 41186fcc854..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadImage.tsx +++ /dev/null @@ -1,92 +0,0 @@ -//@ts-ignore -import { Scene, RasterLayer } from '@antv/l7'; -//@ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map2', - map: new Map({ - center: [105.732421875, 32.24997445586331], - pitch: 0, - style: 'dark', - zoom: 2, - }), - }); - - const canvas = document.createElement('canvas'); - canvas.width = 256; - canvas.height = 256; - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - - scene.on('loaded', () => { - const layer = new RasterLayer(); - layer - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - zoomOffset: 0, - extent: [-180, -85.051129, 179, 85.051129], - minZoom: 0, - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], { - type: 'image/png', - }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - const imgData = ctx.getImageData(0, 0, 256, 256).data; - const arr: number[] = []; - for (let i = 0; i < imgData.length; i += 4) { - const R = imgData[i]; - arr.push(R); - } - return { - rasterData: arr, - width: 256, - height: 256, - }; - }, - }, - }, - ) - .style({ - domain: [0, 255], - clampLow: true, - rampColors: { - colors: [ - '#f7fcf5', - '#e5f5e0', - '#c7e9c0', - '#a1d99b', - '#74c476', - '#41ab5d', - '#238b45', - '#006d2c', - '#00441b', - ], - positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0], - }, - }); - - scene.addLayer(layer) - - }); - }, []); - - return ( -
- ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadImageMask.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadImageMask.tsx deleted file mode 100644 index 0c6fd3c587f..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadImageMask.tsx +++ /dev/null @@ -1,98 +0,0 @@ -//@ts-ignore -import { Scene, RasterLayer } from '@antv/l7'; -//@ts-ignore -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map3', - - map: new Mapbox({ - center: [100, 30], - pitch: 0, - style: 'blank', - zoom: 4, - }), - }); - const canvas = document.createElement('canvas'); - canvas.width = 256; - canvas.height = 256; - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new RasterLayer({ - mask: true, - maskfence: data, - }); - layer - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], { - type: 'image/png', - }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - - const imgData = ctx.getImageData(0, 0, 256, 256).data; - const arr: number[] = []; - for (let i = 0; i < imgData.length; i += 4) { - arr.push(imgData[i]); - } - return { - rasterData: arr, - width: 256, - height: 256, - }; - }, - }, - }, - ) - .style({ - opacity: 1, - domain: [0, 256], - clampLow: true, - rampColors: { - colors: [ - - 'rgb(0,0,255)', - 'rgb(0,0,0)', - 'rgb(0,255,0)', - 'rgb(255,0,0)', - 'rgb(255,0,0)', - ], - positions: [0, 0.25, 0.5, 0.75, 1.0], - }, - }) - .select(true); - - scene.addLayer(layer); - - - }); - }); - }, []); - - return ( -
- ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadImageRGB.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadImageRGB.tsx deleted file mode 100644 index 13b048d4778..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadImageRGB.tsx +++ /dev/null @@ -1,94 +0,0 @@ -//@ts-ignore -import { Scene, RasterLayer } from '@antv/l7'; -//@ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map2', - map: new Map({ - center: [105.732421875, 32.24997445586331], - pitch: 0, - style: 'dark', - zoom: 2, - }), - }); - - const canvas = document.createElement('canvas'); - canvas.width = 256; - canvas.height = 256; - const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - - scene.on('loaded', () => { - const layer = new RasterLayer(); - layer - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - // dataType: 'arraybuffer', - dataType: 'rgb', - tileSize: 256, - zoomOffset: 0, - extent: [-180, -85.051129, 179, 85.051129], - minZoom: 0, - format: async (data: any) => { - // console.log(bands) - const blob: Blob = new Blob([new Uint8Array(data)], { - type: 'image/png', - }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - const imgData = ctx.getImageData(0, 0, 256, 256).data; - const channelR: number[] = []; - const channelG: number[] = []; - const channelB: number[] = []; - for (let i = 0; i < imgData.length; i += 4) { - const R = imgData[i]; - const G = imgData[i + 1]; - const B = imgData[i + 2]; - channelR.push(R); - channelG.push(G); - channelB.push(B); - } - return [ - { rasterData: channelR, width: 256, height: 256 }, - { rasterData: channelG, width: 256, height: 256 }, - { rasterData: channelB, width: 256, height: 256 } - ] - }, - // operation: ['band', 0] - // operation: (allBands) => { - // // console.log(allBands) - // return allBands[0].rasterData - // } - operation: { - r: ['band', 0], - g: ['band', 1], - b: ['band', 2], - } - }, - }, - ) - .style({ - }); - - scene.addLayer(layer) - - }); - }, []); - - return ( -
- ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadLerc.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadLerc.tsx deleted file mode 100644 index bda0f2fe184..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadLerc.tsx +++ /dev/null @@ -1,68 +0,0 @@ -//@ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -//@ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as Lerc from 'lerc'; - -export default () => { - - useEffect(() => { - const scene = new Scene({ - id: 'lerc', - map: new Map({ - center: [120, 30], - style: 'blank', - zoom: 3 - }), - }); - - scene.on('loaded', () => { - const layer = new RasterLayer(); - layer - .source( - 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - format: async (data: any) => { - const image = Lerc.decode(data); - return { - rasterData: image.pixels[0], - width: image.width, - height: image.height, - }; - }, - }, - }, - ) - .style({ - domain: [0, 1024], - rampColors: { - colors: [ '#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858' ], - positions: [ 0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0 ], - }, - }) - .select(true); - - scene.addLayer(layer); - }); - - - return () => { - scene.destroy(); - }; - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadMultiTiff.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadMultiTiff.tsx deleted file mode 100644 index af19a04a7da..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadMultiTiff.tsx +++ /dev/null @@ -1,171 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene, Source } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -const colorList = [ - '#419bdf', // Water - '#419bdf', - - '#397d49', // Tree - '#397d49', - - '#88b053', // Grass - '#88b053', - - '#7a87c6', // vegetation - '#7a87c6', - - '#e49635', // Crops - '#e49635', - - '#dfc35a', // shrub - '#dfc35a', - - '#c4281b', // Built Area - '#c4281b', - - '#a59b8f', // Bare ground - '#a59b8f', - - '#a8ebff', // Snow - '#a8ebff', - - '#616161', // Clouds - '#616161' -]; -const positions = [ - 0.0, - 0.1, - 0.1, - 0.2, - 0.2, - 0.3, - 0.3, - 0.4, - 0.4, - 0.5, - 0.5, - 0.6, - 0.6, - 0.7, - 0.7, - 0.8, - 0.8, - 0.9, - 0.9, - 1.0 -]; -export default () => { - - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new GaodeMap({ - center: [ 116, 27 ], - zoom: 6, - style: 'dark' - }) - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json' - ) - .then(res => res.json()) - .then(maskData => { - const layer = new RasterLayer({ - mask: true, - maskfence: maskData - }); - - // const urls = [ - // 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - // 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - // ] - const urls = [ - { - url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - bands: [0] - }, - { - url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff' - // default bands: [0] - } - ] - const tileSource = new Source(urls, - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - maxZoom: 13.1, - format: async (data, bands) => { - // current raster file bands - console.log('bands', bands) - - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image = await tiff.getImage(bands[0]); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - const rasterData = values[0]; - - // return bandData | bandData[] - // return [{ rasterData, width, height }]; - return { rasterData, width, height }; - }, - // bands: [0, 1] - operation: ['*', ['band', 0], 2], - // operation: (allBands) => { - // const rasterData: number[] = []; - // const { width, height } = allBands[0]; - // const length = width * height; - // const band0 = allBands[0]; - // const band1 = allBands[1]; - - // for(let i = 0;i < length; i++) { - // const v1 = band0.rasterData[i] | 0; - // const v2 = band1.rasterData[i] | 0; - // rasterData.push(v1 * (1/2) + v2 * (1/2)) - // } - // return rasterData; - // // return bands[0].rasterData; - // } - } - }); - - layer.source(tileSource) - .style({ - domain: [ 0.001, 11.001 ], - clampLow: false, - rampColors: { - colors: colorList, - positions - } - }); - - scene.addLayer(layer); - }); - }); - - - - return () => { - scene.destroy(); - }; - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/rasterData/loadTiff.tsx b/legacy/dev-demos/src/features/tile/rasterData/loadTiff.tsx deleted file mode 100644 index 39261ae7a5e..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/loadTiff.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { RasterLayer, Scene, Source } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -const colorList = [ - '#419bdf', // Water - '#419bdf', - - '#397d49', // Tree - '#397d49', - - '#88b053', // Grass - '#88b053', - - '#7a87c6', // vegetation - '#7a87c6', - - '#e49635', // Crops - '#e49635', - - '#dfc35a', // shrub - '#dfc35a', - - '#c4281b', // Built Area - '#c4281b', - - '#a59b8f', // Bare ground - '#a59b8f', - - '#a8ebff', // Snow - '#a8ebff', - - '#616161', // Clouds - '#616161' -]; -const positions = [ - 0.0, - 0.1, - 0.1, - 0.2, - 0.2, - 0.3, - 0.3, - 0.4, - 0.4, - 0.5, - 0.5, - 0.6, - 0.6, - 0.7, - 0.7, - 0.8, - 0.8, - 0.9, - 0.9, - 1.0 -]; -export default () => { - - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new GaodeMap({ - center: [ 116, 27 ], - zoom: 6, - style: 'dark' - }) - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json' - ) - .then(res => res.json()) - .then(maskData => { - const layer = new RasterLayer({ - mask: true, - maskfence: maskData - }); - - const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - maxZoom: 13.1, - format: async data => { - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { rasterData: values[0], width, height }; - } - } - }); - - layer.source(tileSource) - .style({ - domain: [ 0.001, 11.001 ], - clampLow: false, - rampColors: { - colors: colorList, - positions - // colors: ['#f00', '#f00'], - // positions: [0, 1] - } - }); - - scene.addLayer(layer); - - layer.on('click', (e) => { - console.log('layer click') - console.log(e) - }) - - // setTimeout(() => { - // layer.style({ - // rampColors: { - // colors: ['#f00', '#ff0'], - // positions: [0, 1] - // } - // }); - // scene.render() - // }, 2000) - }); - }); - - - - return () => { - scene.destroy(); - }; - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/rasterData/update.tsx b/legacy/dev-demos/src/features/tile/rasterData/update.tsx deleted file mode 100644 index 0c6f21c5171..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterData/update.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { RasterLayer, Scene, Source } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -const colorList = [ - '#419bdf', // Water - '#419bdf', - - '#397d49', // Tree - '#397d49', - - '#88b053', // Grass - '#88b053', - - '#7a87c6', // vegetation - '#7a87c6', - - '#e49635', // Crops - '#e49635', - - '#dfc35a', // shrub - '#dfc35a', - - '#c4281b', // Built Area - '#c4281b', - - '#a59b8f', // Bare ground - '#a59b8f', - - '#a8ebff', // Snow - '#a8ebff', - - '#616161', // Clouds - '#616161' -]; -const positions = [ - 0.0, - 0.1, - 0.1, - 0.2, - 0.2, - 0.3, - 0.3, - 0.4, - 0.4, - 0.5, - 0.5, - 0.6, - 0.6, - 0.7, - 0.7, - 0.8, - 0.8, - 0.9, - 0.9, - 1.0 -]; -export default () => { - - useEffect(() => { - const scene = new Scene({ - id: 'map', - - map: new GaodeMap({ - center: [ 116, 27 ], - zoom: 6, - style: 'dark' - }) - }); - - scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json' - ) - .then(res => res.json()) - .then(maskData => { - const layer = new RasterLayer({ - mask: true, - maskfence: maskData - }); - - const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - maxZoom: 13.1, - format: async data => { - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { rasterData: values[0], width, height }; - } - } - }); - - layer.source(tileSource) - .style({ - domain: [ 0.001, 11.001 ], - clampLow: false, - rampColors: { - colors: colorList, - positions - } - }); - - scene.addLayer(layer); - - setTimeout(() => { - layer.style({ - rampColors: { - colors: ['#f00', '#ff0'], - positions: [0, 1] - } - }); - scene.render() - }, 2000) - }); - }); - - - - return () => { - scene.destroy(); - }; - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/rasterDataImage.md b/legacy/dev-demos/src/features/tile/rasterDataImage.md deleted file mode 100644 index 87f629e4470..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterDataImage.md +++ /dev/null @@ -1,5 +0,0 @@ -### Raster - RasterDataImage -raster 图片瓦片 - -#### 图片瓦片 - 颜色映射 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterDataMask.md b/legacy/dev-demos/src/features/tile/rasterDataMask.md deleted file mode 100644 index 6404a3beb3b..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterDataMask.md +++ /dev/null @@ -1,5 +0,0 @@ -### Raster - RasterData - Mask -数据栅格 + Mask - -#### 加载 image + Mask - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterDataMul.md b/legacy/dev-demos/src/features/tile/rasterDataMul.md deleted file mode 100644 index 6a31cbce41a..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterDataMul.md +++ /dev/null @@ -1,4 +0,0 @@ -### Raster - RasterData - Multi -数据栅格 Multi -#### 加载 tiff - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterDataRGB.md b/legacy/dev-demos/src/features/tile/rasterDataRGB.md deleted file mode 100644 index c54ef1c2d50..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterDataRGB.md +++ /dev/null @@ -1,5 +0,0 @@ -### Raster - RasterData RGB -彩色数据栅格（多通道） - -#### 加载 image - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/rasterDataUpdate.md b/legacy/dev-demos/src/features/tile/rasterDataUpdate.md deleted file mode 100644 index 1a5c8545311..00000000000 --- a/legacy/dev-demos/src/features/tile/rasterDataUpdate.md +++ /dev/null @@ -1,4 +0,0 @@ -### Raster - RasterData - Update -数据栅格 update -#### 加载 tiff - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/vector.md b/legacy/dev-demos/src/features/tile/vector.md deleted file mode 100644 index 17516d3fdfc..00000000000 --- a/legacy/dev-demos/src/features/tile/vector.md +++ /dev/null @@ -1,13 +0,0 @@ -### Vector - - -#### vector line - --> - - - - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/vector/debugLayer.tsx b/legacy/dev-demos/src/features/tile/vector/debugLayer.tsx deleted file mode 100644 index bd0ae1ae305..00000000000 --- a/legacy/dev-demos/src/features/tile/vector/debugLayer.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Scene, TileDebugLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'test', - // - map: new Mapbox({ - center: [121.268, 30.3628], - pitch: 0, - // style: 'blank', - zoom: 4, - }), - }); - - const layer = new TileDebugLayer(); - - scene.on('loaded', () => { - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/vector/geojson-vt.tsx b/legacy/dev-demos/src/features/tile/vector/geojson-vt.tsx deleted file mode 100644 index 5d7b06e0517..00000000000 --- a/legacy/dev-demos/src/features/tile/vector/geojson-vt.tsx +++ /dev/null @@ -1,78 +0,0 @@ -// @ts-ignore -import { Scene, Source, PolygonLayer } from '@antv/l7'; -// @ts-ignore -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'geojsonvt', - - map: new Mapbox({ - center: [121.268, 30.3628], - pitch: 0, - style: 'blank', - zoom: 4, - }), - }); - - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/2b7aae6e-5f40-437f-8047-100e9a0d2808.json', - ) - .then((d) => d.json()) - .then((data) => { - const source = new Source(data, { - parser: { - type: 'geojsonvt', - tileSize: 256, - zoomOffset: 0, - maxZoom: 9, - // extent: [-180, -85.051129, 179, 85.051129], - }, - }); - - // const line = new LineLayer({ - // featureId: 'COLOR', - // sourceLayer: 'testName', // woods hillshade contour ecoregions ecoregions2 city - // }).source(source) - // .color('COLOR') - // .size(2) - // scene.addLayer(line); - - const polygon = new PolygonLayer({ - featureId: 'COLOR', - // sourceLayer: 'testName', // woods hillshade contour ecoregions ecoregions2 city - }) - .source(source) - .color('COLOR') - // .active(true) - .select(true) - .style({ - opacity: 0.6, - }); - scene.addLayer(polygon); - - // scene.on('zoom', (e) => console.log(scene.getZoom())); - - // const point = new PointLayer({ - // featureId: 'COLOR', - // sourceLayer: 'testName', // woods hillshade contour ecoregions ecoregions2 city - // }) - // .source(source) - // // .color('COLOR') - // .color('#f00') - // .size(20) - // scene.addLayer(point); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/vector/line.tsx b/legacy/dev-demos/src/features/tile/vector/line.tsx deleted file mode 100644 index ea6cb7283bd..00000000000 --- a/legacy/dev-demos/src/features/tile/vector/line.tsx +++ /dev/null @@ -1,92 +0,0 @@ -// @ts-ignore -import { Scene, LineLayer,PolygonLayer } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'line', - - map: new Map({ - center: [121.268, 30.3628], - zoom: 4, - }), - }); - - const maskData = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - geometry: { - type: 'MultiPolygon', - coordinates: [ - [ - [ - [125.15625000000001, 8.407168163601076], - [116.54296874999999, -21.289374355860424], - [156.26953125, -20.632784250388013], - [150.29296875, 2.1088986592431382], - ], - ], - [ - [ - [78.57421875, 46.92025531537451], - [51.67968749999999, 37.020098201368114], - [87.890625, 28.76765910569123], - ], - ], - ], - }, - }, - ], - }; - const polygonLayer = new PolygonLayer({visible:true}).source(maskData).shape('fill').color('#f00').style({opacity:0.4}); - const layer = new LineLayer({ - maskLayers: [polygonLayer], - featureId: 'COLOR', - sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city - }); - layer - .source( - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { - parser: { - type: 'mvt', - tileSize: 256, - zoomOffset: 0, - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }, - }, - ) - // .shape('simple') - .color('COLOR') - .size(2) - .select(true); - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.addLayer(polygonLayer); - setTimeout(()=>{ - console.log('disableMask') - layer.disableMask() - scene.render() - },2000) - layer.on('click', (e) => { - console.log(e) - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/vector/mask.tsx b/legacy/dev-demos/src/features/tile/vector/mask.tsx deleted file mode 100644 index d6b6803fbcd..00000000000 --- a/legacy/dev-demos/src/features/tile/vector/mask.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// @ts-ignore -import { Scene, RasterLayer, MaskLayer } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'line', - - map: new Map({ - center: [121.268, 30.3628], - pitch: 0, - style: 'blank', - zoom: 4, - }), - }); - - const layer = new MaskLayer({ - color: '#f00', - - sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city - }).source( - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { - parser: { - type: 'mvt', - tileSize: 256, - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }, - }, - ) - - const satellite = new RasterLayer({ - mask: true - }) - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - updateStrategy: 'overlap', - }, - }, - ) - - scene.on('loaded', () => { - scene.addLayer(layer); - scene.addLayer(satellite); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/vector/point.tsx b/legacy/dev-demos/src/features/tile/vector/point.tsx deleted file mode 100644 index 28aa212d451..00000000000 --- a/legacy/dev-demos/src/features/tile/vector/point.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-ignore -import { Scene, PointLayer } from '@antv/l7'; -// @ts-ignore -import { Mapbox } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -const list = [ - { - value: -28.0, - color1: 'orange', - province_adcode: '630000', - province_adName: '青海省', - province: '青海省', - nnh: 2, - }, - { - value: 29.0, - color1: 'orange', - province_adcode: '640000', - province_adName: '宁夏回族自治区', - province: '宁夏回族自治区', - nnh: 3, - }, - { - value: 60.0, - color1: 'orange', - province_adcode: '650000', - province_adName: '新疆维吾尔自治区', - province: '新疆维吾尔自治区', - nnh: 4, - }, - { - value: -31.0, - color1: 'orange', - province_adcode: '710000', - province_adName: '台湾省', - province: '台湾省', - nnh: 4, - }, - { - value: 80.0, - color1: 'orange', - province_adcode: '810000', - province_adName: '香港特别行政区', - province: '香港特别行政区', - nnh: 4, - }, - { - value: -33.0, - color1: 'orange', - province_adcode: '820000', - province_adName: '澳门特别行政区', - province: '澳门特别行政区', - nnh: 4, - }, -]; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'point', - - map: new Mapbox({ - center: [121.268, 30.3628], - pitch: 0, - style: 'blank', - zoom: 4, - }), - }); - - const layer = new PointLayer({ - featureId: 'COLOR', - sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city - }); - layer - .source( - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { - parser: { - type: 'mvt', - tileSize: 256, - zoomOffset: 0, - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }, - transforms: [ - { - type: 'join', - sourceField: 'nnh', - targetField: 'NNH', // data 对应字段名 绑定到的地理数据 - data: list, - }, - ], - }, - ) - // .shape('simple') - // .shape('line') - .color('COLOR') - .size(10) - .select(true); - - scene.on('loaded', () => { - scene.addLayer(layer); - layer.on('click', (e) => { - console.log(e); - }); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/features/tile/vectormap.md b/legacy/dev-demos/src/features/tile/vectormap.md deleted file mode 100644 index 911c47aa2aa..00000000000 --- a/legacy/dev-demos/src/features/tile/vectormap.md +++ /dev/null @@ -1,3 +0,0 @@ -### Render Map - Vector Tile Map -绘制地图 - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/worldmap.md b/legacy/dev-demos/src/features/tile/worldmap.md deleted file mode 100644 index 3dbcc49321d..00000000000 --- a/legacy/dev-demos/src/features/tile/worldmap.md +++ /dev/null @@ -1,3 +0,0 @@ -### world -world - \ No newline at end of file diff --git a/legacy/dev-demos/src/features/tile/worldmap.tsx b/legacy/dev-demos/src/features/tile/worldmap.tsx deleted file mode 100644 index 4dcb67405bd..00000000000 --- a/legacy/dev-demos/src/features/tile/worldmap.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// @ts-ignore -import { - PolygonLayer, - Scene, - // LineLayer, - Source, -} from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [121.268, 30.3628], - // zoom: 12, - zoom: 4, - }), - }); - // https://mvt.amap.com/district/WLD/2/3/1/4096?key=309f07ac6bc48160e80b480ae511e1e9&version= - const url = - 'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version='; - const source = new Source(url, { - parser: { - type: 'mvt', - tileSize: 256, - extent: [-180, -85.051129, 179, 85.051129], - }, - }); - - scene.on('loaded', () => { - // 绿地 - const water_surface = new PolygonLayer({ - sourceLayer: 'WLD', - }) - .source(source) - .shape('fill') - .color('#9fd7fc'); - - scene.addLayer(water_surface); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/map/demo/3d_base_map.tsx b/legacy/dev-demos/src/gallery/map/demo/3d_base_map.tsx deleted file mode 100644 index 2fefe58260b..00000000000 --- a/legacy/dev-demos/src/gallery/map/demo/3d_base_map.tsx +++ /dev/null @@ -1,370 +0,0 @@ -import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import { RDBSource } from 'district-data'; -import React, { useEffect } from 'react'; - -export default () => { - const pointData = [ - { - data: [113.177855, 23.068432], - longitude: '113.177855', - latitude: '23.068432', - to_longitude: '108.484899', - to_latitude: '22.826101', - text: '广州', - color: 'rgb(57,255,20)', - value: '1', - unit: '天', - }, - { - data: [108.484899, 22.826101], - longitude: '108.484899', - latitude: '22.826101', - to_longitude: '106.467366', - to_latitude: '26.64921', - text: '南宁', - color: 'rgb(57,255,20)', - value: '6', - unit: '小时', - }, - { - data: [106.467366, 26.64921], - longitude: '106.467366', - latitude: '26.64921', - text: '贵阳', - color: 'rgb(57,255,20)', - value: '3', - unit: '小时', - }, - { - data: [106.563516, 29.618267], - longitude: '106.563516', - latitude: '29.618267', - text: '重庆', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [125.403053, 43.907546], - longitude: '125.403053', - latitude: '43.907546', - text: '长春', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [113.607498, 34.794084], - longitude: '113.607498', - latitude: '34.794084', - to_longitude: '125.403053', - to_latitude: '43.907546', - text: '郑州', - color: 'rgb(57,255,20)', - value: '1', - unit: '天', - }, - { - data: [114.63332, 38.174659], - longitude: '114.63332', - latitude: ' 38.174659', - text: '石家庄', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [101.740747, 36.558335], - longitude: '101.740747', - latitude: '36.558335', - text: '西宁', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [111.677604, 40.853815], - longitude: '111.677604', - latitude: '40.853815', - to_longitude: '106.563516', - to_latitude: '29.618267', - text: '呼和浩特', - color: 'rgb(255,255,255)', - value: '1', - unit: '天', - }, - { - data: [120.152667, 30.195612], - longitude: '120.152667', - latitude: '30.195612', - text: '杭州', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [115.804205, 28.766485], - longitude: '115.804205', - latitude: '28.766485', - to_longitude: '120.152667', - to_latitude: '30.195612', - text: '南昌', - color: 'rgb(255,255,255)', - value: '1', - unit: '天', - }, - { - data: [126.520858, 45.842367], - longitude: '126.520858', - latitude: '45.842367', - text: '哈尔滨', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [123.459186, 41.711976], - longitude: '123.459186', - latitude: '41.711976', - to_longitude: '126.520858', - to_latitude: '45.842367', - text: '沈阳', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - { - data: [117.113981, 36.624459], - longitude: '117.113981', - latitude: '36.624459', - to_longitude: '114.63332', - to_latitude: '38.174659', - text: '济南', - color: 'rgb(255,255,255)', - value: '3', - unit: '小时', - }, - ]; - - - useEffect(() => { - const source = new RDBSource({ - version: 2023, - }); - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [111.4453125, 32.84267363195431], - pitch: 40, - zoom: 4, - }), - }); - - scene.addImage( - '00', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PPo0QYHNResAAAAAAAAAAAAADmJ7AQ/original', - ); - scene.addImage( - '01', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*epXiTZ8B1McAAAAAAAAAAAAADmJ7AQ/original', - ); - scene.addImage( - '02', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6WGaQKkJppIAAAAAAAAAAAAADmJ7AQ/original', - ); - scene.on('loaded', () => { - for (let i = 0; i < pointData.length; i++) { - const el = document.createElement('label'); - el.className = 'labelclass'; - el.textContent = pointData[i].value + pointData[i].unit; - el.style.background = '#e24c4c8c'; - el.style.borderRadius = '50%'; // 圆角半径设为半个宽度/高度，形成圆形 - el.style.width = '40px'; - el.style.height = '40px'; - el.style.borderColor = '#e24c4c8c'; - el.style.textAlign = 'center'; - el.style.lineHeight = '40px'; - el.style.color = '#fff'; - const marker = new Marker({ - element: el, - offsets: [50,10] - }).setLnglat({ - lng: Number(pointData[i].longitude) * 1, - lat: Number(pointData[i].latitude), - }); - scene.addMarker(marker); - } - source - .getData({ - level: 'province', - }) - .then((data) => { - const newFeatures = data.features.filter((item) => { - return item.properties.name; - }); - const newData = { - type: 'FeatureCollection', - features: newFeatures, - }; - const lineDown = new LineLayer() - .source(newData) - .shape('line') - .color('#989494') - .size(1) - .style({ - raisingHeight: 200000, - }); - - scene.addLayer(lineDown); - return ''; - }); - - source - .getData({ - level: 'country', - }) - .then((data) => { - const provincelayer = new PolygonLayer({}) - .source(data) - .size(650000) - .shape('extrude') - .color('#1c355c') - .style({ - heightfixed: true, - pickLight: true, - sourceColor: '#5886CF', - targetColor: '#5886CF', - // raisingHeight: 200000, - opacity: 0.8, - }); - const boundaryLine = new LineLayer({ zIndex: 10 }) - .source(data) - .shape('line') - .color('#5dddff') - .size(2) - - .style({ - raisingHeight: 650000, - }); - - scene.addLayer(boundaryLine); - - scene.addLayer(provincelayer); - - return ''; - }); - const flyLine3 = new LineLayer() - .source(pointData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - x1: 'to_longitude', - y1: 'to_latitude', - }, - }) - .size(2) - .shape('arc3d') - .color(['rgb(0, 191, 255)', 'rgba(255, 255, 255, 1)']) - .animate({ - interval: 2, - trailLength: 2, - duration: 1, - }) - .style({ - thetaOffset: 2, - opacity: 1, - }); - const pointLayer = new PointLayer({ - depth: false, - zIndex: 11, - heightFixed: true, - }) - .source(pointData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('cylinder') - .size([6, 6, 90]) - .active(true) - .color('color') - .style({ - opacity: 1, - opacityLinear: { - enable: true, // true - false - dir: 'up', // up - down - }, - lightEnable: false, - }); - const pointLayer2 = new PointLayer({ zIndex: 10 }) - .source(pointData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('circle') - .active(true) - .animate(true) - .size(30) - .color('color'); - - const textLayer = new PointLayer({ zIndex: 2 }) - .source(pointData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('text', '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: 2551000, - textAllowOverlap: true, - heightFixed: true, - }); - const imageLayer = new PointLayer({ zIndex: 15 }) - .source(pointData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('text', ['00', '01', '02']) - .size(10) - .style({ - raisingHeight: 110, - }); - scene.addLayer(textLayer); - scene.addLayer(imageLayer); - scene.addLayer(pointLayer); - scene.addLayer(pointLayer2); - scene.addLayer(flyLine3); - return ''; - }); - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/map/demo/fujian.tsx b/legacy/dev-demos/src/gallery/map/demo/fujian.tsx deleted file mode 100644 index 6667aedd597..00000000000 --- a/legacy/dev-demos/src/gallery/map/demo/fujian.tsx +++ /dev/null @@ -1,226 +0,0 @@ -import { PolygonLayer,PointLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [118, 24.8], - zoom: 6, - }), - }); - - scene.on('loaded', async () => { - - scene.addImage( - 'province', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hvqeQa9I6ccAAAAAAAAAAAAADmJ7AQ/original' - ); - scene.addImage( - 'city', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sBlgRp8Ah7sAAAAAAAAAAAAADmJ7AQ/original' - ); - scene.addImage( - 'county', - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ufrWTqCNCScAAAAAAAAAAAAADmJ7AQ/original' - ); - // 获取数据 - const dataList = [ - // 市级行政区 - 'https://mdn.alipayobjects.com/afts/file/A*jPjCTad_s24AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json', - // 市级行政区一级群列岛名 - 'https://mdn.alipayobjects.com/afts/file/A*HW8yQb2joA8AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json', - ///市级行政区一级河流名.json - 'https://mdn.alipayobjects.com/afts/file/A*EjtNRrENGToAAAAAAAAAAAAADrd2AQ/市级行政区一级河流名.json', - //市级行政区一级港湾名.json - 'https://mdn.alipayobjects.com/afts/file/A*lqxATobbMLwAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E6%B8%AF%E6%B9%BE%E5%90%8D.json', - //市级行政区一级岛屿名.json - 'https://mdn.alipayobjects.com/afts/file/A*xyeHRZCF8DsAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E5%B2%9B%E5%B1%BF%E5%90%8D.json', - //市级行政区县级行政中心.json - 'https://mdn.alipayobjects.com/afts/file/A*vrDfSrB8J4sAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', - //市级行政区县级行政区.json - 'https://mdn.alipayobjects.com/afts/file/A*lfffQ5ej7AEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json', - // 市级行政区省级行政中心.json - 'https://mdn.alipayobjects.com/afts/file/A*jtlsTqxTJkoAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E7%9C%81%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', - //市级行政区山峰.json - 'https://mdn.alipayobjects.com/afts/file/A*DRSfRqBs9qsAAAAAAAAAAAAADrd2AQ/市级行政区山峰.json', - //市级行政区色带.json - 'https://mdn.alipayobjects.com/afts/file/A*KRD4QbjkZCMAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E8%89%B2%E5%B8%A6.json', - //市级行政区面状水域.json - 'https://mdn.alipayobjects.com/afts/file/A*3e9nSJwXqu0AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E9%9D%A2%E7%8A%B6%E6%B0%B4%E5%9F%9F.json', - //市级行政区境界线.json - 'https://mdn.alipayobjects.com/afts/file/A*tA8nSqhulQQAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A2%83%E7%95%8C%E7%BA%BF.json', - //市级行政区河流.json - 'https://mdn.alipayobjects.com/afts/file/A*2vGmRrYpTjEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B2%B3%E6%B5%81.json', - //市级行政区海岸线.json - 'https://mdn.alipayobjects.com/afts/file/A*juI9TpBcQ74AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B5%B7%E5%B2%B8%E7%BA%BF.json', - //市级行政区二级群列岛名.json - 'https://mdn.alipayobjects.com/afts/file/A*E4ReSqdYq-cAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%BA%8C%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json', - //市级行政区地级市行政中心.json - 'https://mdn.alipayobjects.com/afts/file/A*I3HSQaYyQ_UAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%BA%A7%E5%B8%82%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', - //市级行政区大型水库名.json - 'https://mdn.alipayobjects.com/afts/file/A*xxXKTpte0VUAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A4%A7%E5%9E%8B%E6%B0%B4%E5%BA%93%E5%90%8D.json', - - - - ]; - - - - const result = await Promise.all(dataList.map(async (url)=> await(await fetch(url)).json())) - const cityLayer = new PolygonLayer({ - autoFit:true - }).source(result[6]).shape('fill') - .scale('COLOR',{ - type:'cat', - domain:['Y','P','G','R'], - }) - .color('COLOR',['#f7f6c6','#fceaea','#e0e7d5','#f3e4cf']); - - // 陆上轮廓 - const layer2 = new PolygonLayer().source(result[9]).shape('fill').color('#b4cad7'); - - // 水域 - const waterLayer = new PolygonLayer().source(result[10]).shape('fill').color('#bcebfe'); - // 面状河流线 - const waterLayerLine = new PolygonLayer().source(result[10]).shape('line').size(0.5).color('#50aac8'); - - // 线河流线 - const river_Line = new PolygonLayer().source(result[12]).shape('line').size(0.5).color('#50aac8'); - // 群岛标注图层 - const island_name = new PointLayer({ - minZoom:8 - }).source(result[1]).shape('NAME','text').size(15).color('#3b474e'); - - // 河流标注图层 - const river_name = new PointLayer({minZoom:5}).source(result[2]).shape('NAME','text').size(15).color('#4aa1bd').style({ - fontWeight:800, - }); - // 港湾标注 - const gangwan_name = new PointLayer({ - minZoom:6 - }).source(result[3]).shape('NAME','text').size(15).color('#4eaed9').style({ - fontWeight:800, - }); - // 海岛 - const island_name1= new PointLayer({ - minZoom:7 - }).source(result[4]).shape('NAME','text').size(15).color('#3b474e').style({ - fontWeight:600, - }); - - // 县界 - const county_Line = new PolygonLayer({ - minZoom:5 - }).source(result[11]).shape('line').size(0.3).color('#a59f97'); - // 城市界 - const city_Line = new PolygonLayer().source(result[0]).shape('line').size(0.5).color('#787269'); - - // 海岸线 - const sea_Line = new PolygonLayer().source(result[13]).shape('line').size(0.5).color('#50aac8'); - - // 城市标注 - const cityName = new PointLayer({ - maxZoom:8, - minZoom:5 - }).source(result[15]).shape('NAME','text').size(14).color('#000').style({ - fontWeight:800, - textAnchor:'top', - textOffset:[0,12] - }); - - // 城市点位 - - const cityPoint = new PointLayer({ - maxZoom:7, - minZoom:5 - }).source(result[15]).shape('city').size(5); - - // 省级市标注 - const provinceCityName = new PointLayer({ - minZoom:5, - maxZoom:7, - }).source(result[7]).shape('NAME','text').size(14).color('#000').style({ - fontWeight:800, - textAnchor:'top', - textOffset:[0,12] - }); - - // 省级市点位 - const provincePoint = new PointLayer({ - minZoom:5, - maxZoom:7, - }).source(result[7]).shape('province').size(5); - - // 县标注 - const countyName = new PointLayer({ - minZoom:8 - }).source(result[5]).shape('NAME','text').size(14).color('#333').style({ - fontWeight:600, - textAnchor:'top', - textOffset:[0,12] - });7 - // 县点位 - const countyPoint = new PointLayer({ - minZoom:8 - }).source(result[5]).shape('county').size(5); - - // 县标注 - const mountainPoint = new PointLayer({ - minZoom:6 - }).source(result[8]).shape('triangle').size(6).color('#326648'); - - - // 山标注 - const mountainPoint_name = new PointLayer({ - minZoom:6 - }).source(result[8]).shape('NAME','text').size(14).color('#326648').style({ - fontWeight:800, - textAnchor:'top', - textOffset:[0,12] - }); - - - - - scene.addLayer(cityLayer); - scene.addLayer(layer2); - scene.addLayer(waterLayer); - scene.addLayer(waterLayerLine); - scene.addLayer(river_Line); - scene.addLayer(county_Line); - - scene.addLayer(city_Line); - scene.addLayer(sea_Line); - - scene.addLayer(cityName); - scene.addLayer(cityPoint); - scene.addLayer(countyName); - scene.addLayer(countyPoint); - scene.addLayer(provinceCityName); - scene.addLayer(provincePoint); - scene.addLayer(island_name); - scene.addLayer(island_name1); - scene.addLayer(gangwan_name); - scene.addLayer(river_name); - scene.addLayer(mountainPoint); - scene.addLayer(mountainPoint_name); - - }); - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/map/fujian.md b/legacy/dev-demos/src/gallery/map/fujian.md deleted file mode 100644 index d8588a7f52f..00000000000 --- a/legacy/dev-demos/src/gallery/map/fujian.md +++ /dev/null @@ -1,3 +0,0 @@ -### 福建 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/map/suspension-map.md b/legacy/dev-demos/src/gallery/map/suspension-map.md deleted file mode 100644 index 63f062eb488..00000000000 --- a/legacy/dev-demos/src/gallery/map/suspension-map.md +++ /dev/null @@ -1,3 +0,0 @@ -### 大屏地图 - - diff --git a/legacy/dev-demos/src/gallery/scale/cat.md b/legacy/dev-demos/src/gallery/scale/cat.md deleted file mode 100644 index 296267a01da..00000000000 --- a/legacy/dev-demos/src/gallery/scale/cat.md +++ /dev/null @@ -1,3 +0,0 @@ -### 枚举类型 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/cat.tsx b/legacy/dev-demos/src/gallery/scale/cat.tsx deleted file mode 100644 index 5328c12d29d..00000000000 --- a/legacy/dev-demos/src/gallery/scale/cat.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; -import { useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - const [mapScene, setMapScene] = useState(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - scene.on('loaded', () => { - setMapScene(scene); - }); - return () => { - mapScene?.destroy(); - }; - }, []); - - useEffect(() => { - if (geoData && mapScene) { - console.log(geoData, mapScene); - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .scale('rate', { - type: 'quantile', - }) - .shape('fill') - .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) - .style({ - opacity: 1, - }); - - mapScene.addLayer(layer); - // addLayers(geoData, scene, layer); - } - }, [geoData, mapScene]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/diverging.md b/legacy/dev-demos/src/gallery/scale/diverging.md deleted file mode 100644 index 983fdc2a736..00000000000 --- a/legacy/dev-demos/src/gallery/scale/diverging.md +++ /dev/null @@ -1,2 +0,0 @@ -### 离散类型 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/diverging.tsx b/legacy/dev-demos/src/gallery/scale/diverging.tsx deleted file mode 100644 index eddfeefc878..00000000000 --- a/legacy/dev-demos/src/gallery/scale/diverging.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect, useState } from 'react'; -import { addEuropeLayers, useEuropeData } from './useLine'; - -export default () => { - const { geoData } = useEuropeData(); - const [scene, setScene] = useState(); - - useEffect(() => { - if (!scene) { - const mapScene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - interactive: true, - }), - }); - setScene(mapScene); - } - - if (geoData && scene) { - const layer = new PolygonLayer({ - autoFit: true, - }) - .source(geoData.country, { - transforms: [ - { - type: 'join', - sourceField: 'country', - targetField: 'NAME', - data: geoData.turnout, - }, - ], - }) - // .scale('turnout', { - // type: 'quantize', // the input domain and output range of a diverging scale always has exactly three elements - // // domain: [40, 70, 90], - // }) - .shape('fill') - .color('turnout', [ - '#b2182b', - '#f9b393', - '#f8f6e9', - '#9fc7e0', - '#2166ac', - ]) - .style({ - opacity: 1, - }); - - scene?.addLayer(layer); - addEuropeLayers(geoData, scene, layer); - } - return () => { - scene?.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/index.md b/legacy/dev-demos/src/gallery/scale/index.md deleted file mode 100644 index cd6448609af..00000000000 --- a/legacy/dev-demos/src/gallery/scale/index.md +++ /dev/null @@ -1,74 +0,0 @@ -## Scale 简介 - -Scale 度量是将地图数据值（数字、日期、类别等数据）转成视觉值（颜色、大小、形状）。尺度 Scale 是数据可视化的基本组成部分，因为它们决定了视觉编码的性质。 L7 目前支持连续、离散、枚举类型数据的Scale，并支持位置、形状、大小和颜色编码的映射。 - -Range 和 domain 是 Scale 中非常重要的两个参数 - -- domain: 地图数据值的定义区间 -- range：视觉值的区间定义 - -不同Scale 的差异在于 domain->range 的转换方法的不同 - -| 数据类型 | 度量类型 | -| ---- | ---- | -| 连续 | linear、log、pow、time、quantize、quantile | -| 分类 | cat、timeCat | -| 常量 | identity | - -在使用 `L7` 开发过程中默认情况下不需要进行度量的配置，因为 `L7` 代码内部已经根据数据的形式对度量进行了假设，其计算过程如下： - -查看用户是否制定了对应字段的数据类型 （`type`) -如果没有，判断字段的第一条数据的字段类型 - -如果数据中不存在对应的字段，则为 'identity' -如果是数字则为 'linear'； -如果是字符串，判定是否是时间格式，如果是时间格式则为时间类型 'time', -否则是分类类型 'cat' - -### Cat - -Cat 指枚举类型，用于展示分类数据，比如农作物种植区分布图，水稻、玉米、大豆等不同类别需要映射为不同的颜色。 - -比如 - - domain = ['corn','rice',soybean'] - - range = ['red','white','blue'] - - 三种作物会分别转成对应的颜色 - - -### identify - -常量度量 某个字段是不变的常量。 - -### Linear - -线性是连续数据的映射方法，数据和视觉值是通过线性方法换算的。如数据值 1-100 线性映射到红到蓝的线下渐变色每个数字对应一个颜色 - -### Sequential - -### quantize - -相等间隔会将属性值的范围划分为若干个大小相等的子范围。相等间隔最适用于常见的数据范围，如百分比和温度。这种方法强调的是某个属性值相对于其他值的量 -### quantile - -每个类都含有相等数量的要素。分位数分类非常适用于呈线性分布的数据。分位数为每个类分配数量相等的数据值。不存在空类，也不存在值过多或过少的类。 -由于使用“分位数”分类将要素以同等数量分组到每个类中，因此得到的地图往往具有误导性。可能会将相似的要素置于相邻的类中，或将值差异较大的要素置于相同类中。可通过增加类的数量将这种失真降至最低。 - -### threshold - -他允许将域的任意子集（非统一段）映射到范围内的离散值。输入域仍然是连续的，并根据提供给域属性的一组阈值划分为多个切片。 range 属性必须有 N+1 个元素，其中 N 是域中提供的阈值边界数 - -手动设置间隔 Manual interval 手动设置分级分类区间，某些数据会有相应的业界标准，或者需要进行某种特殊的显示。如空气质量数据有严格数据分段标准 - -``` --1 => "red" -0 => "white" -0.5 => "white" -1.0 => "blue" -1000 => "blue - -``` - -### diverging diff --git a/legacy/dev-demos/src/gallery/scale/linear.md b/legacy/dev-demos/src/gallery/scale/linear.md deleted file mode 100644 index 0b3af945c19..00000000000 --- a/legacy/dev-demos/src/gallery/scale/linear.md +++ /dev/null @@ -1,2 +0,0 @@ -### 连续线性 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/linear.tsx b/legacy/dev-demos/src/gallery/scale/linear.tsx deleted file mode 100644 index a4bc8125c6f..00000000000 --- a/legacy/dev-demos/src/gallery/scale/linear.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .shape('fill') - .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) // '#b6e2b6', '#64c1c0', '#338cbb', - .style({ - opacity: 1, - }); - - scene.addLayer(layer); - addLayers(geoData, scene, layer); - } - return () => { - scene.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/map.md b/legacy/dev-demos/src/gallery/scale/map.md deleted file mode 100644 index e576fb807a3..00000000000 --- a/legacy/dev-demos/src/gallery/scale/map.md +++ /dev/null @@ -1,2 +0,0 @@ -### 疫情达峰 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/map.tsx b/legacy/dev-demos/src/gallery/scale/map.tsx deleted file mode 100644 index 870c183404f..00000000000 --- a/legacy/dev-demos/src/gallery/scale/map.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { LineLayer, PointLayer, PolygonLayer, Scene, Source } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; - -export default () => { - useEffect(() => { - fetch( - 'https://mdn.alipayobjects.com/afts/file/A*7HqFT7he7KoAAAAAAAAAAAAADrd2AQ/12.20%20%E5%90%84%E7%9C%81%E4%BB%BD%E9%A6%96%E8%BD%AE%E6%84%9F%E6%9F%93%E9%AB%98%E5%B3%B0%E6%9C%9F%E9%A2%84%E6%B5%8B.json', - ) - .then((res) => res.json()) - .then((data) => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - style: 'dark', - center: [112, 37.8], - zoom: 3, - }), - }); - const chinaSource = new Source(data, { - parser: { - type: 'json', - geometry: 'geometry', - }, - }); - const layer = new PolygonLayer({ - autoFit: true, - }) - .source(chinaSource) - .scale('达峰进度条', { - type: 'quantize', - domain: [0, 100], - unknown: '#f7f4f9', - }) - .shape('fill') - .color('达峰进度条', [ - '#fee5d9', - '#fc9272', - '#fb6a4a', - '#de2d26', - '#a50f15', - ]) - .style({ - opacity: 1, - }); - const linelayer = new LineLayer({}) - .source(chinaSource) - .shape('line') - .color('#ddd') - .style({ - opacity: 1, - }); - - layer.on('inited', () => { - console.log(layer.getLegend('color')); - }); - const pointSource = new Source(data, { - parser: { - type: 'json', - geometry: 'center', - }, - }); - const nameLayer = new PointLayer() - .source(pointSource) - .size(12) - .shape('name', 'text') - .color('#525252') - .style({ - textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] - // spacing: 2, // 字符间距 - // padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#fff', // 描边颜色 - strokeWidth: 1, // 描边宽度 - strokeOpacity: 1.0, - }); - - const textLayer = new PointLayer() - .source(pointSource) - .size(14) - .shape('达峰进度条', 'text') - .color('#e7298a') - .style({ - textAnchor: 'bottom', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [0, -20], // 文本相对锚点的偏移量 [水平, 垂直] - // spacing: 2, // 字符间距 - // padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#fff', // 描边颜色 - strokeWidth: 2, // 描边宽度 - strokeOpacity: 1.0, - fontWeight: 800, - textAllowOverlap: true, - }); - - scene.addLayer(layer); - scene.addLayer(linelayer); - scene.addLayer(nameLayer); - scene.addLayer(textLayer); - }); - }, []); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/quantile.md b/legacy/dev-demos/src/gallery/scale/quantile.md deleted file mode 100644 index b09c02e2a99..00000000000 --- a/legacy/dev-demos/src/gallery/scale/quantile.md +++ /dev/null @@ -1,2 +0,0 @@ -### 等分位 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/quantile.tsx b/legacy/dev-demos/src/gallery/scale/quantile.tsx deleted file mode 100644 index 213f20553c1..00000000000 --- a/legacy/dev-demos/src/gallery/scale/quantile.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .scale('rate', { - type: 'quantile', - }) - .shape('fill') - .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) - .style({ - opacity: 1, - }); - - layer.on('mousemove', (e) => { - console.log(e); - }); - scene.addLayer(layer); - addLayers(geoData, scene, layer); - } - return () => { - console.log(111); - scene.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/quantize.md b/legacy/dev-demos/src/gallery/scale/quantize.md deleted file mode 100644 index 88eca372bfc..00000000000 --- a/legacy/dev-demos/src/gallery/scale/quantize.md +++ /dev/null @@ -1,2 +0,0 @@ -### 等间距 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/quantize.tsx b/legacy/dev-demos/src/gallery/scale/quantize.tsx deleted file mode 100644 index 42b90c25f5b..00000000000 --- a/legacy/dev-demos/src/gallery/scale/quantize.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .scale('rate', { - type: 'quantize', - }) - .shape('fill') - .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) // '#b6e2b6', '#64c1c0', '#338cbb', - .style({ - opacity: 1, - }); - - scene.addLayer(layer); - addLayers(geoData, scene, layer); - } - return () => { - scene.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/sequential.md b/legacy/dev-demos/src/gallery/scale/sequential.md deleted file mode 100644 index b105cb06f87..00000000000 --- a/legacy/dev-demos/src/gallery/scale/sequential.md +++ /dev/null @@ -1,2 +0,0 @@ -### 连续 - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/sequential.tsx b/legacy/dev-demos/src/gallery/scale/sequential.tsx deleted file mode 100644 index f6e22a713a8..00000000000 --- a/legacy/dev-demos/src/gallery/scale/sequential.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .scale('rate', { - type: 'sequential', // he input domain and output range of a sequential scale always has exactly two elements, and the output range is typically specified as an interpolator rather than an array of values. - }) - .shape('fill') - .color('rate', ['#ffffcc', '#253494']) - .style({ - opacity: 1, - }); - - scene.addLayer(layer); - addLayers(geoData, scene, layer); - } - return () => { - scene.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/threshold.md b/legacy/dev-demos/src/gallery/scale/threshold.md deleted file mode 100644 index ac1c6913d9f..00000000000 --- a/legacy/dev-demos/src/gallery/scale/threshold.md +++ /dev/null @@ -1,3 +0,0 @@ -### 自定义分段 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/gallery/scale/threshold.tsx b/legacy/dev-demos/src/gallery/scale/threshold.tsx deleted file mode 100644 index 486d893b5af..00000000000 --- a/legacy/dev-demos/src/gallery/scale/threshold.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import { addLayers, useData } from './useLine'; - -export default () => { - const { geoData } = useData(); - - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - pitch: 0, - style: 'light', - center: [-96, 37.8], - zoom: 3, - }), - }); - if (geoData) { - const layer = new PolygonLayer({}) - .source(geoData.county, { - transforms: [ - { - type: 'join', - sourceField: 'id', - targetField: 'id', - data: geoData.unemploymentdata, - }, - ], - }) - .scale('rate', { - type: 'threshold', - domain: [3, 6, 8, 10], - }) - .shape('fill') - .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) - .style({ - opacity: 1, - }); - - scene.addLayer(layer); - addLayers(geoData, scene, layer); - } - return () => { - scene.destroy(); - }; - }, [geoData]); - - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/gallery/scale/useLine.ts b/legacy/dev-demos/src/gallery/scale/useLine.ts deleted file mode 100644 index 79a4631479a..00000000000 --- a/legacy/dev-demos/src/gallery/scale/useLine.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { useEffect, useState } from 'react'; -import { LineLayer, PolygonLayer } from '@antv/l7'; -interface IData { - county: any; - state: any; - unemploymentdata: any; -} -interface IData2 { - country: any; - turnout: any; - } -export function useData() { - const [data, setData] = useState(undefined); - useEffect(() => { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/5c4c7e02-a796-4c09-baba-629a99c909aa.json', - ).then((d) => d.json()), - // https://lab.isaaclin.cn/nCoV/api/area?latest=1 - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/738993d1-cc7e-4630-a318-80d6452fd125.csv', - ).then((d) => d.text()), - fetch( - ' https://gw.alipayobjects.com/os/bmw-prod/d13721bf-f0c2-4897-b6e6-633e6e022c09.json', - ).then((d) => d.json()), - ]).then(([county, unemployment, state]) => { - const unemploymentdata = unemployment - .split('\n') - .slice(0) - .map((line) => { - const item = line.split(','); - return { - id: item[0], - state: item[1], - county: item[2], - rate: item[3] * 1, - }; - }); - setData({ - county, - unemploymentdata, - state, - }); - }); - }, []); - - return { geoData: data }; -} - -export function useEuropeData() { - const [data, setData] = useState(undefined); - useEffect(() => { - Promise.all([ - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/01ff872b-99c6-4e41-bd3a-34c2134da597.json', - ).then((d) => d.json()), - // https://lab.isaaclin.cn/nCoV/api/area?latest=1 - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/64124f12-e086-4fe6-a900-bd57b410af69.csv', - ).then((d) => d.text()), - - ]).then(([country, turnoutData,]) => { - const turnout = turnoutData - .split('\n') - .slice(0) - .map((line) => { - const item = line.split(','); - return { - country: item[0], - turnout: item[1] *1, - }; - }); - setData({ - country, - turnout, - }); - }); - }, []); - - return { geoData: data }; - } - -export function addLayers(data: IData, scene, mainLayer) { - const linelayer = new PolygonLayer({}) - .source(data.county) - .size(0.5) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - const stateLayer = new PolygonLayer({}) - .source(data.state) - .size(1) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - - scene.addLayer(linelayer); - scene.addLayer(stateLayer); - addhightLayer(scene, mainLayer) - -} - -export function addEuropeLayers(data: IData2, scene, mainLayer) { - const linelayer = new PolygonLayer({}) - .source(data.country) - .size(0.5) - .shape('line') - .color('#fff') - .style({ - opacity: 1, - }); - - scene.addLayer(linelayer); - addhightLayer(scene, mainLayer) - } - - function addhightLayer(scene, mainLayer) { - const hightLayer = new LineLayer({ - zIndex: 4, // 设置显示层级 - name: 'hightlight', - }) - .source({ - type: 'FeatureCollection', - features: [], - }) - .shape('line') - .size(0.8) - .color('#000') - .style({ - opacity: 1, - }); - scene.addLayer(hightLayer); - mainLayer.on('click', (feature) => { - hightLayer.setData({ - type: 'FeatureCollection', - features: [feature.feature], - }); - }); - } \ No newline at end of file diff --git a/legacy/dev-demos/src/raster/demos/ndvi.tsx b/legacy/dev-demos/src/raster/demos/ndvi.tsx deleted file mode 100644 index c9455fbcbb6..00000000000 --- a/legacy/dev-demos/src/raster/demos/ndvi.tsx +++ /dev/null @@ -1,314 +0,0 @@ -import { Scene, PolygonLayer, RasterLayer, LineLayer, Popup, GaodeMap, project } from '@antv/l7'; - -import * as GeoTIFF from 'geotiff'; -import React, { useEffect, useState } from 'react'; -import eachSeries from 'async/eachSeries'; -import asyncMap from 'async/mapLimit'; -import { Card,Spin } from 'antd'; -import { Chart } from '@antv/g2'; - -const ndviList = [ - { - name: '20220301', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*sZpWQZK21NIAAAAAAAAAAAAADmJ7AQ/ndvi2022-03-01.glb', - }, - { - name: '20220401', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*zn4YQaNSxzEAAAAAAAAAAAAADmJ7AQ/ndvi2022-04-01.NDVI.glb', - }, - { - name: '20220501', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*OnDOQrRoonIAAAAAAAAAAAAADmJ7AQ/ndvi2022-05-01.NDVI.glb', - }, - { - name: '20220601', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*CvtvTqIg3VoAAAAAAAAAAAAADmJ7AQ/ndvi2022-06-01.NDVI.glb', - }, - { - name: '20220701', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*PBTRQ6lnpj8AAAAAAAAAAAAADmJ7AQ/ndvi2022-07-01.NDVI.glb', - }, - { - name: '20220801', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*j5eXQJGyr2wAAAAAAAAAAAAADmJ7AQ/ndvi2022-08-01.NDVI.glb', - }, { - name: '20220901', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*JeHQTIzN4_kAAAAAAAAAAAAADmJ7AQ/ndvi2022-10-01.NDVI.glb', - }, { - name: '20221001', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*JeHQTIzN4_kAAAAAAAAAAAAADmJ7AQ/ndvi2022-10-01.NDVI.glb', - }, - { - name: '20221101', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*mhucTbYhYuwAAAAAAAAAAAAADmJ7AQ/ndvi2022-11-01.NDVI.glb', - }, { - name: '20221201', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*ZvT-TYTxmf0AAAAAAAAAAAAADmJ7AQ/ndvi2022-12-01.NDVI.glb', - }, - { - name: '20230101', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*qvALQJZYRh4AAAAAAAAAAAAADmJ7AQ/ndvi2023-01-01.NDVI.glb', - }, { - name: '20230201', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*g363SYTH2PEAAAAAAAAAAAAADmJ7AQ/ndvi2023-02-01.NDVI.glb', - }, - { - name: '20230301', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*l_NQTqxtzawAAAAAAAAAAAAADmJ7AQ/ndvi2023-03-01.NDVI.glb', - }, { - name: '20230401', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*fc8uTqKrrFMAAAAAAAAAAAAADmJ7AQ/ndvi2023-06-01.NDVI.glb', - }, - { - name: '20230501', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*fc8uTqKrrFMAAAAAAAAAAAAADmJ7AQ/ndvi2023-06-01.NDVI.glb', - }, { - name: '20230601', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*fc8uTqKrrFMAAAAAAAAAAAAADmJ7AQ/ndvi2023-06-01.NDVI.glb', - }, - { - name: '20230701', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*Ezs6RKIHiVcAAAAAAAAAAAAADmJ7AQ/ndvi2023-07-01.NDVI.glb', - }, { - name: '20230801', - value: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*G3ALRLGesSgAAAAAAAAAAAAADmJ7AQ/ndvi2023-08-01.NDVI.glb', - } -] - -async function readTiffbyLngLat(tiffdata, lnglat) { - const [x ,y] = project([lnglat.lng,lnglat.lat]) - const offset = [x-tiffdata.info.originX,y-tiffdata.info.originY]; - const offsetPixel = [offset[0]/tiffdata.info.uWidth, offset[1]/tiffdata.info.uHeight]; - const pixelX = Math.floor( tiffdata.info.width * offsetPixel[0] ); - const pixelY = Math.floor( tiffdata.info.height * offsetPixel[1] ); - - const [ value ] = await tiffdata.image.readRasters( { - interleave: true, - window: [ pixelX, pixelY, pixelX + 1, pixelY + 1], - samples: [ 0 ] - } ); - - return value -} - -async function getTiffData(url) { - const response = await fetch( - url); - const arrayBuffer = await response.arrayBuffer(); - const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const [ originX, originY ] = image.getOrigin(); - const [ xSize, ySize ] = image.getResolution(); - const uWidth = xSize * width; - const uHeight = ySize * height; - const values = await image.readRasters(); - return { - data: values[0], - info:{ - width, - height, - originX, - originY, - xSize, - ySize, - uWidth, - uHeight, - }, - image, - - }; -} - -const googleUrl = 'https://www.google.com/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}' -const colors = ['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850']; - -export default () => { - const [timestr,setTimeStr]= useState('20220301') - const [loading,setLoding] =useState(true) - useEffect(() => { - - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - style: 'light', - center: [-96, 37.8], - zoom: 14 - }) - }); - - scene.on('loaded', async () => { - const chart = new Chart({ - container: 'container', - autoFit: true, - height: 200, - }) - const google = new RasterLayer({ - zIndex: 0, - }).source( - googleUrl, { - parser: { - type: 'rasterTile', - tileSize: 256, - updateStrategy: 'overlap', - }, - }, - ); - scene.addLayer(google); - - const data = await (await fetch( - 'https://mdn.alipayobjects.com/afts/file/A*Whj8Sp6p8QcAAAAAAAAAAAAADrd2AQ/2023-08-22.json' - )).json(); - - const color = ['rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)']; - const layer = new PolygonLayer({ - autoFit: true, - visible: false, - - }) - .source(data) - .color('#4575b4') - .shape('fill') - .style({ - opacity: 1 - }); - const layer2 = new LineLayer({ - zIndex: 2 - }) - .source(data) - .color('#fff') - .active(true) - .size(0.5) - .style({ - }); - scene.addLayer(layer); - scene.addLayer(layer2); - - const tiffdata = await getTiffData(ndviList[0].value); - const image = tiffdata.image; - - - const rlayer = new RasterLayer({ - maskLayers: [layer] - }); - rlayer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.info.width, - height: tiffdata.info.height, - extent: [-112.117293306503, 32.78212288135407, -111.77216057434428, 33.10568277278276] - } - }) - .style({ - clampLow: false, - clampHigh: false, - domain: [-1, 1], - nodataValue: 0, - rampColors: { - type: 'linear', - positions: [-0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0],// 数据需要换成 0-1 - colors: colors - - } - }); - scene.addLayer(rlayer); - - const results = await asyncMap(ndviList, 3, async (item, callback) => { - const tiffdata = await getTiffData(item.value); - callback(null, { - name: item.name, - ...tiffdata - }) - - }); - - setLoding(false) - - const renderNDVI = (results) => { - eachSeries(results, async (item, callback) => { - console.log(item) - rlayer.setData(item.data); - setTimeout(() => { - setTimeStr(item.name) - callback(); - }, 200) - - }, (err) => { - console.log('更新完成') - renderNDVI(results) - - }); - }; - - setTimeout(() => { - console.log('开始更新') - // renderNDVI(results) - - }, 5000); - - scene.on('click',async (e)=>{ - console.time('readTiffbyLngLat') - const list = await asyncMap(results, 3,async (item, callback) => { - const value = await readTiffbyLngLat(item, e.lnglat); - callback(null, { - time: item.name, - value - }) - }) - console.timeEnd('readTiffbyLngLat') - chart.data(list); - chart.scale('value', { - min: -0.5, - max: 1, - }); - chart.line().position('time*value').shape('smooth');; - chart - .point() - .position('time*value') - .color('value',colors) - .shape('circle'); - chart.render(); - }) - - - // scene.on('click',async ()=>{ - // const image = await await scene.exportPng("png") - // const anchor = document.createElement("a"); - // anchor.href = image; - // anchor.download = "image.png"; // Change the filename if needed - // anchor.style.display = "none"; - - // // Append the anchor to the body and click it - // document.body.appendChild(anchor); - // anchor.click(); - - // // Clean up - // document.body.removeChild(anchor); - // }) - - }); - - - }, []); - return ( - <> - -
- - 日期: {`${timestr.slice(0,4)}-${timestr.slice(4,6)}-${timestr.slice(6,8)}`} - - -
- -
- - ); -}; \ No newline at end of file diff --git a/legacy/dev-demos/src/raster/demos/rasterFile.tsx b/legacy/dev-demos/src/raster/demos/rasterFile.tsx deleted file mode 100644 index 3adc6040c8b..00000000000 --- a/legacy/dev-demos/src/raster/demos/rasterFile.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap, Map } from '@antv/l7-maps'; -import * as GeoTIFF from 'geotiff'; -import React, { useEffect } from 'react'; - -async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', - ); - const arrayBuffer = await response.arrayBuffer(); - return arrayBuffer; -} - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [121.268, 30.3628], - zoom: 3, - }), - }); - - scene.on('loaded', async () => { - const tiffdata = await getTiffData(); - const tiff = await GeoTIFF.fromArrayBuffer(tiffdata); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - - const layer = new RasterLayer(); - layer - .source(values[0], { - parser: { - type: 'raster', - width, - height, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], - }, - }) - .style({ - opacity: 1.0, - clampLow: false, - clampHigh: false, - domain: [100, 8000], - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/raster/image/demos/image.tsx b/legacy/dev-demos/src/raster/image/demos/image.tsx deleted file mode 100644 index c039c76bbbe..00000000000 --- a/legacy/dev-demos/src/raster/image/demos/image.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// @ts-ignore -import { ImageLayer,RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -export default () => { - useEffect(() => { - - const scene = new Scene({ - id: 'map', - renderer: 'device', - map: new GaodeMap({ - style: 'light', - center: [ 121.268, 30.3628 ], - zoom: 11 - }) - }); - - scene.on('loaded', () => { - // const url1 = - // 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - // const layer1 = new RasterLayer({ - // zIndex: 0, - // }).source(url1, { - // parser: { - // type: 'rasterTile', - // tileSize: 256, - // }, - // }); - // scene.addLayer(layer1); - const layer = new ImageLayer({}); - - layer.source( - 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', - { - parser: { - type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] - } - } - ); - scene.addLayer(layer); - // scene.startAnimate(); - - - }) - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/raster/image/image.md b/legacy/dev-demos/src/raster/image/image.md deleted file mode 100644 index d4848bb9384..00000000000 --- a/legacy/dev-demos/src/raster/image/image.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -group: - path: 'image-device' - title: 图片 ---- -### 图片图层 - - \ No newline at end of file diff --git a/legacy/dev-demos/src/raster/multiband/432.md b/legacy/dev-demos/src/raster/multiband/432.md deleted file mode 100644 index 12abc3c728f..00000000000 --- a/legacy/dev-demos/src/raster/multiband/432.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -group: - path: 'multiband' - title: 多波段 ---- - -### LandSat 自然真彩色 - - - - diff --git a/legacy/dev-demos/src/raster/multiband/cog.md b/legacy/dev-demos/src/raster/multiband/cog.md deleted file mode 100644 index b8566bd0080..00000000000 --- a/legacy/dev-demos/src/raster/multiband/cog.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -group: - path: 'multiband' - title: COG ---- -### COG Data - \ No newline at end of file diff --git a/legacy/dev-demos/src/raster/multiband/demos/cog.tsx b/legacy/dev-demos/src/raster/multiband/demos/cog.tsx deleted file mode 100644 index 6c890ed90da..00000000000 --- a/legacy/dev-demos/src/raster/multiband/demos/cog.tsx +++ /dev/null @@ -1,144 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import * as GeoTIFF from 'geotiff'; -import React, { useEffect } from 'react'; -const googleUrl = 'https://www.google.com/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}' - -async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', - ); - const arrayBuffer = await response.arrayBuffer(); - return arrayBuffer; -} -// x=340654&y=470897&z=20 - -function tileXYZToLatLng(x, y, z) { - const n = 2 ** z; - const lon_deg = x / n * 360.0 - 180.0; - const lat_rad = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))); - const lat_deg = lat_rad * 180.0 / Math.PI; - return [lon_deg, lat_deg]; - } - - async function readCogInBoundingBox(cogUrl:string, boundingBox:number[]) { - // const response = await fetch(cogUrl); - // const arrayBuffer = await response.arrayBuffer(); - console.log(GeoTIFF); - const tiff = await GeoTIFF.fromUrl(cogUrl); - // https://github.com/geotiffjs/cog-explorer/blob/master/src/actions/scenes/index.js#L136 - const image = await tiff.getImage() - const width = image.getTileWidth(); // Read the first image\ - const height = image.getTileHeight(); // Read the first image\ - const samples = image.getSamplesPerPixel(); - const bands = {}; - for (let i = 0; i < samples; ++i) { - bands[i] = cogUrl; - } - - let [red, green, blue] = [0,0,0]; - if (samples === 3 || typeof image.fileDirectory.PhotometricInterpretation !== 'undefined') { - red = 0; - green = 1; - blue = 2; - } - - const isRGB = ( - typeof image.fileDirectory.PhotometricInterpretation !== 'undefined' - && image.getSampleByteSize(0) === 1 - ); - console.log(isRGB); - - // Calculate the window based on the bounding box - const box = image.getBoundingBox(boundingBox); - - // const width = box.width(); - // const height = box.height(); - // const data = await image.readRasters({ box }); - - // You can now work with the 'data', 'width', and 'height' within the specified bounding box - // console.log(data); - // console.log(width, height); - } - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [-63.0484356,18.0251617], - zoom: 18, - }), - }); - - const googleMap = new RasterLayer({ - zIndex: 1, - }).source(googleUrl, { - parser: { - type: 'rasterTile', - tileSize: 256, - }, - }); - - scene.on('loaded', async () => { - const cogUrl = 'http://127.0.0.1:8080/7ad397c0-bba2-4f98-a08a-931ec3a6e943.tiff' - const [minx,maxY] = tileXYZToLatLng(340654,470897,20) - const [maxX,minY] = tileXYZToLatLng(340654 + 1,470897 + 1,20); - const boundingBox = [minx,minY,maxX,maxY]; - console.time('readCogInBoundingBox'); - await readCogInBoundingBox(cogUrl,boundingBox); - console.timeEnd('readCogInBoundingBox'); - - // Read the COG file within the specified bounding box - - scene.addLayer(googleMap); - const tiffdata = await getTiffData(); - const tiff = await GeoTIFF.fromArrayBuffer(tiffdata); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - - const layer = new RasterLayer(); - layer - .source(values[0], { - parser: { - type: 'raster', - width, - height, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], - }, - }) - .style({ - opacity: 1.0, - clampLow: false, - clampHigh: false, - domain: [100, 8000], - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#91EABC', - '#2EA9A1', - '#206C7C', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/raster/multiband/demos/rasterFile2.tsx b/legacy/dev-demos/src/raster/multiband/demos/rasterFile2.tsx deleted file mode 100644 index 479bbd29332..00000000000 --- a/legacy/dev-demos/src/raster/multiband/demos/rasterFile2.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -async function getTiffData(url: string) { - const response = await fetch(url); - const arrayBuffer = await response.arrayBuffer(); - return arrayBuffer; -} - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - center: [110, 30.3628], - zoom: 3, - }), - }); - - scene.on('loaded', async () => { - // - const url1 = - 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat'; - // 全国夜光图 - const url2 = - 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'; - const tiffdata = await getTiffData(url1); - const tiffdata2 = await getTiffData(url2); - // const rasterData = { data: tiffdata } - const rasterData = [{ data: tiffdata }, { data: tiffdata2 }]; - - const layer = new RasterLayer({}); - layer - .source(rasterData, { - parser: { - type: 'raster', - format: async (data, bands) => { - // console.log('bands', bands) - const tiff = await GeoTIFF.fromArrayBuffer(data); - // const imageCount = await tiff.getImageCount(); - - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { rasterData: values[0], width, height }; - }, - operation: ['+', ['+', ['band', 0], 90], ['*', ['band', 1], 50]], - min: 0, - max: 80, - extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], - }, - }) - .style({ - opacity: 0.8, - domain: [0, 4000], - rampColors: { - colors: [ - '#FF4818', - '#F7B74A', - '#FFF598', - '#333', - '#222', - '#000', - ].reverse(), - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/raster/multiband/demos/rasterNDVI.tsx b/legacy/dev-demos/src/raster/multiband/demos/rasterNDVI.tsx deleted file mode 100644 index 02effa73b04..00000000000 --- a/legacy/dev-demos/src/raster/multiband/demos/rasterNDVI.tsx +++ /dev/null @@ -1,113 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; -import * as GeoTIFF from 'geotiff'; - -async function getTiffData(url: string) { - const response = await fetch(url); - const arrayBuffer = await response.arrayBuffer(); - return arrayBuffer; -} - -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - map: new Map({ - center: [129.84688399962705, 46.66599711239799], - zoom: 12, - }), - }); - - scene.on('loaded', async () => { - const url1 = - 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XKLhRY67iPgAAAAAAAAAAAAADmJ7AQ/original'; - const tiffdata = await getTiffData(url1); - const url2 = - 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; - - const layer2 = new RasterLayer({ - zIndex: 1, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - wmtsOptions: { - layer: 'img', - tileMatrixset: 'w', - format: 'tiles', - }, - }, - }); - - const layer = new RasterLayer({ - zIndex: 10, - }); - - layer - .source( - [ - { - data: tiffdata, - bands: [0, 1, 2, 3], - }, - ], - { - parser: { - type: 'raster', - format: async (data, bands) => { - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return [ - { rasterData: values[0], width, height }, // R - { rasterData: values[3], width, height }, // NIR - ]; - }, - // blue green red nir - // NDVI = ABS(NIR - R) / (NIR + R) = 近红外与红光之差 / 近红外与红光之和 - operation: [ - '/', - ['-', ['band', 1], ['band', 0]], // R > NIR - ['+', ['band', 1], ['band', 0]], - ], - extent: [ - 129.80688399962705, 46.63599711239799, 129.88665024933522, - 46.695215826300725, - ], - }, - }, - ) - .style({ - domain: [-0.3, 0.5], - rampColors: { - colors: [ - '#ce4a2e', - '#f0a875', - '#fff8ba', - '#bddd8a', - '#5da73e', - '#235117', - ], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], - }, - }); - - scene.addLayer(layer2); - scene.addLayer(layer); - }); - }, []); - return ( -
- ); -}; diff --git a/legacy/dev-demos/src/raster/multiband/lc_08/432.tsx b/legacy/dev-demos/src/raster/multiband/lc_08/432.tsx deleted file mode 100644 index a2627796534..00000000000 --- a/legacy/dev-demos/src/raster/multiband/lc_08/432.tsx +++ /dev/null @@ -1,130 +0,0 @@ -// @ts-ignore -import { RasterLayer, Scene } from '@antv/l7'; -import { Select } from 'antd'; -import 'antd/es/select/style/index'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; -import * as GeoTIFF from 'geotiff'; -import React, { useEffect } from 'react'; - -async function getTiffData(url: string) { - const response = await fetch(url); - const arrayBuffer = await response.arrayBuffer(); - return arrayBuffer; -} - -// console.log(metersToLngLat([14504979.7235,5917159.8828993])); -// console.log(metersToLngLat([14571644.4264000,5981299.2233999])) -export default () => { - useEffect(() => { - const scene = new Scene({ - id: 'map', - renderer: 'device', - map: new Map({ - center: [130.5, 47], - zoom: 10.5, - }), - }); - - scene.on('loaded', async () => { - const url1 = - 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif'; - const tiffdata = await getTiffData(url1); - - const layer = new RasterLayer({ zIndex: 10 }); - layer - .source( - [ - { - data: tiffdata, - bands: [6, 5, 2].map((v) => v - 1), - }, - ], - { - parser: { - type: 'rasterRgb', - format: async (data, bands) => { - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image1 = await tiff.getImage(); - const value = await image1.readRasters(); - return bands.map((band) => { - return { - rasterData: value[band], - width: value.width, - height: value.height, - }; - }); - }, - operation: { - type: 'rgb', - }, - extent: [ - 130.39565357746957, 46.905730725742366, 130.73364094187343, - 47.10217234153133, - ], - }, - }, - ) - .style({ - opacity: 1, - }); - scene.addLayer(layer); - }); - }, []); - - return ( - <> -

-