简单理解就是:通过js调用arcgis相关的方法和通过html引入css等资源来展示地图,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport">
<title>Intro to MapView - Create a 2D map - 4.8</title>
<style> //设置显示区域的样式,地图全页面展示
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
// 第一步:引入js文件和css样式表,本文使用了4.9版本
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
//开始使用编辑js,实现加载地图效果
<script>
// 第二步,导入需要的模块,这里引入了Map和MapView
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
// 第三步,初始化一个地图对象
var map = new Map({
// 设置基地图类型,可根据需要加载自己的地图服务。
basemap: "streets"
});
// 新建视图,用的是MapView,是2D的,3D的要用SceneView模块,SceneView方法创建。
var view = new MapView({
//显示在HTML上的区域,也就是哪个div里
container: "viewDiv",
//将地图服务加载到视图上,这是4.x版本设定,3.x版本可直接创建map时设定
map: map,
//设置加载地图的缩放等级和中心位置。
zoom: 4,
center: [15, 65] // longitude, latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

  

ArcGIS API for JavaScript小白入门的更多相关文章

  1. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  2. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

  3. ArcGIS API for Silverlight开发入门

    你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击 ...

  4. arcgis api for javascript 学习(三) 调用发布地图信息,并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  5. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  6. ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  7. ArcGIS API for JavaScript 4.0(一)

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

  8. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  9. 创建ArcGIS API for JavaScript的第一个示例程序

    原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...

随机推荐

  1. 区块链学习笔记:D03 区块链在各行业领域的应用(一)

    今天主要是学习了区块链在金融和供应链领域的应用,重点体现了区块链多方参与.透明可信.防篡改防抵赖的技术优势 区块链的应用场景最早是在金融行业应用较多,后续逐步扩展到传统行业,如:供应链.政务服务.物联 ...

  2. Nginx 404 Not Found 解决办法

    环境:宝塔Nginx面板 解决办法: 宝塔面板--站点设置-配置文件. 去掉:   error_page 404 /404.html; 前面的 # 号.

  3. Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:build-helper-maven-plugin:1.8:add-test-source (execution: add-functional-source, phase: generate-sources)

    在maven项目中使用add-source时,pom.xml报如下错误: Plugin execution not covered by lifecycle configuration: org.co ...

  4. luogu P1327 数列排序

    题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入格式 第一行,正整数n (n<=10 ...

  5. HTML5学习第二天!

    学习了一天,然后整理内容到现在,感觉昨天的学习效率有点差,哎! 感受尽在代码中,布局真的脑壳疼,仅仅只整理了CSS中的list: <!DOCTYPE html> <html> ...

  6. 结构体与typedef的使用,还有结构体指针的使用(二层结构体指针)

    该类容摘抄自以下链接,为学习之后的记录,不是鄙人原创. 学习链接:https://blog.csdn.net/a2013126370/article/details/78230890 typedef ...

  7. 微信小程序使用pako.js的踩坑笔记

    问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之 ...

  8. Python抓取豆瓣电影top250!

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:404notfound  一直对爬虫感兴趣,学了python后正好看到 ...

  9. [golang] nats的消息传递模型介绍

    目录 nats的消息传递模型 What is NATS 主题式消息(Subject-Based Messaging) 发布订阅(Publish-Subscribe) 请求应答(Request-Repl ...

  10. WebAPI之postman变量和session/token

    postman使用变量: 之前我们请求里面的主机地址都是localhost,表示本机.而在实际测试过程中,服务器地址往往并非是在本机上的,这时候就需要用到变量. postman支持多个测试环境,一个环 ...