在 Next JS 中的 arcgis 地图上的多个坐标上显示信息窗口 [英] Display Info Window on the multiple coordinates on the arcgis map in Next JS
问题描述
下面是我的下一个 JS 代码，它显示了一个简单的 ArcGIS 地图，其中包含特定坐标上的点或标记.
Here below is my next JS Code which is showing a simple ArcGIS map with the points or markers on the specific coordinates.
谁能告诉我如何显示地图上点的弹出/信息窗口?例如我点击任意一点，它会在上面打开一个相应的弹出窗口.
Can anyone please let me know that how can I display the popup / Info window for the points on the map? e.g. I click on any point and it will open a corresponding popup on it.
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
}
}
}
我需要在地图上显示对应于每个标记多个圆圈的弹出窗口或信息窗口.在上面的代码中，API调用由getServerSideProps完成，数据作为对象数组通过props传递给组件.
I need to display pop-up or info window corresponding to each markup multiple circles on the map. In the above code, API call is done by getServerSideProps, and data as an array of objects is passed to the component using props.
我可以在地图上显示多个圆圈，但不知道如何显示每个标记对应的信息窗口?
I am able to display multiple circles on the map but don't know how to display info window corresponding to each marker?
推荐答案
我认为在您的代码中，变量 i 存在上下文问题.当弹出窗口显示 i 的值时，总是会是 vehicleData.length.
I think that in your code you are having a context problem with the variable i. When the popup shows the value of i always gonna be vehicleData.length.
所以你可以使用 let 而不是 var 来解决上下文问题，但我会建议你另一种方法.
So you can solve the context problem using let instead of var, but I will suggest you another approach.
在循环之外声明弹出模板template，并使用我们将在下一步中添加的两个新属性.
Declare template, the popup template, outside the loop, and use two new properties that we will add in the next step.
var template = new PopupTemplate({
title: "{company}",
content: "{description}"
outFields: ["*"],
fieldInfos: [
{ fieldName: "company" },
{ fieldName: "description" }
]
});
把你要显示的信息，添加到图形的属性中，像这样，
Add the information you want to display, to the attributes of the graphics, like this,
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,
attributes: { // <- here
company: vehicleData[i].company,
description: vehicleData[i].description
}
});
最后让点击事件搜索图形，像这样，
Finally, let the click event search for the graphic, like this,
map.on("click", function(event) {
map.popup.open({
location: event.mapPoint,
fetchFeatures: true
});
});
顺便说一句，我只保留最后一步，因为您故意更改默认值，我在这里没有看到原因，但您必须有一个.
BTW, I just keep the last step because you change default on purpose, I am not seeing the reason here but you must have one.
这篇关于在 Next JS 中的 arcgis 地图上的多个坐标上显示信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
