如何使用ArcGIS JS实现弹出窗口功能？

content（可以是 HTML 字符串）

mediaInfos：媒体信息数组，如图片或视频

actions：操作按钮数组

const symbol = { type: "simple-marker", color: "orange", size: "10px", outline: { color: "black", width: 1 } };
view.graphics.add({
    geometry: { type: "point", longitude: -118.80500, latitude: 34.02700 },
    symbol: symbol,
    popupTemplate: new PopupTemplate({
        title: "Custom Popup",
        content: "<strong>This is a custom HTML content</strong><br/>You can include <a href='https://www.example.com' target='_blank'>links</a> too!",
        mediaInfos: [{
            type: "iframe",
            value: {
                url: "https://www.youtube.com/embed/dQw4w9WgXcQ"
            }
        }],
        actions: [{
            title: "Learn More",
            url: "https://www.example.com",
            target: "_blank"
        }]
    })
});

4. 使用图层的 PopupTemplate

如果图层本身已经定义了PopupTemplate，则可以直接使用，使用FeatureLayer 加载一个包含PopupTemplate 的服务。

const layer = new FeatureLayer({
    url: "https://services.arcgis.com/P3ePLMY469wqcebx.arcgis.com/arcgis/rest/services/SampleWorldCities/FeatureServer/0",
    popupTemplate: { // This will override the default popup template if provided in the service
        title: "City Name",
        content: "{POP_CNTR} people live here."
    }
});

5. 动态更新 Popup 内容

可以在运行时动态更新Popup 的内容，通过监听click 事件来更新Popup。

view.when(function() {
    view.on("click", function(event) {
        view.hitTest(event).then(function(response) {
            if (response.results.length) {
                const graphic = response.results[0].graphic;
                if (graphic) {
                    graphic.popupTemplate = new PopupTemplate({
                        title: graphic.attributes.NAME,
                        content:${graphic.attributes.POP_CNTR} people live here.
                    });
                    view.popup.open({
                        title: graphic.attributes.NAME,
                        location: event.mapPoint,
                        content:${graphic.attributes.POP_CNTR} people live here.
                    });
                }
            } else {
                view.popup.open({ location: event.mapPoint });
            }
        });
    });
});

6. Popup 样式定制

可以使用 CSS 自定义Popup 的样式，改变背景颜色和字体样式。

/* Custom styles for Popup */
.esri-popup .esri-widget__header {
    background-color: #444;
    color: white;
}
.esri-popup .esri-widget__content {
    background-color: white;
    color: #333;
    font-family: Arial, sans-serif;
}

7. 常见问题与解答

问题1：如何关闭 Popup？

答：可以通过调用view.popup.close() 方法关闭Popup。

view.when(function() {
    view.popup.close();
});

问题2：如何禁用默认的点击事件触发 Popup？

答：可以通过设置图层的outFields 属性为空数组来禁用默认的点击事件触发Popup。

const layer = new FeatureLayer({
    url: "https://services.arcgis.com/P3ePLMY469wqcebx.arcgis.com/arcgis/rest/services/SampleWorldCities/FeatureServer/0",
    outFields: ["*"], // Set this to an empty array to disable default click event triggering Popup
    popupTemplate: { title: "City Name", content: "{POP_CNTR} people live here." }
});

通过以上步骤和示例，您应该能够熟练地在 ArcGIS JavaScript API 中创建和管理Popup，如果您有更多问题，欢迎继续提问！

以上内容就是解答有关“arcgis js 弹出”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。