创建一个HTML页面，引入ArcGIS JavaScript API，在<body>标签内创建一个div并添加ID值，在<head>标签内设置样式<style>，在<head>标签内编写JS API代码脚本<script>。在这个<script>中，所有代码都是写在require()中的。关于引用JS API及如何在HTML页面中使用的基本信息、Map和MapView的基本概念，请查看：[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介。

　　底图的选择有几种方案，这里列出3种：

　　①在Map对象的构造函数中，为basemap属性添加表示底图的字符串

　　②在WebMap对象的构造函数中，为portalItem属性添加portal或ArcGIS Online中的WebMap的ID值

　　③使用url创建切片图层（TileLayer），添加至Map对象中

一、代码框架

 <html>

 <head>

     <meta charset="utf-8">

     <!-- 移动端优化 -->

     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

     <title>ArcGIS JavaScript API4.8 底图选择的几种方案</title>

     <!-- JS API 引入 -->

     <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

     <script src="https://js.arcgis.com/4.8/"></script>

     <!-- 设置样式 -->

     <style>

         html,body,#viewDiv{

             margin:0;

             padding:0;

             height:100%;

             width:100%;

         }

     </style>

     <!-- JS API 代码 -->

     <script>

     </script>

 </head>

 <body>

      <div id="viewDiv"></div>

 </body>

 </html>

二、添加底图

①在Map对象的构造函数中，为basemap属性添加表示底图的字符串

     <!-- JS API 调用代码 -->

     <script>

         require([

             "esri/Map",

             "esri/views/MapView",

             "dojo/domReady!"

             ],function(Map,MapView){

                 //创建地图Map

                 var map=new Map({

                     basemap:"streets"

                 });

                 //创建视图View

                 var view=new MapView({

                     container:"viewDiv",

                     map:map,

                     center:[118.79647, 32.05838],  //南京城区

                     zoom:10

                 });

             }

         );

     </script>

　　 

　　basemap还可以有其他的值，可以进行尝试。

②在WebMap对象的构造函数中，为portalItem属性添加portal或ArcGIS Online中的WebMap的ID值

　　打开portal或ArcGIS Online，找到喜欢的底图，点击查看，进入地图查看器，在上方的url地址栏上会显示一个ID值，复制这个ID值，后面会用到。

　　1°portal：打开portal，图库-Esri专题内容，在左侧列表中选择“底图”，在右侧的页面中点击查看感兴趣的底图。

　　

　　进入地图查看器，上方的url地址栏中最后显示的一串数字，就是我们需要的WebMap的ID值。

　　

     <!-- JS API 调用代码 -->

     <script>

         require([

             "esri/WebMap",

             "esri/views/MapView",

             "dojo/domReady!"

             ],function(WebMap,MapView){

                 //创建地图Map

                 var map=new WebMap({

                     portalItem:{

                         id:"00f90f3f3c9141e4bea329679b257142"

                     }

                 });

                 //创建视图View

                 var view=new MapView({

                     container:"viewDiv",

                     map:map,

                     center:[118.79647, 32.05838],  //南京城区

                     zoom:10

                 });

             }

         );

     </script>

　　注意使用WebMap的ID创建地图时，在require()开头要引入WebMap模块而不是Map模块。

　　

　　2°ArcGIS Online：打开ArcGIS Online，在主页下方的图库中选择感兴趣的底图，点击进入地图查看器，上方url地址栏中最后一串数字就是我们需要的ID值。同样地，代码与调用portal的ID值相同。

　　

　　

     <!-- JS API 调用代码 -->

     <script>

         require([

             "esri/WebMap",

             "esri/views/MapView",

             "dojo/domReady!"

             ],function(WebMap,MapView){

                 //创建地图Map

                 var map=new WebMap({

                     portalItem:{

                         //id:"00f90f3f3c9141e4bea329679b257142"  //portal

                         id:"bf024b8d0b4b48f5a486070214e87c5f"  //ArcGIS Online

                     }

                 });

                 //创建视图View

                 var view=new MapView({

                     container:"viewDiv",

                     map:map,

                     center:[118.79647, 32.05838],  //南京城区

                     zoom:10

                 });

             }

         );

     </script>

　　

　　这里要注意，引用Esri提供的portal或ArcGIS Online底图ID是不会有问题的，但如果是我们自己用ArcGIS Pro发布的WebMap，引用它的ID值会出现无法调用的错误。可能是因为我们要在代码中写上portal或ArcGIS Online的账户和密码。（没有解决）

③使用url创建切片图层（TileLayer），添加至Map对象中

　　上面两种方法都是直接使用的Map或者WebMap，我们也可以创建切片图层，再将图层添加到空Map中，以达到底图的效果。http://www.geoq.cn/site/basemap.html。这个网站提供了一些切片图层的url，复制后写入TileLayer的构造函数中即可。点击查看“服务地址”，上方地址栏中的url即是我们需要引用的切片图层的url。

　　

　　

     <!-- JS API 调用代码 -->

     <script>

         require([

             "esri/Map",

             "esri/views/MapView",

             "esri/layers/TileLayer",

             "dojo/domReady!"

             ],function(Map,MapView,TileLayer){

                 //底图使用的切片图层

                 var mapTileLayer=new TileLayer({

                     url:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer"

                 });

                 //创建地图Map

                 var map=new Map({

                     layers:[mapTileLayer]

                 });

                 //创建视图View

                 var view=new MapView({

                     container:"viewDiv",

                     map:map,

                     center:[118.79647, 32.05838],  //南京城区

                     zoom:10

                 });

             }

         );

     </script>

　　

　　除了将切片图层赋值给Map构造函数中的layers属性，也可以在创建完空Map对象后，这样写：map.layers.add("切片图层名")。

三、总结

　　三种方法都可以添加合适的底图，如果Esri提供的basemap底图字符串没有适合的，可以去portal或者ArcGIS Online的图库中找找。如果还是不符合需求，可以去智图等一些网站上找找提供的service（服务）的url。这里要注意，前两种方法的底图都是WGS84坐标系的，而第三种方法的切片图层是火星坐标系的。

　　互联网地图使用三种坐标系统（这里的坐标系统指加密坐标系统，不是指地理坐标系或投影坐标系）：WGS84坐标系、火星坐标系、百度坐标系。国外一些地图使用WGS84坐标系，火星坐标系是国家测绘局要求的对WGS84坐标系的加密，而百度坐标系是百度公司对火星坐标系的又一次加密。

文中例子的链接分享：https://pan.baidu.com/s/1ylxc_XanvQKdHMcmWt7Zyw

ArcGIS JavaScript API4.8 底图选择的几种方案的更多相关文章

  1. javascript把IP地址转为数值几种方案，来挑战一下效率吧

    先看看什么是IP地址: IP地址是一个32位的二进制数,通常被分割为4个“8位二进制数”(也就是4个字节).IP地址通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~25 ...

  2. Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...

  3. Arcgis Javascript API 开发笔记

    JS API3.4的要求 à(1)  IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...

  4. 使用ArcGIS JavaScript API 3.18 加载天地图

    对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

  5. 如何正确响应ArcGIS JavaScript API中图形的鼠标事件

    在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...

  6. ArcGIS移动开发策略的选择[转]

    智能设备变得越来越普及,从三岁大的小孩到祖父祖母辈都能顺利使用,信息从没像如此这般的容易传递到每个人的手中,开发者们普遍觉得应该慎重考虑下移动开发策略,是web的.混合的.还是native的更好. 这 ...

  7. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  8. FK JavaScript之:ArcGIS JavaScript API之地图动画

    地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScr ...

  9. ArcGIS JavaScript + 天地图API之显示混乱

     异常描述: (1)ArcGIS JavaScript 调用天地图WMTS服务,出现了这种混乱的效果,加载不完整. (2)昨天是相关瓦片的请求,Google浏览器显示的是请求失败.当时怀疑是无线网络的 ...

随机推荐

  1. Python学习 Part7：类

    Python学习 Part7:类 1. 作用域和命名空间 命名空间(namespace)就是一个从名称到对象的映射. 命名空间的一些实例:内置名称集(函数,像abs(),和内置异常名称),一个模块中的 ...

  2. 什么是分布式锁及正确使用redis实现分布式锁

    分布式锁 分布式锁其实可以理解为:控制分布式系统有序的去对共享资源进行操作,通过互斥来保持一致性. 举个不太恰当的例子:假设共享的资源就是一个房子,里面有各种书,分布式系统就是要进屋看书的人,分布式锁 ...

  3. echarts--迁徙图特性简介

    $(function() {    loadMapData(); //页面加载时调用封装加载echarts地图的函数});function loadMapData (cityName) {    if ...

  4. ubuntukylin18.04Lts和deepin15.5与win10 1803双系统安装

    我首先安装的是ubuntu kylin(中文名优麒麟) 1.计算机右键选择管理磁盘,压缩卷设置空闲空间(第7步分区用) 2.重启时fn+f1进入bios设置界面. 3.关闭安全模式和快速启动,将boo ...

  5. 优雅的玩PHP多进程

    proc_open (PHP 4 >= 4.3.0, PHP 5, PHP 7) proc_open — 执行一个命令,并且打开用来输入/输出的文件指针. 说明¶ resource proc_o ...

  6. 数据结构 之 二叉堆（Heap）

    注:本节主要讨论最大堆(最小堆同理). 一.堆的概念     堆,又称二叉堆.同二叉查找树一样,堆也有两个性质,即结构性和堆序性.     1.结构性质:     堆是一棵被完全填满的二叉树,有可能的 ...

  7. 【数据结构】B-Tree, B+Tree, B*树介绍

    [摘要] 最近在看Mysql的存储引擎中索引的优化,神马是索引,支持啥索引.全是浮云,目前Mysql的MyISAM和InnoDB都支持B-Tree索引,InnoDB还支持B+Tree索引,Memory ...

  8. JavaScript 设计模式之----单体（单例）模式

    设计模式之--单体(单例)模式 1.介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工 ...

  9. Go的context的问题

    Go的context的问题 2017-05-29 最近被由context引发的一个bug坑得不轻,所以反思一下Go的context的问题. context是隐式的约束,没有检测 如果我们写一个函数,比 ...

  10. C++类中静态变量和普通变量的区别

    静态变量: 1.静态变量会被编到程序的exe里面,从程序启动到结束,它一直存在: 2.静态变量的初始化值为0: 3.全局变量默认是静态变量: 4.在类中的函数变量前面加了static的也是静态变量,只 ...