ArcGIS API for JavaScript Bookmarks(书签)
说明:本篇博文介绍的是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(书签)的更多相关文章
- ArcGIS API for javascript Bookmarks(书签)示例2
1.运行效果图 说明:这篇博文介绍的书签位于地图之上 有关博文中引用的API文件 怎么iis上部署,请参考我前面的博文 2.HTML代码 <!DOCTYPE html> <html ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...
- ArcGIS API for JavaScript介绍
ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API For JavaScript 开发(二)基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- 基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
- ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for JavaScript 4.0(一)
原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
随机推荐
- CvArr、Mat、CvMat、IplImage、BYTE转换
一.Mat类型:矩阵类型,Matrix. 在openCV中.Mat是一个多维的密集数据数组. 能够用来处理向量和矩阵.图像.直方图等等常见的多维数据. Mat有3个重要的方法: ...
- ASP.NET MVC学习---(四)MVC初窥
前面三篇大幅度的介绍了EF框架 这并不是没有道理的 现在使用mvc开发一般都离不开ef 因为它们相结合可以为你带来完美的体验 当然 前面所描述的仅仅是ef框架的冰山一角 它是一门学问很深的功课 如果你 ...
- ECSHOP去版权(删除ECSHOP所有标识)
前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ecshop前者”ECSHOP演示站”在后台商店设置 – 商店标题修改后者” Powered by ecshop”打开 ...
- 安装jenkins插件的两种方法
安装jenkins插件有两种方法,一种是在线安装,一种是离线安装.两种方式介绍如下: 1.如果服务器可以上网,那边选择在线安装最好不过了,安装流程为:系统管理----插件管理---选择需要的插件直接安 ...
- K-近邻算法的Python实现 : 源代码分析
网上介绍K-近邻算法的样例非常多.其Python实现版本号基本都是来自于机器学习的入门书籍<机器学习实战>,尽管K-近邻算法本身非常easy,但非常多刚開始学习的人对其Python版本号的 ...
- 在windows上一键编译各种版本的protobuf(2017-12-05修改)
所需工具 : cmake for windows 和 git for windows 原理:protobuf 是google的一个开源项目,其源代码在github上可以下载到,并且源码都采用cm ...
- Android无数据线调试方法
平时在Android设备上调试程序.通常是将Android设备用数据线和PC机相连. 可是,在没有数据线的情况下也能够: 1.将PC机和Android设备连到同一网段. 2.获取Android设备的I ...
- unordered_map 与 map 的对比(转)
unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...
- AutoWare 使用
1.安装readme当中的要求,安装依赖库 52 sudo apt-get install ros-indigo-desktop-full ros-indigo-nmea-msgs ros-i ...
- Spring使用经验之StandardServletMultipartResolver实现文件上传的基本配置
Note:Spring使用版本是4.1.6.RELEASE 1. 在实现了AbstractAnnotationConfigDispatcherServletInitializer的类中重载custom ...