🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、通过graphic的增删模拟(2000+数据就嗝屁了) ![](https://box.kancloud.cn/17f1ac46884cde05b46218fe94aca1fc_369x265.jpg) ~~~ // 随机生成坐标 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; } } // 点 var pointGraphicArr = [], pointGraphic, coord; function createMultiPoint(isRemove) { if(pointGraphicArr.length) { mapView.popup.close(); // 关闭弹层 mapView.graphics.removeMany(pointGraphicArr); // 删除graphics点 pointGraphicArr = []; // 清空数组 } for(var i=0; i<50; i++) { coord = generateRandomCoord(); if(!pointGraphicArr.length) { pointGraphic = new Graphic({ geometry: { type: "point", longitude: coord[0], latitude: coord[1] }, symbol: { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } }, popupTemplate: { title: "自定义弹层标题", content: '<div style="padding: 20px;border: 1px solid #333;font-size: 14px;color: #f00;">Hello ArcGis地图.</div>' } }); } else { pointGraphic = pointGraphicArr[0].clone(); // 克隆对象 pointGraphic.geometry.longitude = coord[0]; pointGraphic.geometry.latitude = coord[1]; } pointGraphicArr.push(pointGraphic); } mapView.graphics.addMany(pointGraphicArr); } mapView.when(function() { createMultiPoint(); setInterval(function() { // 定时处理 createMultiPoint(); }, 3000); }); ~~~ ## 二、multipoint方式(上万点数据) ~~~ var coordsArr = []; for(var i=0; i<11550; i++) { coordsArr.push(generateRandomCoord()); } var pointGraphic = new Graphic({ geometry: { type: 'multipoint', points: coordsArr }, symbol: { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } } }); mapView.graphics.add(pointGraphic); mapView.when(function() { var startTime = Date.now(); var timer = setInterval(function() { // 定时器 if(Date.now()-startTime < 2210000) { coordsArr = []; for(var i=0; i<11150; i++) { coordsArr.push(generateRandomCoord()); } // graphicLayer.graphics.items.forEach(function(v) { // v.geometry = { // type: "multipoint", // points: coordsArr // } // }); pointGraphic.geometry = { type: "multipoint", points: coordsArr } } else { clearInterval(timer); } }, 1000); }); ~~~