antv-l7/demos/line.html

86 lines
8.1 KiB
HTML
Raw Normal View History

<!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>city demo</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 buildLayer =null;
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [116.428925,39.903969 ],
pitch: 0,
zoom: 15,
minZoom: 5,
maxZoom: 18
});
scene.on('loaded', () => {
const line = {"type":"FeatureCollection",
"features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[116.379883,39.865601,0],[116.379997,39.865498,15],[116.380104,39.865364,47],[116.380203,39.865246,95],[116.380348,39.865032,170],[116.380478,39.864765,277],[116.380478,39.864765,384],[116.380745,39.864727,514],[116.381218,39.864799,685],[116.381439,39.864841,875],[116.381798,39.864906,1097],[116.382034,39.864979,1341],[116.382309,39.865093,1612],[116.383095,39.865559,1968],[116.383575,39.865742,2370],[116.383896,39.865822,2801],[116.384232,39.865871,3261],[116.384537,39.865883,3747],[116.384903,39.865868,4264],[116.385132,39.865841,4801],[116.385422,39.865761,5364],[116.385582,39.865696,5942],[116.385582,39.865696,6520],[116.385788,39.865623,7117],[116.386055,39.865517,7740],[116.38694,39.86525,8444],[116.387482,39.865128,9196],[116.387672,39.865204,9966],[116.387741,39.865391,10758],[116.387772,39.865475,11560],[116.387901,39.866009,12422],[116.387955,39.866352,13322],[116.38797,39.866581,14248],[116.38797,39.867085,15230],[116.38797,39.867371,16244],[116.387947,39.867935,17321],[116.387939,39.868587,18471],[116.387932,39.869381,19709],[116.387932,39.870155,21033],[116.387901,39.870506,22396],[116.387901,39.870506,23759],[116.388077,39.870682,25147],[116.388222,39.870762,26550],[116.388275,39.870773,27958],[116.388542,39.87077,29389],[116.389153,39.870762,30872],[116.390015,39.870762,32429],[116.390114,39.870777,33995],[116.39019,39.870804,35568],[116.390259,39.870827,37147],[116.390755,39.87112,38779],[116.390961,39.871201,40431],[116.392235,39.871254,42192],[116.392296,39.871258,43958],[116.394577,39.871346,45919],[116.395042,39.871368,47920],[116.395279,39.871368,49941],[116.396156,39.871372,52037],[116.396156,39.871372,54133],[116.397476,39.871574,56344],[116.398438,39.871616,58637],[116.399734,39.871685,61041],[116.400322,39.871693,63495],[116.401268,39.871746,66030],[116.402931,39.871826,68707],[116.403282,39.871861,71414],[116.404373,39.871948,74215],[116.405106,39.87196,77079],[116.406166,39.871979,80034],[116.40712,39.872005,83071],[116.40934,39.872074,86298],[116.411125,39.872124,89678],[116.411407,39.872135,93082],[116.413887,39.872189,96698],[116.414276,39.8722,100347],[116.414642,39.872192,104027],[116.414818,39.872177,107722],[116.415344,39.872074,111463],[116.415779,39.871899,115246],[116.41687,39.871395,119138],[116.417328,39.871201,123075],[116.417603,39.871124,127037],[116.417801,39.87109,131016],[116.418159,39.871048,135026],[116.418488,39.87104,139064],[116.419136,39.871075,143157],[116.419708,39.871113,147299],[116.419891,39.87112,151457],[116.420082,39.87114,155631],[116.420425,39.871159,159834],[116.420761,39.871178,164066],[116.420853,39.871185,168306],[116.420944,39.871193,172554],[116.421066,39.871201,176812],[116.421219,39.871201,181083],[116.421257,39.871208,185357],[116.421883,39.871246,189685],[116.421883,39.871246,194013],[116.42202,39.871201,198354],[116.422081,39.87117,202701],[116.422127,39.871124,207054],[116.422195,39.871033,211419],[116.422226,39.870586,215834],[116.422211,39.870533,220255],[116.422188,39.870476,224683],[116.422142,39.87043,229117],[116.422081,39.87038,233559],[116.421997,39.87035,238009],[116.421867,39.87035,242470],[116.421783,39.870361,246938],[116.421715,39.870388,251413],[116.42157,39.870453,255902],[116.421501,39.870502,260399],[116.421501,39.870502,264896],[116.421486,39.870792,269425],[116.421478,39.870861,273962],[116.421455,39.871437,278563],[116.421425,39.872169,283246],[116.421379,39.873272,288052],[116.421326,39.874275,292970],[116.42131,39.875,297969],[116.421295,39.87532,303004],[116.421272,39.875843,308097],[116.421219,39.876854,313303],[116.42112,39.878708,318716],[116.42112,39.878853,324145],[116.421051,39.880367,329743],[116.421028,39.880692,335377],[116.421021,39.880863,341030],[116.421013,39.880928,346690],[116.421005,39.881634,352429],[116.420952,39.882782,358296],[116.420944,39.88303,364191],[116.420914,39.883743,370165],[116.420906,39.883854,376151],[116.420898,39.883934,382146],[116.42083,39.884594,388215],[116.420784,39.884773,394304],[116.420723
const linelayer = scene.LineLayer({
zIndex: 2
})
.shape('line')
.size([2,0])
.source(line)
.color('#ff893a')
.animate({
enable:true,
interval:1,
duration:2,
trailLength:0.1,
repeat:10,
})
.render();
linelayer.on('animateEnd',()=>{
console.log('动画结束');
})
$.get('./data/yunqi.geojson', data => {
citylayer = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('fill')
.active({fill:'red'})
.size('floor',[10,2000])
.color('rgba(242,246,250,0.96)')
.render();
})
$.get('./data/test.json', data => {
citylayer2 = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('fill')
.active({fill:'red'})
// .size('floor',[10,2000])
.color('red')
.render();
})
})
</script>
</body>
</html>