二、ArcGIS API For JavaScript之Hello_World

最新推荐文章于 2023-12-06 16:20:03 发布

snow_heavy

最新推荐文章于 2023-12-06 16:20:03 发布

阅读量432

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ide的学习

本文链接：https://blog.youkuaiyun.com/snow_heavy/article/details/80293397

ide的学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ArcGIS API For JS中的esri.Map类创建一个简单的地图应用示例。通过加载基本的地图服务并将其展示在一个HTML页面上，演示了esri.Map类的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

在ArcGIS API For JS中，esri.Map类可以说是最重要的一个类，Map作为地图图层的容器，存放各种地图服务，同时Map具有一些常用的属性和事件可以帮助我们完成一些复杂的操作。接下来我们使用Map类开始我们的HelloWorld程序。

二、Hello World实例

在本示例中，主要简单说明一下map类的使用

三、Hello World实例步骤

1、新建一个Hello World htm，同时引入我们的int.js,esri,css样式文件

//引入js，css，esri样式文件
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.16/3.16/init.js"></script>

<link rel="stylesheet" type="text/css" href="theme.css" />  rel 属性指示被链接的文档是一个样式表

2、创建一个div作为map的容器（div必须设置宽高，不然地图不会显示）

<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

3、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <script>
        require(["esri/map","dojo/domReady!"],
            function(Map){
                var myMap = new Map("mapDiv",{
                    basemap:"topo"
                });

            })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>

4、代码运行结果