说明：本篇博文介绍的是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. JWT笔记(2)

    上文对JWT模块进行了一个简单的分析．这篇文章稍微做出一些深入的了解． 一,Header篡改攻击 因为JWT的Header是强制有效并且是明文传输(Base64URL编码,几乎等同于明文)．那么恶意用 ...

  2. Poj 4227 反正切函数的应用

    Description 反正切函数可展开成无穷级数,有例如以下公式 (当中0 <= x <= 1) 公式(1) 使用反正切函数计算PI是一种经常使用的方法.比如,最简单的计算PI的方法: ...

  3. 13.1Springboot 之 静态资源路径配置

    Spring 静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/ ...

  4. NGINX 缓存使用指南

    NGINX 缓存使用指南 [proxy_cache] Nginx 一个web缓存坐落于客户端和“原始服务器(origin server)”中间,它保留了所有可见内容的拷贝.如果一个客户端请求的内容在缓 ...

  5. vue笔记二

    七.列表渲染 1.示例 <ul id="example-2"> <li v-for="(item, index) in items"> ...

  6. 扩充STL-编写自己的迭代器

    这里的迭代器能够与STL组件共同工作,是对STL的一种扩充.   自定义迭代器必须提供iterator_traits的五种特性,分别是迭代器类型.元素类型.距离类型.指针类型与reference类型. ...

  7. Hive命令行经常使用操作（数据库操作，表操作）

    数据库操作 查看全部的数据库 hive> show databases ; 使用数据库default hive> use default; 查看数据库信息 hive > descri ...

  8. ASP.NET CORE RAZOR ：向 Razor 页面应用添加模型

    本文来自:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/model 在本部分中将添加用于管理数据库中的电影的类. ...

  9. git revert 后悔了 还原修改前的版本 + git 常用命令

    昨天手残 然后在GitHub for windows 上点了revert 然后就给重置了 更手残的是又给同步了 .  但是 GitHub 会保留之前的版本 . 只要删掉本次修改就可. 解决方案:  g ...

  10. springBoot+springCloud学习笔记

    尊重原创:https://www.jianshu.com/p/492dfefa2735 SpringBoot 配置优先级 在命令行中传入的参数 如:java -jar storeMs.jar --se ...