说明：本篇博文介绍的是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. 介绍下Shell中的${}、##和%%使用范例

    假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得到不同的值:${file#*/}:删掉第一个 / 及其左边的字符串:dir1/d ...

  2. Node.js 替换文档内容

    server.js代码: var http=require('http'); var fs=require('fs'); var server=http.createServer(function(r ...

  3. Android学习（十九）Dialog对话框

    一.什么是Dialog对话框 对话框是当前页面中弹出的一个小窗口,用于显示重要的提示信息,提示用户输入信息,确认信息,或者显示某种状态,如下载进度,退出提示等等.用户需要与对话框进行交互,才能回到原窗 ...

  4. 分组password算法

    代换,S盒.扩散和混淆,这些概念构成了分组password学的基础. 假设明文和密文的分组长度都为n比特,则明文的每个分组都有2n个可能的取值; 代换: 为使加密运算可逆(即解密运算可行),明文的每个 ...

  5. jmeter压测-负载配置

    jmeter 压测 一般压测的时间是10-15分钟 TPS:服务端每秒钟处理的请求数  越大越好 响应时间 :越短越好 并发用户数  也就是多少并发 指标给你:tps要达到多少 响应时间要达到多少 并 ...

  6. ios 抓包工具 ios青花瓷charles

    iOS_青花瓷Charles抓包,ios青花瓷charles 使用青花瓷Charles抓取手机端的网络请求: 第一步,下载安装并打开Charles 第二步,去掉菜单[Proxy]以下的[Mac OSX ...

  7. Hadoop datanode无法启动

    原因是多次 hadoop namenode -format  导致 datanode 的version 里的Cluster-Id 不一致 这个Cluster-Id的位置在:  自己设置的数据临时文件/ ...

  8. C/C++ 内存管理总结

    C内存管理 存储时: 执行程序在存储时(没有调入到内存)分为代码区(text).数据区(data)和未初始化数据区(bss)3个部分. 1 代码区(text segment) 存放CPU执行的机器指令 ...

  9. list集合转换成json类型

    public String gettext(HttpServletRequest request,HttpServletResponse response){ List<xuanhuan_> ...

  10. Python学习笔记（一）三步走安装pip

    pip是用来方便地管理Python的第三方包的,由于此前玩Python仅仅是浅尝辄止,用的是python(x,y),但是这里并不代表你想用什么包都能从里面找到的,所以我把python(x,y)卸了,然 ...