如何解决显示图像-Popup ArcGIS API for Javascript
我正在尝试在弹出窗口中显示图像，我已经阅读了文档，已经看到了一些示例的代码（并尝试使用ImageValue和ImageContent进行了一些尝试） ，但是当我单击带有弹出窗口的map元素时，该图像不显示。我不知道我在做什么错。
现在是我的代码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
});
编辑：我重新阅读了一些示例，试图了解我所缺少的内容，并牢记此处给出的答案，最后的解决方案是我错过了一些括号：
var template = new PopupTemplate({
title: "Lat: {Lat} Lng: {Lng}",content: [{ //Missed [ here
type: "media",mediaInfos: [{
title: "",caption: "",value: {
sourceURL: "{Image}"
}
}]
}] //Missed ] here
});
感谢您的回复，希望这对以后的人有所帮助
解决方法
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,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,'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,CA 92109,'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,'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',{
name: 'webUrl',alias: 'webUrl',{
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
