🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、千加数据 ![](https://box.kancloud.cn/1ec14cca608f01c39a8d8ae74f22ce4f_546x558.jpg =300x300) ~~~ // 随机生成坐标 function generateRandomCoord(type) { switch(type) { case 'w': // 世界 return [Math.random()*180-Math.random()*180, Math.random()*90-Math.random()*90]; break; case 's': // 特定范围 return [103+Math.random()*(108-103), 22+Math.random()*(25-22)]; default: // 中国 return [74+Math.random()*(135-74), 1+Math.random()*(53-1)]; break; } } require([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/layers/GraphicsLayer', 'dojo/domReady!' ], function(Map, MapView, Graphic, GraphicsLayer) { var map = new Map({ basemap: 'streets' // dark-gray }); var mapView = new MapView({ map: map, container: 'js_map', center: [102.9331224074, 25.1049040686], zoom: 3, // rotation: -127.7 }); // graphicLayer var graphicLayer = new GraphicsLayer(); map.layers.add(graphicLayer); var coordsArr = []; for(var i=0; i<1850; i++) { coordsArr.push(generateRandomCoord()); } var polylineGraphicArr = []; coordsArr.forEach(function(v, i) { if(i) { polylineGraphicArr.push(new Graphic({ geometry: { type: "polyline", paths: [coordsArr[i-1] , v] }, symbol: { type: "simple-line", color: [~~(Math.random()*255), ~~(Math.random()*255), ~~(Math.random()*255)], width: 1 } })); } }); mapView.when(function() { graphicLayer.addMany(polylineGraphicArr); }); }); ~~~ ## 二、动态追加 ![](https://box.kancloud.cn/76f310dc9490f980f21bf62410df6a23_360x304.gif) ~~~ // graphicLayer var graphicLayer = new GraphicsLayer(); map.layers.add(graphicLayer); var coordsArr = []; for(var i=0; i<12; i++) { coordsArr.push(generateRandomCoord()); } var polylineGraphicArr = []; coordsArr.forEach(function(v, i) { if(i) { polylineGraphicArr.push(new Graphic({ geometry: { type: "polyline", paths: [coordsArr[i-1] , v] }, symbol: { type: "simple-line", color: [~~(Math.random()*255), ~~(Math.random()*255), ~~(Math.random()*255)], width: 1 } })); } }); mapView.when(function() { graphicLayer.addMany(polylineGraphicArr); // 动态追加 setInterval(function() { var lastCoord = coordsArr.slice(-1)[0], coord = generateRandomCoord(); var polylineGraphic = new Graphic({ geometry: { type: "polyline", paths: [lastCoord , coord] }, symbol: { type: "simple-line", color: [~~(Math.random()*255), ~~(Math.random()*255), ~~(Math.random()*255)], width: 4 } }); polylineGraphicArr.push(polylineGraphic); coordsArr.push(coord); graphicLayer.add(polylineGraphic); }, 1000); }); ~~~