ArcGIS API For JavaScript - 地图组件，地图放大缩小与平移效果

风轻轻~

已于 2022-06-30 15:04:54 修改

阅读量3.2k

点赞数

分类专栏： # 地图__ArcGIS Api For JS 文章标签： arcgis

于 2020-06-03 15:36:38 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/106525374

版权

地图__ArcGIS Api For JS 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

一. 项目中引入需要的js文件，css样式文件

arcgis的js文件及css样式文下载地址： https://download.csdn.net/download/Jie_1997/12438411

实例代码如下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
    <title>title</title>
    @*jQuery*@
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    @*引入js及css*@
    <link href="~/Content/esri.css" rel="stylesheet" />
    <link href="~/Content/tundra.css" rel="stylesheet" />
    <script src="~/Scripts/init.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        require(["esri/map"],
            function (Map) {
                map = new Map("map", {
                    center: [118.886885, 32.5219131],
                    zoom: 16,
                    basemap: "satellite",
                    logo: false,
                    slider: true,//开启放大缩小
                });
                //上北
                $("#north").click(function () {
                    map.panUp();
                });
                //下南
                $("#south").click(function () {
                    map.panDown();
                });
                //左西
                $("#west").click(function () {
                    map.panLeft();
                });
                //右东
                $("#east").click(function () {
                    map.panRight();
                })
            });
    </script>
</head>
<body>
    <div id="map" style="position: absolute;"></div>
    <div style="position: absolute;display: flex;justify-content: center;width: 100%;">
        <img id="north" style="height:4em;cursor:pointer;" src="~/Content/top.png" />
    </div>
    <div style="position: absolute;display: flex;height: 100%;align-items: center;">
        <img id="west" style="height:4em;cursor:pointer;" src="~/Content/left.png" />
    </div>
    <div style="position: absolute;display: flex;height: 100%;align-items: center;right: 0;">
        <img id="east" style="height:4em;cursor:pointer;" src="~/Content/right.png" />
    </div>
    <div style="position: absolute;display: flex;justify-content: center;width: 100%;bottom:0;">
        <img id="south" style="height:4em;cursor:pointer;" src="~/Content/bot.png" />
    </div>
</body>
</html>