说明：本篇博文介绍的是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. Spring注释事务失效及解决办法

    如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将service bean配置到xml文件中才行  在主容器中(applicationContext.xml),将C ...

  2. Javascript中的高阶函数介绍

    高阶函数:高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以下面的Hello,Wo ...

  3. JS中的柯里化及精巧的自动柯里化实现

    一.什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 C ...

  4. 设置textField的placegolder的字体大小和字体颜色

           由于项目的主题颜色为灰黑色,所以当使用textField的时候,placeholder内的字体默认是灰色,当程序执行的时候,差点儿看不到.        翻来翻去找到一种比較简单地方法, ...

  5. SpringMVC 下载XLS文档的设置

    页面设置参考上文.SpringMVC 下载文本文档的设置 此文是关于xls文档下载的,这个文档使用Apache的POI生成,需要的jar包可以从下面地址下载: http://pan.baidu.com ...

  6. STL学习笔记（排序算法）

    STL提供了好几种算法对区间内的元素排序.出来完全排序外,还支持局部排序. 对所有元素排序 void sort(RandomAccessIterator beg,RandomAccessIterato ...

  7. xpinyin-函数返回多个值-lambda匿名函数-列表生成式-三元表达式

    import xpinyinp=xpinyin.Pinyin() #实例化print(p.get_pinyin('小白','')) 函数返回多个值:1.函数如果返回多个值的话,它会把这几个值放到一个元 ...

  8. viewDidLayoutSubviews在ios7上导致应用崩溃

    在ios8中使用viewDidLayoutSubviews,应用正常运行,没有问题,但是应用在ios7上运行的时候,报错,导致应用崩溃,错误信息类似: Cannot find executable f ...

  9. Andrew Ng机器学习笔记+Weka相关算法实现（五）SVM最优间隔和核方法

    这一章主要解说Ng的机器学习中SVM的兴许内容.主要包括最优间隔分类器求解.核方法. 最优间隔分类器的求解 利用以一篇讲过的的原始对偶问题求解的思路,我们能够将相似思路运用到SVM的求解上来. 详细的 ...

  10. 关于Linux网络配置

    Linux网络配置 一:什么是网络接口卡以及如何查看网络接口的网络信息:在Linux系统中,主机的网络接口卡通常称为“网络接口”,我们可以使用ifconfig命令来查看网络 接口的信息(普通用户使用/ ...