时间戳

首页 > 解决方案 > 显示图像 - Popup ArcGIS API for Javascript

javascript - 显示图像 - Popup ArcGIS API for Javascript

问题描述

我正在尝试在弹出窗口中显示图像，我已经阅读了文档，我已经看到了一些示例的代码（并且还使用ImageValueand进行了一些尝试ImageContent），但是当我单击带有弹出窗口的地图元素时，图像不显示。我无法弄清楚我做错了什么。这是我现在的代码，这是我单击某个点时的弹出窗口：

            var attr = {
                Lat: arr[i][0], //latitude
                Lng: arr[i][1], //longitude
                Image: "localimage.jpg" //image in same folder
            };
            
            var template = new PopupTemplate({
              title: "Lat: {Lat} Lng: {Lng}",
              mediaInfos: [{
                "title": "",
                "caption": "",
                "type": "image",
                "value": {
                  "sourceURL": "{Image}"
                }
              }]
            });
            
           //when I click on this point after I've added it to the map,
           //the image doesn't show
             var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: pictureMarkerSymbol, //custom marker
                    attributes: attr,
                    popupTemplate: template
             });

编辑：我重新阅读了一些示例，试图了解我所缺少的内容并记住这里给出的答案，最后的解决方案是我错过了一些括号：

var template = new PopupTemplate({
              title: "Lat: {Lat} Lng: {Lng}",
            content: [{ //Missed [ here
                type: "media",
                mediaInfos: [{
                title: "",
                caption: "",
                value: {
                   sourceURL: "{Image}"
                }
        }]
    }] //Missed ] here
});

感谢您的回复，希望这对将来的人有所帮助

标签： javascriptarcgisarcgis-js-api

解决方案

mediaInfos是类的一个属性MediaContent，它是一个可能content的类型PopupTemplate。因此，您需要将媒体移动到内容中，并通过将媒体对象或对象传递给自动投射来指示内容的类型。像这样的东西，

const template = new PopupTemplate({
  title: "Lat: {Lat} Lng: {Lng}",
  content: [{ // <- media goes in the content
    type: "media", // <- autocast to media
    mediaInfos: [{
      "title": "",
      "caption": "",
      "type": "image",
      "value": {
        "sourceURL": "{Image}"
      }
    }]
  }]
});

更新：

在这里，您有一个我为您制作的工作示例，

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      const map = new Map({
        basemap: 'streets-navigation-vector'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 12,
        center: {
          latitude: 32.7353,
          longitude: -117.1490
        }
      });

      function toGraphic(lon, lat, ObjectID, title, addrs, webUrl, imgUrl) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            webUrl,
            imgUrl
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/',
          'https://lh5.googleusercontent.com/p/AF1QipPSP9PPjlW9nF5OEgvWv9cuXB1TOgYmQg5efP36=w408-h272-k-no'

        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/',
          'https://lh5.googleusercontent.com/p/AF1QipMZfVfLMdgQgmw86X8toLLoe0bLZpYgGHUtz3I2=w408-h306-k-no'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego',
          'https://lh5.googleusercontent.com/p/AF1QipMdd7YDTHMIUsKXyPVSFt_td_EA2WuNyeJF_Tj8=w408-h464-k-no'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/',
          'https://lh5.googleusercontent.com/p/AF1QipOQdtIVsWYZG6RvljSRv2LPjwGdXYS3xWJtoIQF=w408-h306-k-no'
        )
      ];

      const layer = new FeatureLayer({
        source: graphics,
        fields: [
          {
            name: 'ObjectID',
            alias: 'ObjectID',
            type: 'oid'
          }, {
            name: 'title',
            alias: 'title',
            type: 'string'
          }, {
            name: 'addrs',
            alias: 'addrs',
            type: 'string'
          }, {
            name: 'webUrl',
            alias: 'webUrl',
            type: 'string'
          },
          {
            name: 'imgUrl',
            alias: 'imgUrl',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          outFields: ['*'],
          content: [
            {
              type: 'fields',
              fieldInfos: [
                {
                  fieldName: 'addrs',
                  label: 'Address'
                },
                {
                  fieldName: 'webUrl',
                  label: 'Web Page'
                }
              ]
            },
            {
              type: 'media',
              mediaInfos: [
                {
                  type: 'image',
                  value: {
                    sourceURL: '{imgURL}'
                  }
                }
              ]
            }
          ]
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

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

</html>

推荐阅读