第一篇 arcgis api for javascript 简单地图

13 篇文章 0 订阅
13 篇文章 0 订阅

定义一个地图对象,添加一个简单的瓦片图层

要点:

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值