arcgis js（一）显示二维地图

最新推荐文章于 2024-08-10 22:33:28 发布

之乎者也哦

最新推荐文章于 2024-08-10 22:33:28 发布

阅读量1k

点赞数 1

分类专栏： Web GIS 开发文章标签： web gis webgis

本文链接：https://blog.csdn.net/HB_Programmer/article/details/119817430

版权

Web GIS 开发专栏收录该内容

12 篇文章 18 订阅

订阅专栏

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，下面是最简单的显示二维地图的代码：

<!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、效果如下：