всплывающее окно на веб-карте

1

Я отобразил свою карту в Интернете с помощью примера arcjis javascript api. в образце отображается всплывающее окно, но на моей стороне это не так. теперь я хочу добавить всплывающее окно. я хочу, когда пользователь нажимает на другой тип почвы, всплывающее окно откроется и отобразит атрибуты слоев

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create web map from JSON</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/>

    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/geometry/Extent",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        Extent,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        var webmap = {};
        webmap.item = {
          "title":"Soil Map",
         "snippet": "This map shows the Soil types",
          "extent": [[73.94251383600005, 31.02571637300008],[74.05297753900004, 31.11529292900019]]
        };

        webmap.itemData = {
          "operationalLayers": [{
            "url": "http://localhost:6080/arcgis/rest/services/Soil_Maps/soil_map/MapServer",
            "visibility": true,
            "opacity": 0.75,
            "title": "Soil Survey Map",
            
          }],
          "baseMap": {
            "baseMapLayers": [{
              "opacity": 1,
              "visibility": true,
              "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
              },{
              "isReference": true,
              "opacity": 1,
              "visibility": true,
              "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
              }],
            "title": "World_Terrain_Base"
          },
          "version": "1.1"
        };

        dom.byId("title").innerHTML = webmap.item.title;
        dom.byId("subtitle").innerHTML = webmap.item.snippet;

        arcgisUtils.createMap(webmap,"map").then(function(response){


          var map = response.map;



          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });

    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html>
Теги:
arcgis-server
arcgis-js-api

3 ответа

1

Всегда рекомендуется использовать идентификатор webmap/item вместо webmap json.

Как только вы сможете получить идентификатор или идентификатор веб-карты, используя нижеприведенный код, вы можете использовать webmap-

require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();


//***** change webmapid only
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(function(response){
          

          var map = response.map;



          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response);
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">

    <script src="https://js.arcgis.com/3.20/"></script>
    <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">

      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>

Примечание. - Обновите код в соответствии с комментариями в нем.

Надеюсь, это поможет вам :)

Поделиться
  • 0
    Вы знаете, как сделать это с помощью highmaps? у меня есть много карт различных областей для отображения
  • 0
    Highmap мне нужно проверить ...
0

вы неправильно использовали модуль "esri/urlUtils", в основном он предоставляет утилиты для работы с контентом из ArcGIS.com. Таким образом, вы не можете использовать свой метод createMap для создания карты с помощью локальной карты arcgis server map, вместо этого вы должны опубликовать свои рабочие уровни через arcgis.com и получить идентификатор карты. Посмотрите, как публиковать размещенные слои объектов с помощью csv или featurelayer.

1.Использование модуля "esri/urlUtils" для создания карты

вы можете создать карту, используя метод creatMap "esri/urlUtils" с помощью json или itemid.

1) создать веб-карту json, для полного кода см.
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapitem.html

webmap.itemData = {
                "operationalLayers": [{
                    "url": "xxx",// your map service goes here
                    "visibility": true,
                    "opacity": 0.75,
                    "title": "Soil Survey Map",
                    "itemId": "xx"//your map item id in arcgis.com
      }],...

ПРИМЕЧАНИЕ. JSON должен включать идентификатор вашего рабочего слоя в arcgis.com.

2) создать веб-карту по itemid (рекомендуется), для полного кода см.
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html

            ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;



                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();
            });
        });

2.add popup, для некоторых образцов см. Developers.arcgis.com/javascript/3/jssamples/#search/Popup

Если у вас есть много карт для отображения, вы должны использовать featurelayer для добавления данных на карту. Более подробную информацию см. В документации ags js api.

Поделиться
0

ну, как я вижу в коде кода фрагмента webmap json не содержит настроек конфигурации infowindow/popup, потому что я думаю, что его не видно в вашем примере.

Однако рекомендуемый способ - создать онлайн-карту esri, которая будет обрабатывать все эти сложности для вас. и добавьте ваш esri mapserver в веб-карту. после этого настройте всплывающее окно для этого слоя.

Создание веб-карты - очень простой процесс, ниже приведены шаги, которые следует выполнить that-

  1. Выберите базовую карту
  2. Добавить слои
  3. Изменить стиль
  4. Настройка всплывающих окон
  5. Сохранить карту
  6. поделиться веб-картой

source webmap: - http://doc.arcgis.com/ru/arcgis-online/reference/what-is-web-map.htm

исходные этапы: - http://doc.arcgis.com/ru/arcgis-online/get-started/get-started-with-maps.htm

Если вам нужна дополнительная информация, дайте мне знать, я буду обновлять соответствующим образом.

Надеюсь, это поможет вам :)

Поделиться
  • 0
    У меня нет лицензии Arcgis Online. Есть ли другой способ сделать это?
  • 0
    Создайте пробную учетную запись и опубликуйте веб-карту, используя эту учетную запись. Не нужно платить и покупать за один раз. Но если вы чувствуете, что это хорошо и полезно, купите его ....
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню