地图的监听
view.on("click",function(event){
view.hitTest(event).then(function(response){
if(response.results[0]){
var graphic = response.results[0].graphic;
leftClick(event);
}
})
});
详情框的容器，最外层是地图容器
<div id="viewDiv">
<div id="infowin">
<div id="close">X</div>
<div id="title"></div>
<div id="content"></div>
<div id="arrow"></div>
</div>
</div>
详情框样式
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; 100%; } #infowin { height:237px; 400px; display: none; z-index: 10000; } #close { float: right; padding-top: 10px; font-weight: bold; font-size: 12px; color: #FFF; /* border: #000 1px solid; */ height: 30px; 30px; text-align: center; } #close:hover { cursor: pointer; } #title { background-color: #1097ff; padding: 10px; font-weight: bold; font-size: 12px; } #content { padding-left: 10px; padding-top: 10px; background-color: #FFFFFF; height: 200px; color:#000000; } #arrow { position: absolute; 0px; height: 0px; line-height: 0px; border-top: 30px solid #FFFFFF; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 190px; bottom: -30px; } </style>
详情框的初始化
var isWindowShow=0; var closeInfoWin = function (evt){ infowin=document.getElementById("infowin"); infowin.style.display="none"; isWindowShow=0; }; //对话框 var infowin,colse,title,content; var width=400,height=237,offset=30; var beforePoint; var beforeMapPoint; infowin = document.getElementById("infowin"); colse = document.getElementById("close"); title = document.getElementById("title"); content = document.getElementById("content"); function showinfowindow(point){ var screenpoint = view.toScreen(point); beforeMapPoint = point; beforePoint=screenpoint; var x=screenpoint.x; var y=screenpoint.y; isWindowShow=1; infowin.style.left=(x-width/2)+"px"; infowin.style.top=(y-height-offset)+"px"; infowin.style.position="absolute"; infowin.style.width=width+"px"; infowin.style.height=height+"px"; infowin.style.display="block"; } function leftClick(evt){ infowin.style.display="none"; var strtitle="城市名称"; var strcontent = "名称：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>历史沿革：不详"; title.innerHTML = strtitle; content.innerHTML = strcontent; this.evtMapPoint=evt.mapPoint; showinfowindow(this.evtMapPoint); }
地图监听
//鼠标单击 // view.on("click", leftClick); view.on("drag",function(ent){ showinfowindow(this.evtMapPoint); }); view.on("mouse-wheel",function(ent){ showinfowindow(this.evtMapPoint); }); //指针移动 view.on("pointer-move",function(ent){ showinfowindow(this.evtMapPoint); }); //视野调整 view.on("resize",function(ent){ showinfowindow(this.evtMapPoint); }); view.watch("stationary",function(ent){ showinfowindow(this.evtMapPoint); });
完整代码
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> --> <title>Intro to graphics - 4.11</title> <link rel="stylesheet" href="http://172.18.84.194:8080/arcgis_js_api/library/4.8/esri/themes/dark/main.css" /> <script src="http://172.18.84.194:8080/arcgis_js_api/library/4.8/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; 100%; } #infowin { height:237px; 400px; display: none; z-index: 10000; } #close { float: right; padding-top: 10px; font-weight: bold; font-size: 12px; color: #FFF; /* border: #000 1px solid; */ height: 30px; 30px; text-align: center; } #close:hover { cursor: pointer; } #title { background-color: #1097ff; padding: 10px; font-weight: bold; font-size: 12px; } #content { padding-left: 10px; padding-top: 10px; background-color: #FFFFFF; height: 200px; color:#000000; } #arrow { position: absolute; 0px; height: 0px; line-height: 0px; border-top: 30px solid #FFFFFF; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 190px; bottom: -30px; } </style> <script> require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function( Map, MapView, Graphic ) { var map = new Map({ basemap: "hybrid" }); var view = new MapView({ center: [-80, 35], container: "viewDiv", map: map, zoom: 3 }); var point = { type: "point", // autocasts as new Point() longitude: -49.97, latitude: 41.73 }; var markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], 2 } }; var pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol }); var polyline = { type: "polyline", // autocasts as new Polyline() paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]] }; var lineSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [226, 119, 40], 4 }; var lineAtt = { Name: "Keystone Pipeline", Owner: "TransCanada", Length: "3,456 km" }; var polylineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol, attributes: lineAtt, popupTemplate: { // autocasts as new PopupTemplate() title: "{Name}", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name" }, { fieldName: "Owner" }, { fieldName: "Length" } ] } ] } }); var polygon = { type: "polygon", // autocasts as new Polygon() rings: [ [-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3] ] }; // Create a symbol for rendering the graphic var fillSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [227, 139, 79, 0.8], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], 1 } }; // Add the geometry and symbol to a new graphic var polygonGraphic = new Graphic({ geometry: polygon, symbol: fillSymbol, attributes: lineAtt }); var highlight; view.on("click",function(event){ if(highlight){ highlight.remove(); } view.hitTest(event).then(function(response){ if(response.results[0]){ var graphic = response.results[0].graphic; leftClick(event); } }) }); // Add the graphics to the view's graphics layer view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]); var isWindowShow=0; var closeInfoWin = function (evt){ infowin=document.getElementById("infowin"); infowin.style.display="none"; isWindowShow=0; }; //对话框 var infowin,colse,title,content; var width=400,height=237,offset=30; var beforePoint; var beforeMapPoint; infowin = document.getElementById("infowin"); colse = document.getElementById("close"); title = document.getElementById("title"); content = document.getElementById("content"); function showinfowindow(point){ var screenpoint = view.toScreen(point); beforeMapPoint = point; beforePoint=screenpoint; var x=screenpoint.x; var y=screenpoint.y; isWindowShow=1; infowin.style.left=(x-width/2)+"px"; infowin.style.top=(y-height-offset)+"px"; infowin.style.position="absolute"; infowin.style.width=width+"px"; infowin.style.height=height+"px"; infowin.style.display="block"; } function leftClick(evt){ infowin.style.display="none"; var strtitle="城市名称"; var strcontent = "名称：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>历史沿革：不详"; title.innerHTML = strtitle; content.innerHTML = strcontent; this.evtMapPoint=evt.mapPoint; showinfowindow(this.evtMapPoint); } //鼠标单击 // view.on("click", leftClick); view.on("drag",function(ent){ showinfowindow(this.evtMapPoint); }); view.on("mouse-wheel",function(ent){ showinfowindow(this.evtMapPoint); }); //指针移动 view.on("pointer-move",function(ent){ showinfowindow(this.evtMapPoint); }); //视野调整 view.on("resize",function(ent){ showinfowindow(this.evtMapPoint); }); view.watch("stationary",function(ent){ showinfowindow(this.evtMapPoint); }); }); </script> </head> <body> <div id="viewDiv"> <div id="infowin"> <div id="close" onClick="closeInfoWin()">X</div> <div id="title"></div> <div id="content"></div> <div id="arrow"></div> </div> </div> </div> </body> </html>
这里地图监听感觉有些缺漏。鼠标移动地图或缩放时会有点延迟。希望大神能够指正