custom map does not display

2019-06-14 01:48发布

站内文章 / 前端开发
30 0 0

问题:

i have published suitability map on arc server. but my map does not display, i have followed arcgis java script api example. i want to display suitability map of the desired area. when user click on the map pop window display the analysis result here is my code

<!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 id</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/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();

//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
       arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
        arcgisUtils.createMap("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();


        });


        });

      });
    </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>

回答1:

well, as i can see the question and code you added above below are this things you want to achieve (correct me if i am wrong)-

  1. create a map
  2. add a published layer(arcgis layer url) on the map
  3. show popup on the click of published gis layer.

As your example says you don't have a webmap id so you not need to worry about that.

Below is the working example for that-

require([
      "dojo/dom",
      "dojo/dom-construct",
      "esri/map",
      "esri/dijit/InfoWindow",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "dojo/string",
      "dojo/domReady!"
    ], function(
       dom,
       domConstruct,
       Map,
       InfoWindow,
       FeatureLayer,
       InfoTemplate,
       string
    ) {
    
      var infoWindow = new InfoWindow({}, domConstruct.create("div"));
  infoWindow.startup();
      

      // **** update center according to your feature layer url
      var map = new Map("mapDiv", {
        center: [-122.41, 37.78],
        zoom: 17,
        basemap: "topo",
        infoWindow: infoWindow
      });

     
      var template = new InfoTemplate();
      //*** update the title field name according to your feature layer url
      template.setTitle("<b>${qAddress}</b>");
      template.setContent("${*}");
      
       // ****** replace with your Feature layer url "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0" 
      
      var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{
        infoTemplate: template,
        outFields: ["*"]
      });
      map.addLayer(featureLayer);

      map.infoWindow.resize(180, 175);
    });
html, body {
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 0;
      }
      body {
        background-color:#fff;
        overflow:hidden;      
      }
      #header{
        border:solid 2px #AAc4c4;
        background:#fff;
        color:#749749;
        border-radius: 4px;
        font-size:14px;
        padding-left:20px;
        font-weight:700;
      }
      #map{
        padding:1px;
        border:solid 2px #AAc4c4;
        border-radius: 4px;
      }
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
        <script>var dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script src="https://js.arcgis.com/3.20/"></script>
    <body>
    <div id="mapDiv"></div>
  </body>

Note- Update the sample code as per comments in it.

If you want more info let me know i will update the answer accordingly.

Hoping this will help you :)



回答2:

Well, you apparently adapted this sample: https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html I am not sure if this is what you want, as using webmaps needs some licensing, I guess. In any case, you need to change few lines in your example. Instead of

<link rel="stylesheet" href="css/layout.css">

you should have

<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">

to load the original CSS file. You should make your own copy and load it from your server. More important is to change this line:

arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";

which should be:

arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/";

or, as the sample suggests, path with YOUR portal URL. And, last but not least, the next line must be something like:

arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(


标签： html arcgis-js-api arcgis-server
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~