一文让你彻底掌握ArcGisJS地图管理的秘密

kiba518

已于 2022-10-21 08:38:43 修改

阅读量947

点赞数 2

文章标签： javascript js vue css java

于 2021-08-16 10:15:00 首次发布

本文链接：https://blog.csdn.net/kiba518/article/details/119746773

版权

使用ArcGis开发地图

引用ArcGisJS

使用ArcGisJS开发地图，首先需要引入ArcGis的Js文件和CSS文件，引入方式有两种，一种是官网JS引用，一种是本地JS引用。如下：

官网JS引用

  <link rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>

本地JS引用

<link rel="stylesheet" href="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css"> 
    <script src="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/init.js"></script>

require内置对象

require是ArcGisJS开发的起点，类似于C#中的引入命名空间的using，不同的是require引入的都是js文件，每个js文件都是一个大的js类。

require有两个参数，第一个参数接收js文件地址，第二个参数输出一个函数，函数的参数返回引入js文件的js类，类顺序与上面引入js文件的顺序的一致。

代码如下：

 <script>

        require(["esri/config",
            "esri/Map",
            "esri/views/MapView", 
            "esri/Basemap",
            "esri/layers/Layer"
        ], function (
            esriConfig,
            Map,
            MapView, 
            Basemap,
            Layer) {
            //使用地图对象    
        }
        );
</script>

下面我们看一个ArcGisJS本地部署的网站下的esri文件夹的结构。

如图所示，我们上面使用"esri/config"字符串引入的js文件就是esri文件夹下的config.js文件。

地图开发

基础开发

地图开发主要是在require的输出函数中做的，具体开发逻辑是使用Map类创建地图，使用View类绑定div元素，然后将Map地图对象赋值到View类中，实现地图在div中展示。

Map类与View类各有两个子类， WebMap，MapView对应二维地图，SceneMap，SceneView对应三维地图。

编写代码展示地图

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebArcGis_JS4</title> 
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>

        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/Basemap",
            "esri/layers/Layer"
        ], function (
            esriConfig,
            Map,
            MapView,
            MapImageLayer,
            Basemap,
            Layer) {
            esriConfig.apiKey = "YOUR_API_KEY";
           
            let layer = new MapImageLayer({
                url: "http://192.168.1.2:6080/arcgis/rest/services/SampleWorldCities/MapServer"
            });

最低0.47元/天解锁文章

kiba518

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
一文让你彻底掌握ArcGisJS地图管理的秘密

使用ArcGis开发地图引用ArcGisJS使用ArcGisJS开发地图，首先需要引入ArcGis的Js文件和CSS文件，引入方式有两种，一种是官网JS引用，一种是本地JS引用。如下：官网JS引用 <link rel="stylesheet"href="https://js.arcgis.com/4.20/esri/themes/light/main.css">&lt...
复制链接

扫一扫