说明：本篇博文介绍的是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. SuperMap iClient如何使用WMTS地图服务(转)

    http://blog.sina.com.cn/s/blog_6259ebd50102v221.html 什么是WMTS服务 WMTS,切片地图Web服务(Web Map Tile Service)当 ...

  2. Shell--变量键盘读取、数组与声明：read,array,declare

    1.read read [-pt] variable -P:后面可以接提示信息 -t:后面可以接等待的秒数,时间到后等待结束 read后面不加任何参数,直接加变量名称,那么就会主动出现一个空白行等待你 ...

  3. 高效重构 C++ 代码

    引言 Martin Fowler的<重构:改善既有代码的设计>一书从2003年问世至今已有十几年时间了,按照计算机领域日新月异的变化速度,重构已经算是一门陈旧的技术了.但是陈旧并不代表不重 ...

  4. C++ 模板应用 实现一个Queue 队列

    #include<iostream> using namespace std; template <typename T> class Queue { public: Queu ...

  5. 2017.6.29 移除再导入maven module到IDEA中时提示： Unable to proceed. Nothing found to import.

    解决办法来自:https://stackoverflow.com/questions/18278016/re-importing-modules-into-intellij 场景: 将其中一个modu ...

  6. 百度地图 Android SDK - 标注（Marker）的基本使用

    标注(Marker)是开发人员最常使用的地图覆盖物志一.今天就来向大家介绍一些标注(Marker)的最基本用法! 实现目标: 1.构建基础地图页面: 2.在地图的中心点处加入 Marker: 3.实现 ...

  7. 12. 改变JDK编译版本【从零开始学Spring Boot】

    spring Boot在编译的时候,是有默认JDK版本的,如果我们期望使用我们要的JDK版本的话,那么要怎么配置呢? 这个只需要修改pom.xml文件的<build>-- <plug ...

  8. iptables firewall-cmd

    iptables -F iptables -P INPUT DROP iptables -P FORWARD DROP iptables -P OUTPUT ACCEPT iptables -A IN ...

  9. cordova与ios native code交互的原理

    非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中 ...

  10. Velocity.js动画库使用

    1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2 ...