1、运行效果图

说明：这篇博文介绍的书签位于地图之上

有关博文中引用的API文件 怎么iis上部署，请参考我前面的博文

2、HTML代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>Bookmark Widget (Editable)</title>

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/nihilo/nihilo.css"/>

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" />

     <style>

      html, body, #map {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      .bookmark-container {

        position: absolute;

        top: 100px;

        left: 15px;

        padding: 1rem;

        background: #ffffff;

        border-radius: 4px;

        border: 1px solid #eeeeee;

      }

    </style>

       <script>

           var dojoConfig = {

               parseOnLoad: true     // 解析

           };

    </script>

       <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>

      <script>

          // 导入包

          dojo.require("dijit.layout.BorderContainer");

          dojo.require("dijit.layout.ContentPane");

          dojo.require("dijit.form.DropDownButton");

          dojo.require("esri.map");

          dojo.require("esri.dijit.Bookmarks");

          var map, bookmarks;

          function init() {

              map = new esri.Map("map", { center: [-100, 40], zoom: 4 });

              MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer

              ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");

              map.addLayer(MyTiledMapServiceLayer);

              // 书签可以被指定为一个数组对象结构:

              // { extent: <esri.geometry.Extent>, name: <some string> }

              var bookmarks_list = [

                 ];

              // 创建书签组件

              bookmarks = new esri.dijit.Bookmarks({

                  map: map,

                  editable: true,    // 可允许编辑。默认false则只读模式

                  bookmarks: bookmarks_list        // Array / JSON

              }, dojo.byId('bookmarks'));

              // Add bookmarks to the widget

              Object.keys(bookmarks_list).forEach(function (bookmark) {

                  bookmarks.addBookmark(bookmarkJSON[bookmark]);

              });

              // 绑定移除标签事件

              dojo.connect(bookmarks, "onRemove", function () {

                  alert('删除成功');

              });

          }

          // 加载时显示

          dojo.ready(init);

    </script>

</head>

  <body class="nihilo">

    <div id="map"></div>

    <div class="bookmark-container">

      <div id="bookmarks"></div>

    </div>

  </body>

</html>

其中的代码

 map = new esri.Map("map", { center: [-100, 40], zoom: 4 });

              MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer

              ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");

              map.addLayer(MyTiledMapServiceLayer);

还可以替换为下面的形式：

map = new esri.Map("map", {
basemap: "topo",
center: [-100, 40],
zoom: 4
});

ArcGIS API for javascript Bookmarks（书签）示例2的更多相关文章

  1. ArcGIS API for JavaScript Bookmarks(书签)

    说明:本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ,书签的作用是,把地图放大到一个地方 添加书签,书签名称可以和地图名称一直,单击标签 地图会定 ...

  2. 创建ArcGIS API for JavaScript的第一个示例程序

    原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...

  3. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...

  4. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

  5. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  6. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  7. 【1】ArcGIS API for JavaScript 4.5/4.6 本地部署

    惭愧,和我的学弟比起来,我所开始接触前端开发,ArcGIS API for JavaScript的时间和深度远远不及于他. 一年之尾,亦是一年之始,我也将正式开始我的博客生涯.本人在校学习并且做项目, ...

  8. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  9. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

随机推荐

  1. ISP模块之RAW DATA去噪（二）--BM3D算法

    在正式开始本篇文章之前,让我们一起回顾一下CFA图像去噪的一些基本思路与方法.接着我会详细地和大家分享自己学习理解的BM3D算法,操作过程,它的优缺点,最后会给出算法效果图供参考. 在ISP模块里,研 ...

  2. ELKStack日志离线系统

    通过Filebeat抽取数据到logstash中,转存到ElasticSearch中,最后通过Kibana进行展示 https://www.ibm.com/developerworks/cn/open ...

  3. 使用Zxing 一维码

    最近看到满大街的二维码扫码有惊喜,对二维码也有过一些了解,想看看到底是什么原理,在网上找了一些资料,自己弄了一个实例,采用的是MVC,贴出来分享一下 一维码生成 Controller public A ...

  4. notepad++ 在每一行最后加上逗号

    1.全选缩进对齐 2.替换功能,入下全部替换 3.在入下替换 4.结果 完成!

  5. shell 重定向输入

    #!/bin/bash NC_START="nc 192.168.76.227 9999" LOOP= ;i<$LOOP;i++)) do $NC_START << ...

  6. SQL Server“吃内存”的解决

    现象:Web服务器中SQL Server占用内存非常高,加内存后,SQL Server又吃掉新加的内存,好像内存永远不够用一样. 分析:其实这并不一定是由于SQL Server活动过度造成的,在启动S ...

  7. URL相对路径和URL绝对路径

    经常在页面中引用图片,html页面等,自己常常弄错相对路径和绝对路径,今天写下此文总结一下.    直接举例说明吧. 在 D:\例子\html下有这么几个文件和文件夹     1.若引用的资源和本身在 ...

  8. Yii 获得当前控制器和方法

    [怎样获得当前控制器和方法] 控制器:$this -> id ; 方法:$this->action->id ; 这主要是用在视图中,进行高亮显示. <div id=" ...

  9. 操作log.py

    # 把双数日期的日志,里面给随便写点东西# 1.获取到log目录下的所有文件os.walk()# 2.根据文件名来判断,是否是双数日期,分割字符串,取到日期# 3.12%2==0# 4.打开这个文件 ...

  10. ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...