ArcGIS API for JavaScript小白入门
简单理解就是:通过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小白入门的更多相关文章
- ArcGIS API for JavaScript 入门教程[1] 渊源
->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...
- ArcGIS API for JavaScript 入门教程[0] 目录
随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...
- ArcGIS API for Silverlight开发入门
你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击 ...
- arcgis api for javascript 学习(三) 调用发布地图信息,并将地图属性信息输出到Excel表中
吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...
- 基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
- ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for JavaScript 4.0(一)
原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- 创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...
随机推荐
- C# 自然周,月,季度计算。
/// <summary> /// 判断时间是否和服务器时间是一天 /// </summary> /// <param name="cs">&l ...
- Unity3D for iOS初级教程:Part 1/3(上)
转自:http://www.cnblogs.com/alongu3d/archive/ 如果图片看不到,请查看原文 这篇教材是来自教程团队成员 Christine Abernathy, 他是Faceb ...
- emmet的html和css使用技巧大全
emmet html使用技巧大全 ! 初始化 >:后代+:兄弟^:向上*:乘法$:数字():分组#:id命名.:类命名 一.id,类命名p#infop.infoa[href=#] 二.后代:di ...
- 基于CC1606 FPGA评估板移植iCamera程序小结
iCamera作为柴草电子经典的摄像头开发工具,其强大的摄像头调试功能,深受广大网友喜爱,支持市面上各种摄像头. 目前现有的应用板卡支持:CC1601(CP601A). CC1602(CP601B) ...
- 蛋疼的 qii 神马警告才是需要注意的警告?(由于警告引起的截然不同的运行结果)解决总结
接上文!! 蛋疼一天,折腾一天,没找到具体原因,但是找到了具体操作办法! 1.果断删除没用的文件 特别是sdc文件,旧的没用,果断删除,否则系统会默认使用,带来副作用 2.files 添加系统用到的i ...
- 【Maven】常用命令
[Maven]常用命令 转载:https://www.cnblogs.com/yangchongxing/p/10267028.html Maven Jar 搜索:https://mvnreposit ...
- 【Java Web开发学习】Spring4整合thymeleaf视图解析
[Java Web开发学习]Spring4整合thymeleaf视图解析 目录 1.简单介绍2.简单例子 转载:https://www.cnblogs.com/yangchongxing/p/9111 ...
- TypeScript躬行记(3)——类
类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例.ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添 ...
- NIO Buffer 内部机理使用姿势
关于NIO Buffer中4个重要状态属性 position.limit.capacity 与 mark Buffer本身是一个容器,称作缓冲区,里面包装了特定的一种原生类型,其子类包括ByteBuf ...
- Springboot静态页面放在static路径下还是访问不到
一种最常见的问题,静态资源放在默认的目录,如:resources/static或resources/templates 访问静态资源的时候,路径不应带上默认目录,因为springboot默认从这些目录 ...