关键代码:
/**
* 点位信息封装成 GraphicsLayer
* @param datas 源数据
* @param o 配置项
* @return {GraphicsLayer}
*/
export function loadPointsLayer(datas, o) {
let defOptions = {
longitude: 'jd', // 经度
latitude: 'wd', // 维度
symbol: require('@/assets/image/map/da.png'), // 要渲染成什么样的
symbolWidth: '40px',
symbolHeight: '40px',
fields: [], // 每个要素要包含的数据, 对象的key值, 与datas中每个对象属性名对应
typeSymbol: null
};
let options = Object.assign(defOptions, o);
return loadModules(["esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/Graphic", "esri/layers/GraphicsLayer"], {css: true})
.then(([Point, PictureMarkerSymbol, Graphic, GraphicsLayer]) => {
let graphics = [];
datas.forEach(item => {
graphics.push(new Graphic({
geometry: new Point({
type: 'point',
longitude: item[options.longitude],
latitude: item[options.latitude],
}),
attributes: (() => {
let o = {};
options.fields && options.fields.push && options.fields.forEach(f => {
o[f] = item[f];
});
return o;
})(),
symbol: PictureMarkerSymbol({
style: "picture-marker",
url: (()=>{
if (options.typeSymbol) {
let s = options.typeSymbol.items[item[options.typeSymbol.code]];
return s ? s : options.symbol;
}
return options.symbol;
})(),
width: options.symbolWidth,
height: options.symbolHeight,
})
}));
});
return GraphicsLayer({
graphics: graphics
});
})
}
调用示例:
每个对象都是相同的图片:
loadPointsLayer(data, {
fields: ['id', 'sid'],
symbol: 'url'
}).then(layer => {
map.add(layer)
})
根据设置的参数不同生成的图片:
loadPointsLayer(data, {
fields: ['id', 'sid'],
symbol: 'url',
typeSymbol: {
code: 'type', // data中必须有这个字段
items: {
'type1': require('@/assets/images/xxx.png'),
'type2': require('@/assets/images/xxx.png'),
//...等等
}
}
}).then(layer => {
map.add(layer)
})