Fatal编程技术网
  • vue.js/
  • Vue.js 使用Vue CLI 3启用arcgis API JS弹出窗口

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

vue.js

Vue.js 使用Vue CLI 3启用arcgis API JS弹出窗口,vue.js,popup,arcgis-js-api,vue-cli-3,Vue.js,Popup,Arcgis Js Api,Vue Cli 3,我正在尝试使用框架Vue CLI 3从ArcGIS API JS获取弹出窗口以显示。 但即使使用简单的示例代码，我也无法使其正常工作：以下是vanilla JS中的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,m

我正在尝试使用框架Vue CLI 3从ArcGIS API JS获取弹出窗口以显示。 但即使使用简单的示例代码，我也无法使其正常工作：以下是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>


用于JavaScript 4.17的弹出操作|示例| ArcGIS API
html，
身体，
#视窗{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
要求([
“esri/Map”，
“esri/图层/功能图层”，
“esri/views/MapView”，
“esri/几何/几何工程”
]，功能（地图、要素图层、地图视图、几何工程）{
//创建地图
var映射=新映射({
底图：“灰色向量”
});
//创建地图视图
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
中间：[-117.08,34.1]，
缩放：11
});
变量模板={
//自动广播为新的PopupTemplate（）
标题：“试跑”，
内容：“{name}”，
};
var featureLayer=新的featureLayer({
网址：
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
外场：[“*”]，
popupTemplate:模板，
});
添加（featureLayer）；
});
如您所见，单击某个功能时，会出现一个弹出窗口

如果我试图在我的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>


从“esri加载程序”导入{loadModules}；
导出默认值{
名称：“网络地图”，
安装的（）{
//延迟加载JavaScript模块和CSS所需的ArcGIS API
加载模块([
“esri/Map”，
“esri/views/MapView”，
“esri/图层/功能图层”，
])。然后（（[ArcGISMap、MapView、FeatureLayer]）=>{
常量映射=新的ArcGISMap({
底图：“地形矢量”，
});
this.view=新地图视图({
集装箱：这个$el，
地图：地图，
中间：[-117.08,34.1]，
缩放：11，
});
变量模板={
//自动广播为新的PopupTemplate（）
标题：“试跑”，
内容：“{name}”，
};
var featureLayer=新的featureLayer({
网址：
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
外场：[“*”]，
popupTemplate:模板，
});
添加（featureLayer）；
});
},
在…之前{
if（this.view）{
//破坏地图视图
this.view.destroy（）；
}
},
};
div{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
}
我错过什么了吗？（我遵循arcgis api js教程，使其在vue cli中工作-https://developers.arcgis.com/javascript/latest/guide/vue/ ) 非常感谢你的帮助

Julien

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

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


loadModules(
[“esri/Map”、“esri/views/MapView”、“esri/layers/FeatureLayer”]，
{css:true}//{
//...
}
.

谢谢你的回答。当我在y脚本中输入这段代码时，ma显示不正确：我知道这可能是我的css的一个问题，但我在这方面很新，所以如果你能帮我解决这个问题，那就太好了！谢谢！谢谢你的帮助。确实效果很好。我刚刚发现显示问题来自事实上，我已经在我的项目中安装并导入了路由器插件。我不明白为什么会这样做，但至少现在我有了一个干净的地图。谢谢！很高兴你找到了它！