ArcGIS JavaScript API4.8 底图选择的几种方案

最新推荐文章于 2024-07-07 10:08:32 发布

子时不睡

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量903

点赞数 3

分类专栏： vue+ArcGIS 文章标签： ArcGIS

原文链接：https://www.cnblogs.com/wangmengdx/p/9737694.html

版权

vue+ArcGIS 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

ArcGIS JavaScript API4.8 底图选择的几种方案

前言

创建一个HTML页面，引入ArcGIS JavaScript API，在< body>标签内创建一个div并添加ID值，在< head>标签内设置样式< style>，在< head>标签内编写JS API代码脚本< script>。在这个< script>中，所有代码都是写在require()中的。关于引用JS API及如何在HTML页面中使用的基本信息、Map和MapView的基本概念
文章转载出处

底图的选择有几种方案，这里列出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>

在这里插入图片描述
②在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>

在这里插入图片描述
③使用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坐标系的加密，而百度坐标系是百度公司对火星坐标系的又一次加密。

子时不睡

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS JavaScript API4.8 底图选择的几种方案

ArcGIS JavaScript API4.8 底图选择的几种方案前言一、代码框架二、添加底图三、总结前言创建一个HTML页面，引入ArcGIS JavaScript API，在< body>标签内创建一个div并添加ID值，在< head>标签内设置样式< style>，在< head>标签内编写JS API代码脚本< script>。在这个< script>中，所有代码都是写在require()中的。关于引用JS API及如何
复制链接

扫一扫

专栏目录