arcgis js（一）显示二维地图

短命女 2022-09-06 10:14 221阅读 0赞

1、今天开始记录**web gis**的学习过程，点滴积累，聚沙成塔！

2、由于工作业务需要，在做了一年多的安卓开发之后要转向网页前端开发，但是基础业务还是跟地理信息系统、测绘、遥感相关，只是平台架构变了，不影响专业知识的累计。本人在学好专业技能的同时没有间断的练习编程，也在努力提高编程技术，从上大学**C++**开始，到研究生学到了**Qt、Android、Java、C\#、python**，每一门语言都使用超过了一年，都做过实际项目，回头一看发现所有的编程语言大同小异，都有相似之处，在熟练掌握**C++**之后学习其他语言也就迎刃而解了，并没有遇到太多困难，只是我需要把这些技术同专业知识有效结合，将这些技术用到了我所学专业当中，收获颇大，既有效的提高了编程水平，也弄懂了专业知识更加底层的原理实现，可谓一石二鸟，让我倍感充实的同时，脑袋也发胀**/(ㄒoㄒ)/~~**，废话不多说，进入正题：

3、**gis**发展随着计算机技术水平的提高而提高，**web gis**又和**web**技术息息相关，特别是**html、css、JavaScript**的迅速发展，各个框架也层出不穷，极大方便了**web**端开发，可以用极少的代码展示强大的效果，加上**web**引擎功能强大，适合大数据量的地理信息数据处理和三维展示的要求，对于网民来说浏览器不可或缺，也方便了用户使用，所以在浏览器端实现业务需求显得更加简单和方便。

4、谈到**gis**不得不说超图和**esri**公司，一个国内领先，一个全球领先，都为**gis**发展做出了卓越贡献，对我这个代码搬运工来说，必须踩在他们的肩膀上**(๑•̀ㅂ•́)و✧**，由于我们的产品是基于易智睿**GeoScene**的，所以需要使用**ArcGIS API for JavaScript**，官网：[Overview | ArcGIS API for JavaScript][Overview _ ArcGIS API for JavaScript]，下面是最简单的显示二维地图的代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2D map</title>
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.20/"></script>
    
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    
        <script>
            require(["esri/config", "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/FeatureLayer",],
                function (esriConfig, Map, MapView, Basemap, FeatureLayer) {
    
                    esriConfig.apiKey = "YOUR_API_KEY";
    
                    const map = new Map({
                        basemap: "arcgis-topographic" // Basemap layer service
                    });
    
                    const view = new MapView({
                        map: map,
                        center: [-118.805, 34.027], // Longitude, latitude
                        zoom: 13, // Zoom level
                        container: "viewDiv" // Div element
                    });
    
    
                });
        </script>
    
    
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

5、效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

开发工具建议使用**VS code**，具有代码自动对齐的功能，安装**Live Server**可以模拟以本地服务器加载网页的方式打开。官网下载：[Visual Studio Code - Code Editing. Redefined][]

[Overview _ ArcGIS API for JavaScript]: https://developers.arcgis.com/javascript/latest/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/fc6c4b7337a2468582bc2107070c3023.png
[Visual Studio Code - Code Editing. Redefined]: https://code.visualstudio.com/