您的位置:首页 > Web前端 > JavaScript

第一篇 arcgis api for javascript 简单地图

2015-08-16 11:09 676 查看
定义一个地图对象,添加一个简单的瓦片图层

要点:

1、dojo框架;

2、包的引用;

3、图层添加;

代码及解释

<span style="font-size:14px;"><%--
Created by IntelliJ IDEA.
User: neil
Date: 2015/8/16
Time: 10:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>地图测试页面</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>

<script src="http://js.arcgis.com/3.14/"></script>
<script>
dojo.require("esri.map");//依赖包的引用

dojo.addOnLoad(init);//添加页面初始化事件

//声明两个对象
var agsMap;
var tiledMapLayer;

//初始化事件
function init() {
//初始化范围
var initExtent = new esri.geometry.Extent({
"xmin": 12676062,
"ymin": 2566164,
"xmax": 12710191,
"ymax": 2588674,
"spatialReference": {"wkid": 102100}
});
//定义一个map实体
agsMap = new esri.Map("mapDiv", {extent: initExtent});
//定义一个Layer切片图层
tiledMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
//装载图层
agsMap.addLayer(tiledMapLayer);

//监听resize方法
dojo.connect(agsMap, 'onLoad', function (theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', agsMap, agsMap.resize);
});
}

</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
</span>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: