arcgis信息窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Info Template</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<style>
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript" src="js/InfoTip.js"></script>
<script type="text/javascript">
var map, iTip;
require(["dojo/parser", "esri/geometry/Extent", "esri/Color", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point", "esri/SpatialReference", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/store/JsonRest", "dojo/domReady!"],
function (parser, Extent, Color, Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, JsonRest) {
parser.parse(); var extent = new Extent({
"xmin": -122.53154754638672, "ymin": 37.68379211425781,
"xmax": -122.32555389404297, "ymax": 37.82112121582031,
"spatialReference": { "wkid": 4326 }
})
map = new Map("mapDiv", {
extent: extent
});
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(agoLayer); iTip = new InfoTip("i2Div", "infoTip white", map.position, true); var infoTemplate = new InfoTemplate("${name}", "${url}");
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.5]),
8),
new Color([0, 0, 255])
); map.on("load", addPointGraphics); function addPointGraphics() {
var store = new JsonRest({ target: "Data/PointData.json" });
store.query({ id: "*" }).then(function (result, request) {
var items = result.items;
for (var i = 0; i < items.length; i++) {
var attr = {
"name": items[i].name,
"url": items[i].url
};
var loc = new Point(items[i].x, items[i].y, new SpatialReference({ wkid: 4326 }));
var graphic = new Graphic(loc, symbol, attr, infoTemplate);
map.graphics.add(graphic);
}
}); map.graphics.on("mouse-over", g_onMouseOverHandler);
map.graphics.on("mouse-out", g_onMouseOutHandler);
} function g_onMouseOverHandler(evt) {
if (evt.graphic.attributes) {
var img = '<img src="data:images/i_flag.png"/ style="height:20px;width20px;border:0;">';
iTip.setContent(img + " " + evt.graphic.attributes.name);
iTip.show(evt.screenPoint);
}
} function g_onMouseOutHandler(evt) {
iTip.hide();
}
}
);
</script>
</head>
<body class="claro">
<h1>具有淡出/淡入效果的信息窗口</h1>
<div id="mapDiv" style="width:600px;height:400px;">
</div>
<p>
选择信息窗口的位置（默认为上部）：
<input type="button" value="左" onclick="iTip.setLocation('left')"/>
<input type="button" value="右" onclick="iTip.setLocation('right')"/>
<input type="button" value="上" onclick="iTip.setLocation('top')"/>
<input type="button" value="下" onclick="iTip.setLocation('bottom')"/>
</p>
<p>
选择背景样式（默认为白色）：
<input type="button" value="绿色" onclick="iTip.setClass('infoTip green')"/>
<input type="button" value="背景图片" onclick="iTip.setClass('infoTip bgimage')"/>
<input type="button" value="黑色" onclick="iTip.setClass('infoTip roundcorner black')"/>
<input type="button" value="白色" onclick="iTip.setClass('infoTip shadow')"/>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Info Template</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<style>
html, body, #mapDiv{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript">
var map;
require(["dojo/parser", "esri/geometry/Extent", "esri/Color", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point", "esri/SpatialReference", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/store/JsonRest", "dojo/domReady!"],
function (parser, Extent, Color, Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, JsonRest) {
parser.parse(); var extent = new Extent({
"xmin": -122.53154754638672, "ymin": 37.68379211425781,
"xmax": -122.32555389404297, "ymax": 37.82112121582031,
"spatialReference": { "wkid": 4326 }
})
map = new Map("mapDiv", {
extent: extent
});
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(agoLayer); var infoTemplate = new InfoTemplate("${name}", "${url}");
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.5]),
8
),
new Color([0, 0, 255])
); map.on("load", addPointGraphics); function addPointGraphics() {
var store = new JsonRest({ target: "Data/PointData.json" });
store.query({ id: "*" }).then(function (result, request) {
var items = result.items;
for (var i = 0; i < items.length; i++) {
var attr = {
"name": items[i].name,
"url": items[i].url
};
var loc = new Point(items[i].x, items[i].y, new SpatialReference({ wkid: 4326 }));
var graphic = new Graphic(loc, symbol, attr, infoTemplate);
map.graphics.add(graphic);
}
}); map.graphics.on("mouse-over", g_onMouseOverHandler);
map.graphics.on("mouse-out", g_onMouseOutHandler);
} function g_onMouseOverHandler(evt) {
if (evt.graphic.attributes) {
map.infoWindow.setTitle(evt.graphic.attributes.name);
map.infoWindow.setContent(evt.graphic.attributes.url);
map.infoWindow.show(evt.screenPoint);
}
} function g_onMouseOutHandler(evt) {
map.infoWindow.hide();
}
}
);
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
arcgis信息窗口的更多相关文章
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
- ArcGIS api for javascript——加载查询结果，单击显示信息窗口
描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...
- ArcGIS api for javascript——查询，然后单击显示信息窗口
描述 本例展示如何配置查询任务为示例的工作流程: 1.用户单击一个要素来加亮显示. 2.用户再一次单击要素来查看属性信息的 InfoWindow. 本例查询USA州,因此ESRI_StateCityH ...
- ArcGIS api for javascript——查询，立刻打开信息窗口
描述 本例展示了当一个要素被查询时如何立刻打开一个InfoWindow.信息窗口能被用来将要素的属性格式化成用户易读的格式. 本例中,地图和查询任务都使用ESRI sample server上的服务K ...
- ArcGIS api for javascript——显示一个信息窗口
描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...
- 在DevExpress程序中使用SplashScreenManager控件实现启动闪屏和等待信息窗口
在我很早的WInform随笔<WinForm界面开发之"SplashScreen控件">有介绍如何使用闪屏的处理操作,不过那种是普通WInform和DevExpress ...
- 百度地图API 批量添加 带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
随机推荐
- adb的安装及配置
1.下载adb的安装包进行下载 2.将安装报进行解压 3.配置环境变量,将adb的根目录添加到path环境变量中 4.在终端命令行中输入adb servion命令,检查是否安装成功,如显示版本号则安 ...
- Ubuntu 16.04下apt安装ssh及卸载（含FileZilla 使用过程）
前言:文件发布测试过程中需要使用Windows和Ubuntu实现文件共享. 以下内容转载自:http://blog.csdn.net/jiang13479/article/details/535014 ...
- vue-cli 构建项目
1.安装vue-cli和webpack npm install webpack -g npm install vue-cli -g 2.vue-cli初始化项目 vue init webpack-si ...
- 编程之法：面试和算法心得（字符串包含java实现）
内容全部来自编程之法:面试和算法心得一书,实现是自己写的使用的是java 题目描述 给定两个分别由字母组成的字符串A和字符串B,字符串B的长度比字符串A短.请问,如何最快地判断字符串B中所有字母是否都 ...
- mybatis的Example的使用
MyBatis的Mapper接口以及Example的实例函数及详解 一.mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserEx ...
- [Ceoi2010]Pin
#2012. [Ceoi2010]Pin Online Judge:Bzoj-2012 Label:容斥,STL 题目描述 给出N(2<=N<=50000)个长度为4的字符串,问有且仅有D ...
- 玩转xargs
xargs命令可以把标准输入数据转换成命令行参数.也可以将单行或多行文本输入转换成其他格式,是构建单行命令的重要组件之一. xargs命令应该紧跟在管道操作符之后,以stdin作为主要的源数据流,使用 ...
- [转]TabControl Style in WPF
一般 我们在使用TabControl时,需要添加多个tab页,然后把不需要的tab页通过鼠标右键点击ContextMenu菜单的形式进行关闭,下面的代码是直接在tab页上面添加按钮事件,直接点击关闭按 ...
- idea打包可执行jar
(1)在项目上鼠标右键 --> Open Module Settings 或者点击工具栏上的 (2)Artifacts --> + --> JAR --> From modul ...
- LUOGU P3157 [CQOI2011]动态逆序对(CDQ 分治)
传送门 解题思路 cdq分治,将位置看做一维,修改时间看做一维,权值看做一维,然后就转化成了三维偏序,用排序+cdq+树状数组.注意算删除贡献时要做两次cdq,分别算对前面和后面的贡献. #inclu ...