mirror of https://gitee.com/antv-l7/antv-l7
300 lines
6.3 KiB
TypeScript
300 lines
6.3 KiB
TypeScript
//
|
|
|
|
// @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 (
|
|
<div
|
|
id="map"
|
|
style={{
|
|
height: '500px',
|
|
position: 'relative',
|
|
}}
|
|
/>
|
|
);
|
|
};
|