WebGIS入门（一）--------在线加载ESRI地图

最新推荐文章于 2025-04-29 20:45:46 发布

原创

最新推荐文章于 2025-04-29 20:45:46 发布 · 7.4k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了如何使用WebGIS入门加载ESRI地图，包括添加arcGIS的CSS和JS库，创建放置地图的div，编写JavaScript代码来设置地图对象，并调整地图样式使其充满屏幕，提供了一个完整的加载世界地图的示例代码。

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

一、首先要添加在线的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代码，代码如下：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MagicMHD

关注关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Esri Maps For Office制作漂亮的地图

「刘一哥与GIS的故事」

11-02

2533

ArcGISOnline是一个基于云架构的资源中心，在这里你可以发布自己的地图资源、浏览其它ArcGIS爱好者发布的应用程序；总之，它为我们提供了一个在线交流的场所。 EsriMapsForOffice是ArcGISonline推出的一个Office环境的插件，可以让我们在Excel、Powerpoint中进行制图，就像在Online中制图一样。在Office制图需要一个订阅账户，订阅账户能向企业组织提供在线制图功能，可以引用online上的地图服务。我们也创建自己的交互地图，叠加各种图表嵌入到p

【测评】使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

X北辰北的博客

03-02

1898

概述当我既写了esri-loader方式来进行ArcGIS JS API的开发文章，又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后，相信很多小伙伴看到后会产生“选择纠结症”，我到底该用哪种方式来进行ArcGIS JS API的开发呢？不要着急，我给你一个可供选择的参考，简单又实用：如果项目已经在进行实施，中途可能需要用到ArcGIS JS API中的...

6 条评论您还未登录，请先登录后发表或查看评论

世界地图 ESRI Shapefile

09-30

世界地图 shpfile 格式文件很好用的

esri官方地图地址

lvdou2518的专栏

03-21

3335

http://map.geoq.cn/arcgis/rest/services

WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了

最新发布

A1_3_9_7的博客

04-29

1195

WebGIS（网络地理信息系统）是指基于网络平台，客户端应用软件采用网络协议，运行在网络上的地理信息系统，即将GIS所能提供的功能通过网络展现给用户。顾名思义，WebGIS就是展现在网络上的GIS，是GIS 与Web 融合的产物。GIS 通过Web功能得以扩展，使得GIS冲破专业圈子，真正成为大众化的GIS。如今，网络已成为日常生活中不可或缺的工具，人们可以在网上订餐、购物、查找路线信息、实现定位分析等。地理信息普惠大众，越来越多的人使用地理信息服务，享受地理信息所带来的便利与乐趣。

移动GIS开发之加载Esri地图

自己写着玩的

09-28

3534

选择AndroidStudio进行简单的移动GIS开发，添加一个Esri的公共地图。目录 1、新建项目 2、选择Android系统版本 3、添加空白例子 4、输入Activity Name 5、配置Esri的在线SDK 6、添加网络权限 7、将MapView添加到布局中 8、在MapView里设置地图 9、点击运行开始 1、新建项目输入项目名称和公司名称。 2、选...

地图图源＃ESRI ArcGIS XYZ Tiles系列（TMS）

GIS学习的专栏

04-21

6300

上一期我们分享了必应的卫星地图，优势相较其他图源更新频率更加勤快，缺点也明显，无法查验影像详细的拍摄日期，但是，我们可以通过Bing API指定经纬度坐标查询影像采集的时间**范围**，注意我们这里用到了”范围“，这说明微软并没有公布影像元数据以及历史影像切换的接口，至此必应图源系列完美收官了。关于Bing Map API的密钥申请步骤可自行点击下方链接：必应地图门户：成功申请密钥之后，通过在浏览器搜索栏输入下方URL即可查询某个经纬度坐标的影像拍摄范围啦。

webGIS从基础到开发实践-案例

11-01

本资源“webGIS从基础到开发实践-案例”提供了一个从入门到实践的完整学习路径，涵盖了一系列的WebGIS开发案例。 1. **WebGIS基础概念** - **GIS（地理信息系统）**：一种能够存储、处理、分析和展示地理信息的...

arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图源码

04-01

《ArcGIS API 3.x for JS 入门开发：在线地图服务集成》在WebGIS开发领域，Esri的ArcGIS API for JavaScript是一款强大的工具，它允许开发者创建交互式的地图应用。本篇将深入探讨使用ArcGIS API 3.x版本集成在线...

ArcGIS-API-for-JavaScript入门教程

07-06

ArcGIS 是一个由 ESRI（环境系统研究所）提供的地理信息系统（GIS）平台，它支持数据采集、管理、分析、映射以及共享等多种功能。ArcGIS 平台以 WebGIS 为核心，包括门户网站、应用程序、内容和基础设施等多个组成...

WEBGIS开发1-地图资源部署及加载

weixin_42276227的博客

02-01

1037

基于Cesium的Mars3D进行三维地图的加载及相关功能的实现

esri/basemaps 底图服务

ScapeD的博客

07-27

3394

[AMD模块要求] require （[ “esri / basemaps ” ]，function （esriBasemaps ）{ / * code goes here * / }）; 描述此类包含引用JS API中使用的默认底图的属性，允许您将地图服务添加为Web应用程序中的默认底图。应用此类主要用于自定义地图服务作为底图时。使用AcrGIS提供的默认的底图作...

开源项目教程：Esri Maps App for Android

gitblog_00615的博客

09-09

1156

开源项目教程：Esri Maps App for Android maps-app-androidYour organisations mapping app built with the runtime SDK for android项目地址:https://gitcode.com/gh_mirrors/ma/maps-app-android 1. 项目介绍 Esri Maps App for...

使用arcgis加载天地图html篇

weixin_44614518的博客

03-09

1024

直接上代码！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载天

Esri Maps for Office使用揭秘

关注ArcGIS Server技术！

08-10

4166

Esri Maps for Office，是Esri为微软Office软件量身定制的地图工具（Add-ins），可以帮助商务人士直接在Office软件中创建和共享交互式地图，可在微软Office软件中加入位置分析功能，使更多的用户群体和机构享用到地图和地理空间分析功能。 Esri Maps for Office是ArcGIS Online的一部分，要使用必须订阅online。可以免费试

esri-loader 3.x区域地图按需选择

zhy的博客

01-04

455

样式 html版本 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title&

【WebGIS初学到入职】（三）从Web地图实例出发

ReBeX

09-26

2427

一、前言这里，我们直接从一个项目开始。边做边学边补充自己的技术栈。而今天，我们利用OpenLayers来完成一张地图的展示。首先，你需要：掌握HTML 熟悉CSS 了解JavaScript 有GIS基础二、开始 <!DOCTYPE html> <html> <head> <title>加载OSM地图</title> <link href="https://openlayers.org/en/v6.5.0/css/

Esri Maps for Office使用方法与示例应用

GIS大奔

12-06

2893

一、简介属于ArcGIS Online产品 Microsoft Office产品插件创建交互地理视图在office中系统运行环境：office2010 ppt excel 下载地址：http://www.esri.com/software/esri-maps-for-office/free-trial 二、运行环境要求 ArcGIS Online账号 Windows XP (

arcgis中map属性方法