#javascript #arcgis #arcgis-js-api
#javascript #arcgis #arcgis-js-api
Вопрос:
Я пытаюсь отобразить изображение во всплывающем окне, я прочитал документацию, я видел код некоторых примеров (а также предпринял несколько попыток с помощью ImageValue и ImageContent ), но когда я нажимаю на элемент map с помощью всплывающего окна, изображение не отображается. Я не могу понять, что я делаю не так. Вот мой код сейчас и вот мое всплывающее окно, когда я нажимаю на точку:
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
});
Спасибо за ответ, надеюсь, это поможет кому-нибудь в будущем
Комментарии:
1. Работает ли это, если вы указываете полный URL вместо просто «localimage.jpg «?
2. Я не пробовал это, потому что в итоге проблема была связана со скобками, и теперь это работает идеально
Ответ №1:
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> Комментарии:
1. Я сделал то, что вы сказали здесь, изображение по-прежнему не отображается, и я получаю эту ошибку: «[esri.PopupTemplate] ошибка содержимого неподдерживаемое значение содержимого», я также попытался указать локальный путь к изображению в «sourceURL», но это дает тот же результат
2. Это странно, вы уверены, что у вас нет проблем с URL.. Я обновил ответ рабочим примером, который может помочь вам
3. Как я уже писал в своей правке, в итоге моя проблема заключалась в том, что я не включил между «[]» то, что было написано в разделе «содержимое», но спасибо вам за всю вашу поддержку, ваш первоначальный ответ мне очень помог!
4. Рад, что вы с этим разобрались.. Я также обновлю ответ