mirror of https://gitee.com/antv-l7/antv-l7
145 lines
4.9 KiB
HTML
145 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta name="geometry" content="diagram">
|
|
<link rel="stylesheet" href="./assets/common.css">
|
|
|
|
<title>extrude Polygon</title>
|
|
<style>
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
|
|
<div id="map"></div>
|
|
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
<script src="./assets/dat.gui.min.js"></script>
|
|
<script src="../build/L7.js"></script>
|
|
<script>
|
|
var mapinstance = new AMap.Map('map',{
|
|
center: [121.576757,31.279873 ],
|
|
viewMode: '3D',
|
|
pitch: 0,
|
|
zoom: 12,
|
|
maxZoom:20,
|
|
minZoom:0,
|
|
});
|
|
|
|
const scene = new L7.Scene({
|
|
map:mapinstance,
|
|
//mapStyle: 'dark', // 样式URL
|
|
});
|
|
const testdata = [
|
|
{
|
|
"areaGeometry": "121.576757,31.279873;121.576904,31.279129;121.577422,31.279135;121.577425,31.279401;121.577604,31.279486;121.577873,31.279668;121.577854,31.280147;121.577873,31.280517;121.577713,31.280483;121.577604,31.280365;121.577051,31.279928;121.576757,31.279873;121.576757,31.279873"
|
|
},
|
|
{
|
|
"areaGeometry": "121.588443,31.260267;121.587893,31.260332;121.587385,31.260387;121.586751,31.26045;121.586099,31.260505;121.585549,31.260584;121.585499,31.260641;121.585475,31.260702;121.585469,31.26076;121.585473,31.260797;121.585721,31.261172;121.585957,31.261529;121.58623,31.261987;121.586426,31.26235;121.586646,31.262795;121.586791,31.263137;121.586924,31.263478;121.587054,31.263788;121.587256,31.264224;121.587319,31.264276;121.587421,31.264337;121.587503,31.264368;121.587542,31.264373;121.588431,31.264357;121.589115,31.264355;121.589253,31.264357;121.589339,31.264331;121.589409,31.264288;121.589547,31.264049;121.589752,31.263696;121.589973,31.263313;121.590156,31.262965;121.59029,31.262682;121.590285,31.262557;121.590257,31.262498;121.5902,31.262459;121.589712,31.262265;121.589543,31.262197;121.5895,31.262125;121.589484,31.262072;121.589499,31.262005;121.589638,31.261714;121.589709,31.261579;121.589911,31.261242;121.590037,31.261031;121.590413,31.261176;121.591041,31.26141;121.591095,31.261317;121.59128,31.26097;121.59132,31.260872;121.591495,31.26061;121.591573,31.260552;121.591628,31.26051;121.591846,31.260295;121.592266,31.259879;121.592656,31.259516;121.592781,31.259401;121.5928,31.259343;121.592801,31.259301;121.592789,31.259261;121.592718,31.259196;121.592689,31.259156;121.592266,31.25884;121.591889,31.258548;121.591681,31.258396;121.591423,31.258196;121.590993,31.257889;121.59091,31.257892;121.590849,31.257903;121.590782,31.257971;121.590504,31.25835;121.590177,31.258758;121.589896,31.259137;121.589722,31.259395;121.589449,31.259807;121.58932,31.260028;121.589223,31.26024;121.588443,31.260267;121.588443,31.260267"
|
|
}
|
|
]
|
|
const data2 = {
|
|
"type": "FeatureCollection",
|
|
"features": [
|
|
{
|
|
"type": "Feature",
|
|
"properties": {},
|
|
"geometry": {
|
|
"type": "Polygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
118.48068237304686,
|
|
32.120964197033615
|
|
],
|
|
[
|
|
118.49578857421874,
|
|
32.037184191435145
|
|
],
|
|
[
|
|
118.57131958007811,
|
|
32.061627957476404
|
|
],
|
|
[
|
|
118.57131958007811,
|
|
32.13492006367728
|
|
],
|
|
[
|
|
118.48068237304686,
|
|
32.120964197033615
|
|
]
|
|
]
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "Feature",
|
|
"properties": {},
|
|
"geometry": {
|
|
"type": "Polygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
118.71414184570311,
|
|
31.966143862120095
|
|
],
|
|
[
|
|
118.67156982421875,
|
|
31.811062019751912
|
|
],
|
|
[
|
|
118.77044677734375,
|
|
31.75502854729287
|
|
],
|
|
[
|
|
118.85696411132814,
|
|
31.927689274849715
|
|
],
|
|
[
|
|
118.71414184570311,
|
|
31.966143862120095
|
|
]
|
|
]
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
scene.on('loaded', () => {
|
|
|
|
const data = testdata.map(item=>{
|
|
const coordStr = item.areaGeometry;
|
|
coordStr.split(';');
|
|
const coordinates = coordStr.split(';').map(lnglat=>{
|
|
return lnglat.split(',');
|
|
})
|
|
item.areaGeometry = [coordinates];
|
|
return item;
|
|
})
|
|
citylayer = scene.PolygonLayer()
|
|
.source(data,{
|
|
parser:{
|
|
type:'json',
|
|
coordinates:'areaGeometry'
|
|
}
|
|
})
|
|
.color('red')
|
|
.shape('extrude')
|
|
|
|
.size(1000)
|
|
.active(true)
|
|
.style({
|
|
opacity: 1.0
|
|
})
|
|
.render();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|