<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript Tutorials: Select a basemap</title> <style> /*设置显示区域的样式，地图全页面展示*/ html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <!--第一步：引入js文件和css样式表，本文使用了4.13版本--> <link rel="stylesheet" href="http://localhost/arcgis_js_v413_api/4.13/esri/css/main.css" /> <script type="text/javascript" src="http://localhost/arcgis_js_v413_api/4.13/init.js"></script> <!--开始使用编辑js，实现加载地图效果--> <script> //第二步，导入需要的模块，这里引入了Map、MapView、Compass、MapImageLayer require([ "esri/Map", "esri/views/MapView", "esri/widgets/Compass", "esri/layers/MapImageLayer" ], function (Map, MapView, Compass, MapImageLayer) { //第三步，初始化一个地图图层 var layer0 = new MapImageLayer({ url: "URL0" }); var layer1 = new MapImageLayer({ url: "URL1" }); //第四步，初始化一个地图对象 var map = new Map(); map.add(layer0); map.add(layer1); // 新建视图，用的是MapView，是2D的，3D的要用SceneView模块，SceneView方法创建。 var view = new MapView({ //显示在HTML上的区域，也就是哪个div里 container: "viewDiv", //将地图服务加载到视图上，这是4.x版本设定，3.x版本可直接创建map时设定 map: map, //设置加载地图的缩放等级和中心位置。 center: [115.80543, 36.02700], // longitude, latitude zoom: 6 }); var compassWidget = new Compass({ view: view }); view.ui.add(compassWidget, "top-left"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>