猿问

将外部变量传递给弹出窗口中的字段：（arcgis-js-api）

这是我的代码，我在其中通过一个休息调用在 arcgis-js-api (4.xx) 中设置和调用一个弹出窗口...问题我有一个外部变量我想在“放置”字段中填充这个外部变量不是来自同一个休息调用，我有这个值，不知道为什么它不会在现场接受它？


var place = 'something cool x';

........

   var popuptemp = {

          title: "Shake Intensity",

          content: [{

            type: "fields",

            fieldInfos: [{

                fieldName: "grid_value",

                label: "Grid Value"

              },

              {

                fieldName: "id",

                label: "id"

              },

              {

                fieldName: "place",

                label: "place"

              },

              {

                fieldName: "ObjectID",

                label: "ObjectID"

              },

              {

                fieldName: "url",

                label: "Url"

              }

            ]

          }]

        }


        fl = new FeatureLayer({

          source: gras,

          objectIdField: "ObjectID",

          geometryType: "polygon",

          fields: [{

            name: "ObjectID",

            alias: "ObjectID",

            type: "oid"

          }, {

            name: "id",

            alias: "id",

            type: "string"

          }, {

            name: place <--------------------- tried just calling the var here with no avail, no errors, just nothing displays

            alias: "place",

            type: "string"

          }, {

            name: "url",

            alias: "url",

            type: "string"

          }, {

            name: "grid_value",

            alias: "grid_value",

            type: "double"

          }],

          renderer: renderer,

          popupEnabled: true,

          popupTemplate: popuptemp

        });


        map.add(fl);


德玛西亚99
浏览 121回答 1
1回答

ibeautiful

您将无法添加字段等外部数据。但是您可以使用函数来定义内容。看看我为你做的这个例子，其中有author全局价值。<html><head>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">&nbsp; <title>ArcGIS API for JavaScript Hello World App</title>&nbsp; <style>&nbsp; &nbsp; html,&nbsp; &nbsp; body,&nbsp; &nbsp; #viewDiv {&nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; .disclaimer {&nbsp; &nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; font-style: italic;&nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; }&nbsp; </style>&nbsp; <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">&nbsp; <script src="https://js.arcgis.com/4.15/"></script>&nbsp; <script>&nbsp; &nbsp; require([&nbsp; &nbsp; &nbsp; 'esri/Map',&nbsp; &nbsp; &nbsp; 'esri/views/MapView',&nbsp; &nbsp; &nbsp; 'esri/layers/FeatureLayer'&nbsp; &nbsp; ], function (Map, MapView, FeatureLayer) {&nbsp; &nbsp; &nbsp; let author = 'by @cabesuon';&nbsp; &nbsp; &nbsp; const map = new Map({&nbsp; &nbsp; &nbsp; &nbsp; basemap: 'streets-navigation-vector'&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; const view = new MapView({&nbsp; &nbsp; &nbsp; &nbsp; container: 'viewDiv',&nbsp; &nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; &nbsp; zoom: 12,&nbsp; &nbsp; &nbsp; &nbsp; center: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: 32.7353,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: -117.1490&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; function toGraphic(lon, lat, ObjectID, title, addrs, url) {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; geometry: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'point',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: lon,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: lat&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributes: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ObjectID,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addrs,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; const graphics = [&nbsp; &nbsp; &nbsp; &nbsp; toGraphic(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -117.1560632,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 32.727482,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Automotive Museum',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '2080 Pan American Plaza, San Diego, CA 92101, United States',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'http://sdautomuseum.org/'&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; toGraphic(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -117.1763293,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 32.7136902,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'USS Midway Museum',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '910 N Harbor Dr, San Diego, CA 92101, United States',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'http://www.midway.org/'&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; toGraphic(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -117.2284536,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 32.7641112,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'SeaWorld',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '500 Sea World Dr, San Diego, CA 92109, United States',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'https://seaworld.com/san-diego'&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; toGraphic(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -117.1557741,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 32.7360032,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Zoo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '2920 Zoo Dr, San Diego, CA 92101, United States',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'https://zoo.sandiegozoo.org/'&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; function popupContent (feature) {&nbsp; &nbsp; &nbsp; &nbsp; const div = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; div.innerHTML =&nbsp; &nbsp; &nbsp; &nbsp; `Address: ${feature.graphic.attributes.addrs}<br>` +&nbsp; &nbsp; &nbsp; &nbsp; `<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +&nbsp; &nbsp; &nbsp; &nbsp; `<span class="disclaimer">${author}</span>`;&nbsp; &nbsp; &nbsp; &nbsp; return div;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; const layer = new FeatureLayer({&nbsp; &nbsp; &nbsp; &nbsp; source: graphics,&nbsp; &nbsp; &nbsp; &nbsp; fields: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'ObjectID',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alias: 'ObjectID',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'oid'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'title',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alias: 'title',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'string'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'addrs',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alias: 'addrs',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'string'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'url',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alias: 'url',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'string'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; objectIDField: ['ObjectID'],&nbsp; &nbsp; &nbsp; &nbsp; geometryType: 'point',&nbsp; &nbsp; &nbsp; &nbsp; renderer: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'simple',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; symbol: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'text',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'red',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: '\ue61d',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: 30,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; family: 'CalciteWebCoreIcons'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; popupTemplate: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '{title}',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: popupContent,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outFields: ['*']&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; map.add(layer);&nbsp; &nbsp; });&nbsp; </script></head><body>&nbsp; <div id="viewDiv"></div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答