ArcGIS API for Javascript 3.21地图开发实例（一、图形绘制和删除及popup弹出层）

最新推荐文章于 2022-03-04 11:08:41 发布

天降风云

最新推荐文章于 2022-03-04 11:08:41 发布

阅读量8.9k

点赞数 8

本文链接：https://blog.csdn.net/u012907049/article/details/77529076

版权

本文介绍了使用ArcGIS API for JavaScript 3.21进行地图开发，包括基本地图展示、搜索功能、图形绘制与删除、图形点击详情展示以及右键删除功能。示例代码展示了如何创建popup、map实例，以及绑定事件来实现图形操作。文章提供了代码下载链接，供读者进一步研究。

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

前言

Arcgis是一个地理系统的平台，可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api，也就是web端的api进行开发。我们使用的版本是3.21，这个版本包含了完整的2D地图的api。如果想对3D地图进行开发，可以使用4.4版本的api。在这个demo中，我们要完成如下的几个功能:

基本地图展示
搜索功能
图形绘制
图形点击显示详情
图形删除

在本篇博客的结尾可以看到本例的下载链接。

先来看程序的截图:
首先是页面打开时:

接下来是使用搜索功能时：

绘制的图形：

左键点击图形产生popup：

在右键点击图形的时候弹出删除按钮：

代码

接下来是程序的完整代码。除了引入arcGIS包之外，也引入了jquery包，jqeury在本例中并非必需，主要是用于后面实例的开发。

<!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>Arcgis Demo</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">

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

        #search {
            z-index: 20;
            margin: auto;
            height: 95px;
            width: 400px;
            margin: auto;
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
        }

        #info {
            top: 200px;
            color: #444;
            height: auto;
            font-family: arial;
            left: 16px;