第一个ArcGIS JS API

最新推荐文章于 2024-05-20 20:41:01 发布

九千七 ~

最新推荐文章于 2024-05-20 20:41:01 发布

阅读量177

点赞数 6

文章标签： arcgis javascript 开发语言

本文链接：https://blog.csdn.net/create_1234/article/details/136040660

版权

ArcGIS JavaScript API 是一款使用 JavaScript 和 HTML5 创建丰富且具有交互性的 2D 和 3D 地理数据应用平台。它极为重要的功能是允许开发者通过地图视觉化地理位置信息。

官方网址：https://developers.arcgis.com/javascript/latest/

1.使用

官网的引用方式

2.显示第一个地图

将arcgis引入完成后

首先创建一个容器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>SceneView - 创建一个3D地图</title>
    <style>
        html,
        body,
        #viewDiv {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--使用script和link标签引用ArcGIS API for JavaScript-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        
    </script>
</head>

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

上述代码中引入的是4.18版本的jsapi，如需其他版本直接修改即可，如：4.18=>4.24

然后引入模块

通过require引入想使用的模块与函数需一一对应

创建一个地图map，map对象中包含一个底图数据（这个topo是arcgis官方的地图id）

创建一个视图容器包含地图对象显示位置层级等信息，关联dom中的id

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {

            const map = new Map({
                basemap: "topo" //底图
            });

            const view = new MapView({
                map: map, // 地图对象
                center: [-118.805, 34.027], // 地图中心点经纬度坐标
                zoom: 13, // 缩放等级
                container: "viewDiv" // 你的div的id
            });
        });

显示结果

这样就完成了一个arcgis视图的创建

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>SceneView - 创建一个3D地图</title>
    <style>
        html,
        body,
        #viewDiv {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--使用script和link标签引用ArcGIS API for JavaScript-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {

            const map = new Map({
                basemap: "topo" //底图
            });

            const view = new MapView({
                map: map, // 地图对象
                center: [-118.805, 34.027], // 地图中心点经纬度坐标
                zoom: 13, // 缩放等级
                container: "viewDiv" // 你的div的id
            });
        });
    </script>
</head>

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

</html>

九千七 ~

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第一个ArcGIS JS API

ArcGIS JavaScript API 是一款使用 JavaScript 和 HTML5 创建丰富且具有交互性的 2D 和 3D 地理数据应用平台。它极为重要的功能是允许开发者通过地图视觉化地理位置信息。
复制链接

扫一扫