🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
使用的模块:SimpleMarkerSymbol 官方示例:https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html svg在线绘制:https://c.runoob.com/more/svgeditor/ ![](https://box.kancloud.cn/e0d7ab787fca4c6dc76802f4941920ab_434x388.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; } } require([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/layers/GraphicsLayer', 'esri/symbols/SimpleMarkerSymbol', 'dojo/domReady!' ], function(Map, MapView, Graphic, GraphicsLayer, SimpleMarkerSymbol) { 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 pointGraphicArr = [], pointGraphic, coord; for(var i=0; i<50; i++) { coord = generateRandomCoord(); pointGraphic = new Graphic({ geometry: { type: "point", longitude: coord[0], latitude: coord[1] }, symbol: { type: "simple-marker", // style: "square", 预定义形状 path: "m95.22775,67.98851c16.07951,-41.09011 79.07956,0 0,52.83014c-79.07956,-52.83014 -16.07951,-93.92025 0,-52.83014z", color: "blue", size: "40px", outline: { color: [~~(Math.round(Math.random()*255)), ~~(Math.round(Math.random()*255)), ~~(Math.round(Math.random()*255))], width: 10 } } }); pointGraphicArr.push(pointGraphic); } graphicLayer.addMany(pointGraphicArr); }); ~~~