使用 Vue CLI 3 启用 arcgis API JS 弹出窗口

Question

我正在尝试从 ArcGIS API JS 获取弹出窗口以使用框架 Vue-CLI 3 显示。但即使使用简单的示例代码，我也无法使其工作：这是 vanilla JS 中的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Popup actions | Sample | ArcGIS API for JavaScript 4.17</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.17/"></script>

    <script>
        require([
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/views/MapView",
            "esri/geometry/geometryEngine"
        ], function (Map, FeatureLayer, MapView, geometryEngine) {
            // Create the Map
            var map = new Map({
                basemap: "gray-vector"
            });

            // Create the MapView
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-117.08, 34.1],
                zoom: 11
            });

            var template = {
                // autocasts as new PopupTemplate()
                title: "Trail run",
                content: "{name}",
            };

            var featureLayer = new FeatureLayer({
                url:
                    "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
                outFields: ["*"],
                popupTemplate: template,
            });
            map.add(featureLayer);
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

如您所见，单击某个功能时，会出现一个弹出窗口。

如果我尝试在我的 vue-CLI 项目中实现它，我无法让它工作。单击某个功能时，它会突出显示，但不会打开任何内容。这是我的代码 .vue:

<template>
    <div></div>
</template>

<script>
    import { loadModules } from "esri-loader";

    export default {
        name: "web-map",
        mounted() {
            // lazy load the required ArcGIS API for JavaScript modules and CSS
            loadModules([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
            ]).then(([ArcGISMap, MapView, FeatureLayer]) => {
                const map = new ArcGISMap({
                    basemap: "topo-vector",
                });

                this.view = new MapView({
                    container: this.$el,
                    map: map,
                    center: [-117.08, 34.1],
                    zoom: 11,
                });

                var template = {
                    // autocasts as new PopupTemplate()
                    title: "Trail run",
                    content: "{name}",
                };

                var featureLayer = new FeatureLayer({
                    url:
                        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
                    outFields: ["*"],
                    popupTemplate: template,
                });
                map.add(featureLayer);
            });
        },
        beforeDestroy() {
            if (this.view) {
                // destroy the map view
                this.view.destroy();
            }
        },
    };
</script>

<style scoped>
    div {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
</style>

我错过了什么吗？（我按照 arcgis api js 教程让它在 vue-cli 中工作 - https://developers.arcgis.com/javascript/latest/guide/vue/ ）非常感谢您的帮助！

朱利安

Answer 1

您的代码很好，只是没有添加 css。你少了{ css: true }，仅此而已。

loadModules(
  ["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
  { css: true } // <-- HERE
).then(([ArcGISMap, MapView, FeatureLayer]) => {
  //...
}

HERE code with the fix.

使用 Vue CLI 3 启用 arcgis API JS 弹出窗口

Enable arcgis API JS popups with Vue CLI 3

popup

arcgis-js-api

vue.js

vue-cli-3