说明：本篇博文介绍的是ArcGIS API for JavaScript中的 Bookmarks(书签) ，书签的作用是，把地图放大到一个地方 添加书签，书签名称可以和地图名称一直，单击标签 地图会定位到刚才选中的地方。大致就是这个意思！

有关ArcGIS API for JavaScriptde的引用文件的部署 请参考我的前面的博客

原文地址：https://blog.csdn.net/xiaokui_wingfly/article/details/8500026

1、运行效果

2、html代码

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Bookmark Widget</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 {

        height: 100%; width: 100%;

        margin: 0; padding: 0;

      }

      body{

        background-color: #fff; overflow:hidden;

        font-family: sans-serif;

      }

      #header {

        padding-top: 4px;

        padding-left: 15px;

        background-color:#444;

        color:#fff;

        font-size:16pt;

        text-align: left;

        font-weight:bold;

        height:55px;

      }

      #subheader {

        font-size:small;

        color: #cfcfcf;

        text-align:left;

      }

      #bookmarks-wrapper {

        position: absolute;

        z-index: 40;

        top: 15px;

        right: 30px;

        background: transparent;

        font-size: 12pt;

        color: #444;

      }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }

      #ds-h div { width: 100%; }

      #ds-l div { height: 100%; }

      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }

      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }

      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }

      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }

      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }

      #ds .h1 { height: 1px; }

      #ds .h2 { height: 2px; }

      #ds .h3 { height: 3px; }

      #ds .h4 { height: 4px; }

      #ds .h5 { height: 5px; }

    </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", {

                basemap: "topo",

                center: [-100, 40],

                zoom: 4

            });

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

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

            var bookmarks_list = [{

                "extent": {    // 范围

                    "spatialReference": {    // 空间参考

                        "wkid": 102100

                    },

                    "xmin": -14201669,    // 左下角X

                    "ymin": 4642975,        // 左下角Y

                    "xmax": -13021482,    // 右上角X

                    "ymax": 5278931        // 右上角Y

                },

                "name": "Northern California(北加州)"

            }, {

                "extent": {

                    "spatialReference": {

                        "wkid": 102100

                    },

                    "xmin": -8669334,

                    "ymin": 4982379,

                    "xmax": -8664724,

                    "ymax": 4984864

                },

                "name": "Central Pennsylvania(宾夕法尼亚州中部)"

            }];

            // 创建书签组件

            bookmarks = new esri.dijit.Bookmarks({

                map: map,

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

                bookmarks: bookmarks_list        // Array / JSON

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

            // 绑定移除标签事件

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

                alert('删除成功,32版本尚未找到二次确认删除标签,如有方案,请留言,多谢');

            });

        }

        // 加载时显示

        dojo.ready(init);

    </script>

  </head>

  <body class="nihilo">

    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer"  data-dojo-props="design:'headline',gutters:false"  style="width: 100%; height: 100%; margin: 0;">

      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Bookmark Widget Sample

        <div id="subheader">书签</div>

        <!-- 书签在一个下拉框的里面 -->

        <div id="bookmarks-wrapper">

          <div data-dojo-type="dijit.form.DropDownButton">

            <span>Bookmarks(书签)</span>

            <div data-dojo-type="dijit.TooltipDialog">

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

            </div>

          </div>

        </div>

      </div>

      <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

        <div id="ds"> <!-- 阴影div -->

          <div id="ds-h">

            <div class="ds h1 o1"></div>

            <div class="ds h2 o2"></div>

            <div class="ds h3 o3"></div>

            <div class="ds h4 o4"></div>

            <div class="ds h5 o5"></div>

          </div>

        </div> <!-- end drop shadow divs -->

      </div>

    </div>

  </body>

</html>

其中的代码

   map = new esri.Map("map", {

                basemap: "topo",

                center: [-100, 40],

                zoom: 4

            });
也可以替换为以下形式

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);

ArcGIS API for JavaScript Bookmarks(书签)的更多相关文章

  1. ArcGIS API for javascript Bookmarks（书签）示例2

    1.运行效果图 说明:这篇博文介绍的书签位于地图之上 有关博文中引用的API文件 怎么iis上部署,请参考我前面的博文 2.HTML代码 <!DOCTYPE html> <html ...

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

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

  3. ArcGIS API for JavaScript介绍

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

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

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

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

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

  6. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  7. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  8. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

  9. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

随机推荐

  1. CvArr、Mat、CvMat、IplImage、BYTE转换

    一.Mat类型:矩阵类型,Matrix.     在openCV中.Mat是一个多维的密集数据数组. 能够用来处理向量和矩阵.图像.直方图等等常见的多维数据.     Mat有3个重要的方法:     ...

  2. ASP.NET MVC学习---（四）MVC初窥

    前面三篇大幅度的介绍了EF框架 这并不是没有道理的 现在使用mvc开发一般都离不开ef 因为它们相结合可以为你带来完美的体验 当然 前面所描述的仅仅是ef框架的冰山一角 它是一门学问很深的功课 如果你 ...

  3. ECSHOP去版权（删除ECSHOP所有标识）

    前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ecshop前者”ECSHOP演示站”在后台商店设置 – 商店标题修改后者” Powered by ecshop”打开 ...

  4. 安装jenkins插件的两种方法

    安装jenkins插件有两种方法,一种是在线安装,一种是离线安装.两种方式介绍如下: 1.如果服务器可以上网,那边选择在线安装最好不过了,安装流程为:系统管理----插件管理---选择需要的插件直接安 ...

  5. K-近邻算法的Python实现 ： 源代码分析

    网上介绍K-近邻算法的样例非常多.其Python实现版本号基本都是来自于机器学习的入门书籍<机器学习实战>,尽管K-近邻算法本身非常easy,但非常多刚開始学习的人对其Python版本号的 ...

  6. 在windows上一键编译各种版本的protobuf(2017-12-05修改)

    所需工具 : cmake  for  windows 和  git for windows 原理:protobuf 是google的一个开源项目,其源代码在github上可以下载到,并且源码都采用cm ...

  7. Android无数据线调试方法

    平时在Android设备上调试程序.通常是将Android设备用数据线和PC机相连. 可是,在没有数据线的情况下也能够: 1.将PC机和Android设备连到同一网段. 2.获取Android设备的I ...

  8. unordered_map 与 map 的对比（转）

    unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...

  9. AutoWare 使用

      1.安装readme当中的要求,安装依赖库   52 sudo apt-get install ros-indigo-desktop-full ros-indigo-nmea-msgs ros-i ...

  10. Spring使用经验之StandardServletMultipartResolver实现文件上传的基本配置

    Note:Spring使用版本是4.1.6.RELEASE 1. 在实现了AbstractAnnotationConfigDispatcherServletInitializer的类中重载custom ...