ArcGIS API For Javascript之地图基本加载与显示，地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现

最新推荐文章于 2024-08-01 15:12:32 发布

wulafly

最新推荐文章于 2024-08-01 15:12:32 发布

阅读量2.1w

点赞数 11

分类专栏： ArcGIS，Javascrip，web地图，Esri 前端开发文章标签： ArcGIS Javascrip web地图 Esri

本文链接：https://blog.csdn.net/wulafly/article/details/70147690

版权

本文介绍如何使用ArcGIS API for Javascript构建web地图，包括地图加载、切换、缩放、定位、比例尺、鹰眼图、坐标显示及查询搜索功能的详细实现过程。

摘要由CSDN通过智能技术生成

在前面的各项安装配置完成后，开始进行ArcGIS API for Javascript网页地图制作。

首先利用Html+Javascript前端编程实现底层地图加载显示，地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>final Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">

    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }

        #BasemapToggle {
            position: absolute;
            right: 20px;
            top: 20px;
            z-index: 50;
        }

        #HomeButton {
            left: 25px;
            position: absolute;
            top: 93px;
            z-index: 50;
        }

        #LocateButton {
            left: 25px;
            position: absolute;
            top: 130px;
            z-index: 50;
        }

        #search {
            display: block;
            position: absolute;
            z-index: 2;
            top: 25px;
            left: 75px;
        }
    </style>
    <script src=&#