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

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

前言

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

  1. 基本地图展示
  2. 搜索功能
  3. 图形绘制
  4. 图形点击显示详情
  5. 图形删除

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

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

这里写图片描述

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

这里写图片描述

绘制的图形:

这里写图片描述

左键点击图形产生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;
            
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值