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 ...
随机推荐
- DOS常用命令详解
DOS常用命令详解 dir 列文件名 deltree 删除目录树 cls 清屏 cd 改变当前目录 copy 拷贝文件 diskcopy 复制磁盘 del 删除文件 format 格式化磁盘 edit ...
- ip-up脚本参数
pppoe连接建立后,系统自动调用/etc/ppp/ip-up脚本. 其参数如下面文件所示,第4个参数是系统获得的动态ip.#!/bin/bash## Script which handles the ...
- 19-10-26-F
ZJ一下: T1码了暴力但是并没有开出来身高的神奇性质…… T2打模拟,但是只摸了卅分 T3不会,码了一个测试点分治.10分 TJ一下: T1. 发现身高范围在$[140,200]$时,直接去重跑$\ ...
- c++ 读取８, 10, 16进制数
c++基础知识都快忘了..记一下 dec-十进制(默认) oct-八进制 hex-十六进制
- [C#] 生成 (web): 未能加载文件或程序集“Microsoft.CSharp, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7
有时候编译asp.net会遇到奇怪的错误: 生成 (web): 未能加载文件或程序集"Microsoft.CSharp, Version=4.0.0.0, Culture=neutral, ...
- CentOS 6.5 usb安装
我只说一下将CentOS安装作为服务器的情况,但是适用于普遍的CentOS安装过程,首先下载CentOS的安装镜像文件,有这么几种:CentOS-6.5-x86_64-LiveCD.CentOS-6. ...
- Mysql指定部分数据同步
一.需求背景 朋友的公司需要每天定时从源端定时同步一部分数据到目标端,库中存在company_id列的表,只将指定的company_id列导入到目标端数据库:存在company_id列的表,将表中所有 ...
- day66test
作业 1. 先有一下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: ...
- centos 6.8 搭建禅道 Linux一件安装、进程自起
禅道官网:http://www.zentao.net/ linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道.Linux 64位一键安装包(适用于L ...
- mysql建表设置格式
建表时必须设置字段编码格式为COLLATE utf8_bin,表示查询时该字段内容区分大小写,如果不需要区分大小写,可以设置为COLLATE utf8_ genera_ci,表示忽略大小写