下面是我的Next.js代码,它显示了一个简单的ArcGISMap,上面有特定坐标上的点或标记。
任何人都可以请让我知道,我如何显示弹出/信息窗口的点在Map上?例如,我点击任何点,它会打开一个相应的弹出窗口。
import NavBar from '@/components/NavBar'
import axios from 'axios';
import { useRef, useEffect, useState } from 'react';
import { loadModules } from 'esri-loader';
export default function Home({...props}) {
const [state, setState] = useState('');
const MapElement = useRef(null)
const options = {
url: 'https://js.arcgis.com/4.6/',
css: true
};
useEffect(() => {
var vehicleData = props.data
var map, point_symbol;
loadModules([
"esri/views/MapView",
"esri/WebMap",
"esri/Graphic",
"esri/geometry/Point",
"esri/PopupTemplate",
"esri/layers/FeatureLayer","dojo/domReady!"
],options).then(([ MapView, WebMap, Graphic, Point, PopupTemplate, FeatureLayer]) => {
const webmap = new WebMap({
basemap: "gray-vector"
})
var map = new MapView({
map: webmap,
center:[-6.357768833333333, 53.415487166666665],
zoom:6,
container: MapElement.current
})
map.popup.autoOpenEnabled = false;
for(var i=0, i_length=vehicleData.length; i<i_length; i++){
point_symbol = new Point({
longitude:vehicleData[i].longitude,
latitude: vehicleData[i].latitude,
spatialReference: { wkid: 3857 }
})
var template = new PopupTemplate({
title: vehicleData[i].company,
content: vehicleData[i].description
});
var graphic_symbol = new Graphic({
geometry: point_symbol,
symbol: {
type: "simple-marker",
style: "circle",
color: "orange",
size: "18px",
outline: {
color: [150, 200, 255],
width: 5
}
},
popupTemplate: template
});
map.graphics.add(graphic_symbol)
}
map.on("click", function(event) {
map.popup.open({
location: event.mapPoint,
features: [graphic_symbol]
});
});
// map.on("click", function(event) {
// console.log(vehicleData)
// map.popup.open({
// location: event.mapPoint, // location of the click on the view
// title: "You clicked here", // title displayed in the popup
// content: "Your description here" // content displayed in the popup
// });
// });
})
return () => {
if(!!map) {
map.destroy()
map=null
}
}
})
return (
<div id="home-container">
<NavBar />
<div className="app-wrapper" >
<div className="app-content">
<div className="no-padding">
<div className="row gy-4">
<div className="col-12">
<div style={{height:1000, width:1400}} ref={MapElement}></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export async function getServerSideProps(context) {
let response = await axios(process.env.BASE_URL +'/devices/all',{
headers : {
'Authorization' : 'Bearer ' + process.env.TOKEN
}
})
let data = await response.data
return {
props : {
data: data
}
}
}
我需要显示弹出窗口或信息窗口对应的每个标记多个圆圈在Map上。在上述代码中,API调用是由getServerSideProps
完成的,数据作为一个数组的对象是通过 prop 传递给组件。
我可以在Map上显示多个圆圈,但不知道如何显示每个标记对应的信息窗口?
2条答案
按热度按时间vmdwslir1#
我认为你的代码中变量
i
有上下文问题,当弹出窗口显示i
的值时,总是vehicleData.length
。因此,您可以使用
let
而不是var
来解决上下文问题,但我将建议您使用另一种方法。在循环外部声明
template
(弹出模板),并使用我们将在下一步添加的两个新属性。把你想要显示的信息添加到图形的属性中,就像这样,
最后,让单击事件搜索图形,如下所示,
顺便说一句,我只是保持最后一步,因为你改变默认的目的,我没有看到这里的原因,但你必须有一个。
i2byvkas2#
@cabesuon是正确的.你可以删除on click事件,也可以删除
map.popup.autoOpenEnabled = false;
.在那之后点击图形将默认打开弹出信息.对于表格格式,您可能希望使用内容函数