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 ...
随机推荐
- 线性SVM分类器实战
1 概述 基础的理论知识参考线性SVM与Softmax分类器. 代码实现环境:python3 2 数据处理 2.1 加载数据集 将原始数据集放入"data/cifar10/"文件夹 ...
- 11-7-this的最基本认识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CAS服务端配置
1. 产生SERVER的证书库文件 ketool工具详细运用:http://www.micmiu.com/lang/java/keytool-start-guide/ 首先确保jdk环境变了正确配置才 ...
- PKU 百练OJ Arbitrage
http://bailian.openjudge.cn/practice/2240/ #include <iostream> #include <string> #includ ...
- What is python .. (“dot dot”) notation syntax?
What you have is a float literal without the trailing zero, which you then access the __truediv__met ...
- NOIP2016提高A组 A题 礼物—概率状压dp
题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有n种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种礼物的喜悦值不能重复获得). 每次,店员会 ...
- psu online course
https://onlinecourses.science.psu.edu/statprogram/programs Graduate Online Course Overviews Printer- ...
- MySQL时间格式转换
1.时间转换成特定字符串 例:select DATE_FORMAT(now(),'%Y-%m-%d %H:%i::%s'); --> '2019-10-16 10:59::18' 2.一种字符串 ...
- jmeter参数化之用户自定义变量
1. 用badboby进行录制,录制完成后保存,用JMeter格式进行保存,如:登陆.jmx 2. 在jmeter中打开保存的文件登陆.jmx. 3.线程组右击-添加-配置元件-用户定 ...
- js 打开app应用，如果没有安装就去下载
废话不多说,直接上代码 var APPCommon = { iphoneSchema: 'XingboTV://', iphoneDownUrl: 'https://itunes.apple.com/ ...