问题
I am using arcGIS Javascript API 4.14 webmap and I wanted to add an image to the custom popup template. When I enable it by adding the code,
FeatureLayer.capabilities.data.supportsAttachment = true;
my custom template styles are not working. I am accessing other layer properties such as,
address = feature.graphic.attributes.LOCATIONADDRESS;
Is there any way to access the image also in the popup?
Please suggest me a way to add the image url in the popup.
Here is the code used for popup map.js
// The custom script required to add for the new APIs
var dojoConfig = {
has: {
"esri-native-promise": true
}
};
// The map classes and includes
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/Search",
"esri/widgets/Zoom",
"esri/widgets/Locate",
"esri/popup/content/ImageMediaInfo"
], function(MapView, WebMap, Search, Zoom, Locate, ImageMediaInfo) {
// The webmap declaration
var webmap = new WebMap({
portalItem: {
id: "003dc702f34a44cd88001de7435e1f79"
}
});
/* The map view, the webmapid assigned. The WebMap instance created */
var view = new MapView({
map: webmap,
container: "map",
center: [-95.9406, 41.26],
zoom: 16,
maxZoom: 21,
minZoom: 13,
basemap: "topo",
// remove the default zoom controlls
ui: {
components: ["attribution"]
}
});
webmap
.load()
.then(function() {
return webmap.basemap.load();
})
.then(function() {
/* Grab all the layers and load them */
let allLayers = webmap.allLayers;
console.log(allLayers);
var promises = allLayers.map(function(layer) {
return layer.load();
});
return Promise.all(promises.toArray());
})
.then(function(layers) {
// webmap.removeAll();
webmap.remove(layers[1]);
webmap.remove(layers[2]);
webmap.remove(layers[3]);
webmap.remove(layers[4]);
webmap.remove(layers[5]);
webmap.remove(layers[6]);
// webmap.remove(layers[7]);
webmap.remove(layers[8]);
webmap.remove(layers[9]);
webmap.remove(layers[10]);
webmap.remove(layers[11]);
webmap.remove(layers[12]);
var popupTemplate;
// Sets the location of the popup to the center of the view
// Position of the popup in relation to the selected feature.
view.popup.alignment = "top-center";
// To disable the collapse functionality
view.popup.collapseEnabled = false;
// A spinner appear at the pointer
view.popup.spinnerEnabled = false;
// To disable the dock (The popup will be appear in bottom or any corner of the window)
view.popup.dockEnabled = false;
// Disable the pagination
view.popup.featureNavigationEnabled = false;
// Popup template details, Keep only name and address in the popup and avoid all other details
// view.popup.viewModel.actions.getItemAt(0).visible = false;
// view.popup.autoOpenEnabled = false;
view.popup.defaultPopupTemplateEnabled = false;
view.popup.actionsMenuEnabled = false;
view.on("click", function(event) {});
for (let i = 2; i < layers.length; i++) {
var template = {
title: function() {
return "Popup Headding";
},
content: function(feature) {
// to enable the image in the popup
// feature.graphic.layer.capabilities.attachment.supportsContentType = true;
var div = document.createElement("div");
var address = feature.graphic.attributes.Address;
var facilityID = feature.graphic.attributes.FACILITYID;
var numberofstalls = "";
// Condition for showing the handicapped layers 6,7
address =
"<div class='onstreet_image'><img src=" +
feature.graphic.attributes.IMAGE_URL +
" /><a href=" +
feature.graphic.attributes.IMAGE_URL +
" target='_blank'>Photo</a></div>";
div.innerHTML =
'<div id="popup_address">' + address + "</div>" + numberofstalls;
return div;
},
outFields: [
"Name",
"Address",
"FACILITYID",
"LOCATIONADDRESS",
"LOCATIONNAME",
"NUMEROFSTALLS",
"IMAGE_URL"
]
};
layers[i].popupTemplate = template;
// console.log(layers[i]);
}
// To close the popup when hit on esc button
document.onkeyup = function(evt) {
var key = evt.keyCode;
if (key == 27) {
view.popup.close();
}
};
})
.catch(function(error) {
// console.log(error);
});
});
index file
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.14</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://js.arcgis.com/4.14/"></script>
<script src="map.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Style.css
.esri-popup__header-title {
color: #38466a !important;
font-weight: 900;
font-size: 1.275rem !important;
min-width: 180px;
/* word-break: break-word !important;
word-wrap: break-word !important; */
word-break: normal !important;
}
.esri-popup__header-title:hover {
background-color: #ffffff;
}
/* .esri-popup__content {
display: block;
font-size: 10px;
color: #7c7c7c;
font-weight: 500;
padding: 0 !important;
} */
#popupRight {
position: absolute;
top: 0;
right: 0;
width: 65px;
height: 100%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background-color: #229fd7;
cursor: pointer;
/* height: 90px; */
}
/* the plus symbol in the popup */
.right p {
color: #ffffff;
text-align: center;
padding-top: 25%;
font-size: xx-large !important;
font-weight: bold;
}
/* to remove the scroll bar in the popup content */
.esri-popup__content {
height: 40px;
}
/* To make a fixed length of the popup */
.esri-view-width-xlarge .esri-popup__main-container {
width: 250px !important;
}
/* To hide the footer area in arcGIS 4.14 */
.esri-popup__footer {
display: none !important;
}
/* to remive the blue outline around the map */
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: none !important;
}
回答1:
"Supports attachements" means that the user has the ability to add images or documents which are stored in the geodatabase with a relationship class between the feature class and the table. If the image you wish to add is actually an image attached to the record in the geodatabase, you can set the properties of the popup to display attachments using the AttachmentsContent object.
If you want to display the attached image in some other way (which seems like you are re-inventing the wheel), then you need to use the queryAttachments method and then use the url from that in the popup (see PopupTemplate with promise example).
If you are trying to add an image from somewhere else on the internet (which sounds closer to what you are trying to do), then you need to add a ImageMediaInfo object to the Popuptemplate that you are defining.
来源：https://stackoverflow.com/questions/60488592/arcgis-javascript-api-4-14-add-attached-image-in-custom-popup-template