arcgis html图像标记,图片标记

使用的模块：PictureMarkerSymbol

官方示例：https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html#properties-summary


~~~

// 随机生成坐标

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/PictureMarkerSymbol',

'dojo/domReady!'

], function(Map, MapView, Graphic, GraphicsLayer, PictureMarkerSymbol) {

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<30; i++) {

coord = generateRandomCoord();

pointGraphic = new Graphic({

geometry: {

type: "point",

longitude: coord[0],

latitude: coord[1]

},

symbol: {

type: "picture-marker",

url: 'https://developers.arcgis.com/favicon.ico',

angle: Math.round(Math.random()*360),

width: '24px',

height: '24px'

}

});

pointGraphicArr.push(pointGraphic);

}

graphicLayer.addMany(pointGraphicArr);

});

~~~