功能需求:在道路上有一连串的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'){
//同上 可以封装为一个函数
}
}