Arcgis js api InfoWindow 信息窗 弹窗等
map.infoWindow.setTitle("我是标题");
map.infoWindow.setContent("我是内容");
var screenpoint=map.toScreen(evt.geometry);
map.infoWindow.show(screenpoint);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>Non graphic info window</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra /tundra.css"> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> <style type="text/css"> .infowindow .window .top .right .user .titlebar .title { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14pt; } .infowindow .window .top .right .user .content { font-style:italic; font-size:10pt; } </style> <script type="text/javascript"> dojo.require("esri.map"); var map; function init() { map = new esri.Map("map"); dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(250, 100);} ); map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/ MapServer")); dojo.connect(map, "onClick", addPoint); } function addPoint(evt) { map.infoWindow.setTitle("Coordinates"); map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x + "<br />screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y); map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); } dojo.addOnLoad(init); </script> </head> <body class="tundra"> <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div> </body> </html>
Tooltip
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the sampleson iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Feature Layer - display results as an InfoWindow onHover</title><link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css"><link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"><style>html, body, #mapDiv {padding:0;margin:0;height:100%;}#mapDiv {position: relative;}#info {background: #fff;box-shadow: 0 0 5px #888;left: 1em;padding: 0.5em;position: absolute;top: 1em;z-index: 40;}</style><script src="http://js.arcgis.com/3.14/"></script><script>var map, dialog;require(["esri/map", "esri/layers/FeatureLayer","esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang","esri/Color", "dojo/number", "dojo/dom-style","dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"], function(Map, FeatureLayer,SimpleFillSymbol, SimpleLineSymbol,SimpleRenderer, Graphic, esriLang,Color, number, domStyle,TooltipDialog, dijitPopup) {map = new Map("mapDiv", {basemap: "streets",center: [-80.94, 33.646],zoom: 8,slider: false});var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {mode: FeatureLayer.MODE_SNAPSHOT,outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]});southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,255,255,0.35]),1),new Color([125,125,125,0.35]));southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));map.addLayer(southCarolinaCounties);map.infoWindow.resize(245,125);dialog = new TooltipDialog({id: "tooltipDialog",style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"});dialog.startup();var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 3),new Color([125,125,125,0.35]));//close the dialog when the mouse leaves the highlight graphicmap.on("load", function(){map.graphics.enableMouseEvents();map.graphics.on("mouse-out", closeDialog);});//listen for when the onMouseOver event fires on the countiesGraphicsLayer//when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layersouthCarolinaCounties.on("mouse-over", function(evt){var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"+ "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"+ "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"+ "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";var content = esriLang.substitute(evt.graphic.attributes,t);var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);map.graphics.add(highlightGraphic);dialog.setContent(content);domStyle.set(dialog.domNode, "opacity", 0.85);dijitPopup.open({popup: dialog,x: evt.pageX,y: evt.pageY});});function closeDialog() {map.graphics.clear();dijitPopup.close(dialog);}});</script></head><body class="tundra"><div id="mapDiv"><div id="info">Hover over a county in South Carolina to get more information.</div></div></body></html>
引用参考API：http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm
注：“esri.config”的是在1.3版中的的“esriConfig”的替代品。如果您使用的是1.2或更低的版本，您应该参阅默认API v1.2和更低的配置。对于版本1.3或更高版本，您可以使用“esri.config”在地方的“esriConfig”。虽然“esriConfig”可以继续使用，与1.3版本，您应该更新您的应用程序，而不是使用“esri.config”。
ArcGIS的JavaScript API中有一些默认的配置，可以被重写编程。
例如：
var zoomSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([ 0, 0, 255 ]),0.5 ]));
esri.config.defaults.map.zoomSymbol = zoomSymbol.toJson();
下面的列表中包含的的默认JavaScript API配置。
（1）esri.config.defaults.io.alwaysUseProxy 不论怎样都使用代理： 默认：false
esriConfig.defaults.io.alwaysUseProxy = true;
（2）esri.config.defaults.io.corsEnabledServers 添加到这个数组中启用跨域资源共享的服务器的URL。跨域资源共享（CORS）的Web应用程序可以绕过浏览器的同一原产地政策文件和访问资源或服务在不同的服务器/域。当Web服务器和浏览器的支持CORS，esri.request将不会使用代理执行跨域请求。 API提供了一些默认情况下，ESRI的服务器，所以重要的是要推到这个数组，而不是覆盖它的项目。
（3）esri.config.defaults.geometryService 指定默认的几何服务所使用的部件和操作。 （2.2）
esri.config.defaults.geometryService = new esri.tasks.GeometryService(<输入几何服务网址>);
（4）esri.config.defaults.io.proxyUrl 发布时，应使用大型有效载荷的端点代理URL的位置。这必须位于同一个域中的HTML应用程序。 默认：null
esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
（5）esri.config.defaults.io.timeout 每个通过esri.request要求最多允许60秒的时间。如果没有响应返回或返回一个服务器端错误，
esri.Error和错误返回处理程序被调用时的顺序。 （1.3） 默认：60秒
（6）esri.config.defaults.map.panDuration 时间长度（以毫秒为单位），该地图将采取平移程度。默认：350
（7）esri.config.defaults.map.panRate 时间长度（以毫秒为单位），地图上会刷新，因为它平移到下一个区。默认：50
（8）esri.config.defaults.map.slider 参数定义的滑动件的位置，大小和方向。
默认: {left:"30px",top:"30px",width:null,height:"200px"}
（9）esri.config.defaults.map.sliderLabel 定义的参数的滑块刻度和相应的Tick标志。如果为null，则滑块将显示刻度。
默认：Default: {tick:5,labels:null,style:"width:2em; font-family:Verdana; font-size:75%;"}
(10) esri.config.defaults.map.zoomDuration 时间长度，以毫秒为单位的地图放大程度。 默认：500
（11）esri.config.defaults.map.zoomRate 以毫秒为单位，把它放大到下一个地图会刷新的时间长度。默认：50
（12）esri.config.defaults.map.zoomSymbol SimpleFillSymbol使用代表的颜色，填充和轮廓属性的橡皮变焦。
这是JSON表示的SimpleFillSymbol。
默认：Default: {color:[0,0,0,64],outline:{color:[255,0,0,255],width:1.5,style:"esriSLSSolid"},style:"esriSFSSolid"}
示例（1）设置滑块位置：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/mapconfig_orientation/index.html
默认情况下，滑块是垂直方向的缩放级别。您可以调整滑块水平方向上设置height属性的滑块为空。
[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Map Slider Position and Height</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
//配置地图滑块水平是在左下角的地方
esri.config.defaults.map.slider = { left:"10px", bottom:"10px", width:"200px", height:null };
var map = new esri.Map("map", {
nav:false
});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
配置地图滑块的方向
<div id="map" style="width:500px; height:500px; border:1px solid #000;"></div>
</body>
</html>
esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"200px", height:null };
示例（2）设置滑块的显示label值。http://help.arcgis.com/en/webapi/javascript/arcgis/samples/mapconfig_customlabels/index.html
此示例演示如何您可以标记的缩放级别滑块的尺度。此示例使用一个ArcGISTiledMapServiceLayer,，这意味着在特定的尺度层具有预渲染的地图瓦片缓存。你可以得到一个阵列的高速缓存从该层的tileInfo属性的尺度。这是如何在此示例中得到的标签。在下面的代码中，“lods（Levels of Detail——多细节层次）
var lods = layer.tileInfo.lods;
for (var i=0, il=lods.length; i<il; i++) {
labels[i] = lods[i].scale;
}
在构建这个数组的规模水平，可以很容易地在esriConfig应用标签通过的sliderLabel.labels的属性
esriConfig.defaults.map.sliderLabel = {
...
labels: labels,
...
};
[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Map Slider Labels</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<style>
/* 默认情况下，使地图的滑块标签是white, claro 使用black */
.claro .dijitRuleLabel {
color: white;
}
html,body,#map,.map.container{
padding:0;
margin:0;
height:100%;
}
</style>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init(){
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
if (layer.loaded) {
initMap(layer);
} else {
dojo.connect(layer, "onLoad", initMap);
}
}
function initMap(layer) {
//自定义滑块标签
//使用层的比例刻度显示滑块标签
var labels = [];
var lods = layer.tileInfo.lods;
for (var i=0, il=lods.length; i<il; i++) {
labels[i] = lods[i].scale;
}
esri.config.defaults.map.sliderLabel = {
tick: 0,
labels: labels,
style: "width:2em; font-family:Verdana; font-size:65%; color:#fff; padding-left:2px;"
};
var initExtent = new esri.geometry.Extent({"xmin":-18902571,"ymin":-1995923,"xmax":1134936,"ymax":8022830,"spatialReference":{"wkid":102100}});
var map = new esri.Map("map",{extent:initExtent});
dojo.connect(map,'onLoad',function(){
dojo.connect(window,'resize',map,map.resize);
});
map.addLayer(layer);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
效果如下：
示例（3）自定义泛动画 http://help.arcgis.com/en/webapi/javascript/arcgis/samples/mapconfig_smoothpan/index.html
当用户点击平移按钮，您可以自定义动画行为。panDuration和panRate，确定了动画的持续时间和帧刷新速率，分别是Dojo的动画属性。这些特性都测量到250毫秒，默认为泛持续时间和25泛率。
[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Map Pan Animation</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
//设置地图泛动画变慢
esri.config.defaults.map.panDuration = 1000; //以毫秒为单位;默认持续动画事件:250
esri.config.defaults.map.panRate = 50; //刷新率的缩放动画，默认帧刷新速率：25
var myExtent = new esri.geometry.Extent(-125, 28, -62, 45, new esri.SpatialReference({wkid:4326}));
var map = new esri.Map("map", {nav:true, extent:esri.geometry.geographicToWebMercator(myExtent)});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
Configure map zoom pan animation
<div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
</body>
</html>
效果如下：
