- 首页
- 其他开发
- 在Next JS中在arcgis地图上的多个坐标上显示信息窗口
在Next JS中在arcgis地图上的多个坐标上显示信息窗口
[英] Display Info Window on the multiple coordinates on the arcgis map in Next JS
本文介绍了在Next JS中在arcgis地图上的多个坐标上显示信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的下一个 JS 代码，它显示了一个简单的 ArcGIS 地图，其中包含特定坐标上的点或标记.
谁能告诉我如何在地图上显示点的弹出/信息窗口?例如我点击任何一点，它会在上面打开一个相应的弹出窗口.
从'@/components/NavBar'导入NavBar从 'axios' 导入 axios；import { useRef, useEffect, useState } from 'react';从'esri-loader'导入{loadModules}；导出默认函数 Home({...props}) {const [state, setState] = useState('');const MapElement = useRef(null)常量选项 = {url: 'https://js.arcgis.com/4.6/',css: 真};useEffect(() => {var VehicleData = props.data无功地图，点符号；加载模块([esri/views/MapView"，esri/WebMap"，esri/图形"，esri/几何/点"，esri/PopupTemplate"，esri/layers/FeatureLayer"、dojo/domReady!"],options).then(([ MapView, WebMap, Graphic, Point, PopupTemplate, FeatureLayer]) => {const webmap = new WebMap({底图:灰度矢量"})var map = new MapView({地图:网络地图，中心:[-6.357768833333333, 53.415487166666665],缩放:6，容器:MapElement.current})map.popup.autoOpenEnabled = false;for(var i=0, i_length=vehicleData.length; i{如果(！！地图){地图销毁()地图=空}}})返回 (<div id="home-container"><导航栏/><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>
)}导出异步函数 getServerSideProps(context) {let response = await axios(process.env.BASE_URL +'/devices/all',{标题:{‘授权’:‘承载’+ process.env.TOKEN}})让数据 = 等待 response.data返回 {道具 : {数据:数据}}}
我需要在地图上显示对应于每个标记多个圆圈的弹出窗口或信息窗口.在上面的代码中，API调用是通过getServerSideProps完成的，数据作为对象数组通过props传递给组件.
我可以在地图上显示多个圆圈，但不知道如何显示每个标记对应的信息窗口?
解决方案
我认为在您的代码中，变量 i 存在上下文问题.当弹出窗口显示 i 的值时，总是 vehicleData.length.
因此您可以使用 let 而不是 var 来解决上下文问题，但我会建议您使用另一种方法.
在循环外声明弹出模板template，并使用我们将在下一步中添加的两个新属性.
var template = new PopupTemplate({标题:{公司}"，内容:{描述}"outFields:[*"]，字段信息:[{ 字段名称:公司"},{字段名称:描述"}]});
把要显示的信息加到图形的属性上，像这样，
var graphics_symbol = new Graphic({几何:point_symbol，象征: {类型:简单标记"，风格:圆圈"，颜色:橙色"，尺寸:18px"，大纲: {颜色: [150, 200, 255],宽度:5}},popupTemplate:模板，属性:{//<- 这里公司: VehicleData[i].company,描述:车辆数据[i].描述}});
最后让点击事件搜索图形，像这样，
map.on("click", function(event) {地图.popup.open({位置:event.mapPoint，fetchFeatures: 真});});
顺便说一句，我只保留最后一步，因为您故意更改默认值，我在这里没有看到原因，但您必须有一个.
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
}
}
}
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 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.
So you can solve the context problem using let instead of var, but I will suggest you another approach.
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屋！
查看全文
