第一篇 arcgis api for javascript 简单地图

最新推荐文章于 2020-12-01 13:03:06 发布

neil89

最新推荐文章于 2020-12-01 13:03:06 发布

阅读量8.9k

点赞数

分类专栏： GIS ArcGIS API ArcGIS 文章标签： arcgis 地图 api for js javascript

本文链接：https://blog.csdn.net/neil89/article/details/47700695

版权

GIS 同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

ArcGIS API

13 篇文章 0 订阅

订阅专栏

ArcGIS

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>