我在弧服务器上发布了适用性地图。但我的地图没有显示，我已经遵循arcgis java脚本api示例。我想显示所需区域的适用性地图。当用户点击地图弹出窗口显示分析结果时，这里是我的代码
{{ Form::open(['id' => 'search_form']) }}
<div class="panel-body grey-background" id="search_panel">
<input type="hidden" id="token" value="{{ csrf_token() }}">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!-- Start Search Results -->
@foreach($sites as $site)
@if($site->is_front_page == true)
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<span class="small pull-left">
Rank: {{ $site->rank }}
</span>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<a href="{{ url('link/' . $site->url_name) }}">
<strong class="site-title text-primary pull-right">
{{ $site->display_name }}
</strong>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@endforeach
</div>
</div>
<!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>
答案 0 :(得分：1)
好吧，因为我可以看到你在上面添加的问题和代码是你想要达到的目标（如果我错了，请纠正我） -
正如您的示例所示，您没有网页地图ID，因此您无需担心这一点。
以下是该工作示例 -
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>
注意 - 根据其中的评论更新示例代码。
如果您想了解更多信息，请告知我，我会相应更新答案。
希望这会对您有所帮助：）
答案 1 :(得分：0)
嗯，你显然改编了这个样本： FileStream constructor 我不确定这是否是你想要的，因为使用网页地图需要一些许可，我想。无论如何，您需要在示例中更改几行。而不是
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
加载原始CSS文件。您应该自己制作副本并从服务器加载它。 更重要的是改变这一行：
arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/";
应该是：
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(
或者，如示例所示，使用您的门户网站URL路径。 最后但并非最不重要的是，下一行必须是：
ContainerAwareTrait