arcgis api for js弹出“下一个”“上一个”popupTemplate

功能需求：在道路上有一连串的point,每一个point点击时会弹出一个popup，展示这个点对应的一张照片。基本实现就是给每个point创建时，指定popupTemplate的内容。这样点击每个point自然就会弹出对应的照片。现在增加需求，每个popupTemplate内容上增加“上一张”“下一张”按钮，点击按钮自动关闭现在的popup，同时打开邻近的point的popup.

1.创建基本的Map  View和Layer

2.给Layer添加points

// 创建point
const point = {
    type: 'point',
    x: photoList[i].shape[0],
    y: photoList[i].shape[1]
}
// 创建symbol
const symbol = {
    type: 'simple-marker',
    color: '#B8860B',
    width: 1,
    size: '4px',
    outline: {
        color: '#B8890B',
        width: 1
    }
}
// 创建action
const nextBtnAction = {
    title: '下一张',
    id: 'next_img_btn',
    className: 'esri-icon-right-triangle-arrow'
}
const preBtnAction = {
    title: '上一张',
    id: 'pre_img_btn',
    className: 'esri-icon-left-triangle-arrow'
}
// 创建popupTemplate
const popupTemplate = {
    title: '{Name}', // 这里的模板语法取值自attributes
    content: '{Description}',
    actions: [preBtnAction, nextBtnAction]
}
// 定义属性
const attributes = {
    Name: '<span style="color:#fff">photo</span>',
    Description: '<img src=' + photoList[i].imageUrl + ' alt="link photo" />'，
    index: i // 这个属性自定义的，主要用于方便寻找上下临近点
}
// 创建Graphic
const pointGraphic = new Graphic({
    gemotry: point,
    symbol: symbol,
    attributes: attributes,
    popupTemplate: popupTemplate
}
// 加入图层
layer.add(pointGraphic)

/**
注：photoList是从服务器请求到的数据，表示连续的一系列点
*/

3.监听popup中上一张和下一张的点击事件

view.popup.on('trigger-action', event => {
    if(event.action.id === 'next_img_btn'){
        const curIndex = view.popup.selectedFeature.attributes.index
        const nextPoint = view.popup.selecedFeature.layer.graphics.items[curIndex + 1]
        // 高亮下一个point
        view.whenlayerView(layer).then(layerView => {
            view.popup.close() // 关闭当前popup
            if(hightPoint){
                // 如果有高亮的point,先关闭
                hightPoint.remove()
            }
            // 高亮下一个point
            var hightPoint = layerview.highlight(nextPoint)
            // 在下一个point打开popup
            view.popup.open({
                location: {
                    x: nextPoint.geometry.x,
                    y: nextPoint.geometry.y
                },
                updateLocationEnabled: true,
                features: [nextPoint]
            })
        })
    } else if(event.action.id === 'pre_img_btn'){
        //同上 可以封装为一个函数
    }
}