arcgis for js 4.x相比3.x的类有所不同,4.x主要是map、mapview和MapImageLayer,3.x主要是map、ArcGISDynamicMapServiceLayer。下面只提供加载的其中一种方式。
3.x加载源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3.x加载地图</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"dojo/domReady!"
], function(
Map, Draw, Graphic,ArcGISDynamicMapServiceLayer,ImageParameters) {
map = new Map("map", {
sliderOrientation : "horizontal"
});
var imageParameters = new ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/dlMap/MapServer", {
"imageParameters" : imageParameters
});
map.addLayer(dynamicMapServiceLayer);
});
</script>
</head>
<body>
<div id="map" ></div>
</body>
</html>
4.x加载源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>4.xl oad</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/config",
"esri/layers/MapImageLayer",
"dojo/domReady!"
], function(Map, MapView,esriConfig,MapImageLayer) {
var map = new Map();
var view = new MapView({
container: "viewDiv", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
var layer = new MapImageLayer({
url: "http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>