ArcGIS Javascript API 4.14 Добавить прикрепленное изображение в пользовательском всплывающем шаблоне - PullRequest
0 голосов
/ 02 марта 2020

Я использую веб-карту 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;
}

1 Ответ

0 голосов
/ 02 марта 2020

«Поддерживает вложения» означает, что пользователь имеет возможность добавлять изображения или документы, хранящиеся в базе геоданных, с классом отношений между классом пространственных объектов и таблицей. Если добавляемое вами sh изображение на самом деле является изображением, прикрепленным к записи в базе геоданных, вы можете установить свойства всплывающего окна для отображения вложений, используя объект AttachmentsContent .

Если вы хотите отобразить прикрепленное изображение другим способом (который, кажется, вы заново изобретаете колесо), то вам нужно использовать метод queryAttachments , а затем использовать url из этого во всплывающем окне ( см. Пример PopupTemplate с обещанием ).

Если вы пытаетесь добавить изображение из другого места в inte rnet (что звучит ближе к тому, что вы есть) пытаясь сделать), то вам нужно добавить объект ImageMediaInfo к шаблону всплывающей подсказки, который вы определяете.

...