一、首先要添加在线的arcGIS的样式css库和js库,代码如下:
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.11/"></script>
这里另外再提一点,arcgis api for javascript提供了下面几种css样式:
http://js.arcgis.com/3.11/dijit/themes/claro/claro.css
http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css
http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css
http://js.arcgis.com/3.11/dijit/themes/soria/soria.css
大家可以根据不同的样式风格进行选择。
二、在body部分加入一个放置地图的div,代码如下:
<body class="claro">
<div id="mapDiv"></div>
</body>
三、开始编写js代码,代码如下:
<script>
var map;
require([
"esri/map",
"dojo/domReady!"
],function(Map){
map=new Map("mapDiv",{
center:[110,32],
zoom:4,
basemap:"streets"
});
});
</script>
下面对这几句代码分别进行解释:
arcgis api for js是在Dojo基础上写的,所以引用对象使用require()语句,语句里面"esri/map"是指调用esri地图对象,"dojo/domReady!"是指保证当DOM对象已经加载完成时,再调用function中的语句,否则当引用对象较多的时候可能会报对象为null的错误。下面再解释function里面的代码:
首先定义了一个map,并将其绘制在咱们之前已经写好的div里面(通过绑定div的id),然后center属性是指地图页面上显示的视野中心经纬度;zoom属性是指地图放大的级别;basemap属性是指arcgis在线地图的一个瓦片地图服务。
四、我们还可以自己设置一下地图显示的样式css,这里我简单地让地图充满,并且没有任何间距,代码如下:
<style>
html,body,#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
这样我们就能在线加载一个地图啦。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>在线加载地图</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require([
"esri/map",
"dojo/domReady!"
],function(Map){
map=new Map("mapDiv",{
center:[110,32],
zoom:4,
basemap:"streets"
});
});
</script>
<style>
html,body,#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
测试一下即可加载世界地图!