显示图像 - Popup ArcGIS API for Javascript

Question

I'm trying to display an image in a popup, I've read the documentation, I've seen the code of some samples (and also made some attempts using ImageValue and ImageContent ), but when I click on the map element with the popup, the image doesn't show.我正在尝试在弹出窗口中显示图像，我已经阅读了文档，我已经看到了一些示例的代码（并且还使用ImageValue和ImageContent进行了一些尝试），但是当我单击带有弹出，图片不显示。 I can't figure out what I'm doing wrong.我无法弄清楚我做错了什么。 Here is my code now and here is my popup when I click on a point :这是我现在的代码，这是我单击某个点时的弹出窗口：

            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
             });

EDIT : I've re-read some samples, trying to understand what I was missing and keeping in mind the answer given here, in the end the solution was that I've missed some parenthesis:编辑：我重新阅读了一些示例，试图了解我遗漏了什么并记住这里给出的答案，最后的解决方案是我错过了一些括号：

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

Thanks for the reply, hope this helps someone in the future感谢您的回复，希望这对未来的人有所帮助

Answer 1

mediaInfos is a property of class MediaContent , that is a type of a possible content of PopupTemplate . mediaInfos是MediaContent类的一个属性，它是PopupTemplate的一种可能的content PopupTemplate 。 So you need to move the media to the content and also indicate the type of the content, by passing a media object or an object to autocast.因此，您需要将媒体移动到内容中，并通过将媒体对象或对象传递给自动广播来指示内容的类型。 Something like this,像这样的东西，

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}"
      }
    }]
  }]
});

UPDATE:更新：

Here you have a working example I made for you,在这里，您有一个我为您制作的工作示例，

 <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: '\', 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>

显示图像 - Popup ArcGIS API for Javascript

问题描述

1 个解决方案

解决方案1
0 2020-08-15 19:13:55

显示图像 - Popup ArcGIS API for Javascript

问题描述

1 个解决方案

解决方案1 0 2020-08-15 19:13:55

解决方案1
0 2020-08-15 19:13:55