добавить внутренний HTML в заголовок всплывающего шаблона (arcgis- js -api 4.xx) - PullRequest
Новая
       27

добавить внутренний HTML в заголовок всплывающего шаблона (arcgis- js -api 4.xx)

0 голосов
/ 09 июля 2020
• 1000 1005 * заявляет, что принимает строки и функции ИЛИ ).

т.е. 

         let popupShake = {
            outFields: ["*"],
           "title": function (feature){ <------------- breaks popup, but content below works
                let spl = document.createElement("span");
                spl.className = "name_plc";
                dlv.innerHTML = "<span class='name_plc'></span>";

                return spl;
           },
           "content": function (feature){
             let name_plc;
             let dlv = document.createElement("div");
             dlv.className = "popd";
             dlv.innerHTML = `<b><span class='name_plc'></span></b><br>ID: <span class="ida">${feature.graphic.attributes.id}</span><br> URL: <a href="${feature.graphic.attributes.url}" target="_blank">View</a> <br> Updated: ${feature.graphic.attributes.updated} <br>Grid_value: ${feature.graphic.attributes.grid_value}<br> Event Time: ${feature.graphic.attributes.eventTime}`;
              
             setTimeout(() => {
                getName();
             }, 20);
             ................

1 Ответ

1 голос
/ 10 июля 2020

Если вы хотите просто стилизовать заголовок, то вы можете заново определить класс esri-popup__header-title css. 

<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%;
    }
    .disclaimer {
      font-size: 14px;
      font-style: italic;
      color: white;
      background-color: black;
    }
    .esri-popup__header-title {
      color: grey;
      background-color: whitesmoke;

      font-size: smaller;
      font-weight: lighter;
      font-style: italic;
    }
  </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) {

      let author = 'by @cabesuon';

      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, url) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            url
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/'
        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/'
        )
      ];

      function popupContent (feature) {
        const div = document.createElement('div');
        div.innerHTML =
        `Address: ${feature.graphic.attributes.addrs}<br>` +
        `<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
        `<span class="disclaimer">${author}</span>`;
        return div;
      }

      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: 'url',
            alias: 'url',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          content: popupContent,
          outFields: ['*']
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Если вы хотите полностью настроить его, вы всегда можете поиграть с css или / и javascript, чтобы все это изменить.

Возьмите посмотрите на следующий пример, там я скрываю заголовок всплывающего окна, переопределяя стиль esri-popup__header css, а затем добавляю простой заголовок в контент. 

<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%;
    }
    .disclaimer {
      font-size: 14px;
      font-style: italic;
      color: white;
      background-color: black;
    }
    .esri-popup__header-title {
      color: grey;
      background-color: whitesmoke;

      font-size: smaller;
      font-weight: lighter;
      font-style: italic;
    }
    .esri-popup__header {
      display: none !important;
    }
  </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) {

      let author = 'by @cabesuon';

      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, url) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            url
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/'
        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/'
        )
      ];

      function popupContent (feature) {
        const div = document.createElement('div');
        div.innerHTML =
        `<h2 class="esri-popup__header-title">${feature.graphic.attributes.title}<h2/>` +
        `Address: ${feature.graphic.attributes.addrs}<br>` +
        `<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
        `<span class="disclaimer">${author}</span>`;
        return div;
      }

      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: 'url',
            alias: 'url',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          content: popupContent,
          outFields: ['*']
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
...