Я использую веб-карту arcGIS Javascript API 4.14 и хочу добавить изображение в пользовательский шаблон всплывающего окна. Когда я включаю его, добавляя код,
FeatureLayer.capabilities.data.supportsAttachment = true;
, мои пользовательские стили шаблонов не работают. Я получаю доступ к другим свойствам слоя, таким как
address = feature.graphic.attributes.LOCATIONADDRESS;
Есть ли способ получить доступ к изображению также во всплывающем окне?
Пожалуйста, предложите мне способ добавить URL-адрес изображения во всплывающем окне. ,
Вот код, используемый для всплывающей карты. 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);
});
});
индексный файл
<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>
Стиль. 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;
}