Javascript 鼠标悬停时在地图上显示工具提示
当用户将鼠标悬停在地图的某个区域上超过几秒钟时,我希望显示带有属性的工具提示 在本例中,我试图在用户将鼠标悬停在状态上时显示状态名称 我已经实现了工具提示,但是没有显示状态名称。工具提示为空 我也不确定如何实施延迟。当前,当鼠标悬停在地图上时,工具提示立即出现 我需要这个来和ArcGisDynamicMapsServiceLayer一起工作 这是小提琴: HTML:Javascript 鼠标悬停时在地图上显示工具提示,javascript,css,esri,esri-javascript-api,Javascript,Css,Esri,Esri Javascript Api,当用户将鼠标悬停在地图的某个区域上超过几秒钟时,我希望显示带有属性的工具提示 在本例中,我试图在用户将鼠标悬停在状态上时显示状态名称 我已经实现了工具提示,但是没有显示状态名称。工具提示为空 我也不确定如何实施延迟。当前,当鼠标悬停在地图上时,工具提示立即出现 我需要这个来和ArcGisDynamicMapsServiceLayer一起工作 这是小提琴: HTML: 我相信我有一个解决办法。将鼠标悬停在地图上的某个点上4秒钟后,将弹出带有状态名称的infoTemplate 需要回调服务器,因为
我相信我有一个解决办法。将鼠标悬停在地图上的某个点上4秒钟后,将弹出带有状态名称的infoTemplate 需要回调服务器,因为我们使用的是ArcGISDynamicMapServiceLayer而不是FeatureLayer HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Select Features</title>
<!-- Configure dojo for asynchronous module loading -->
<script>
var dojoConfig = {
async: true
};
</script>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
</head>
<body class="claro">
<div id="bcMain" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', liveSplitters:'true'">
<div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="divMap"></div>
<div id="divRenderer">
</div>
</div>
<div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'bottom'">
<div id="divGrid"></div>
</div>
</div>
</body>
</html>
// @formatter:off
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/toolbars/draw",
"esri/graphic",
"esri/tasks/query",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"dojo/ready",
"dojo/parser",
"dojo/on",
"dojo/dom",
"dojo/store/Memory",
"dojo/date/locale",
"dojo/_base/Color",
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button"],
function (Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Draw, Graphic,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Query,
ready, parser, on, dom,
Memory, locale,
Color, declare, array,
Grid, Selection,
BorderContainer, ContentPane, Button) {
// @formatter:on
ready(function () {
parser.parse();
var sUrlUSAService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
var mapMain = new Map("divMap", {
basemap: "satellite",
center: [-119.65, 36.87],
zoom: 4
});
var lyrUSA = new ArcGISDynamicMapServiceLayer(sUrlUSAService, {
opacity: 0.5
});
lyrUSA.setVisibleLayers([2]);
mapMain.addLayers([lyrUSA]);
var infoTemplate = new esri.InfoTemplate("<b>State Name</b>","${STATE_NAME}");
dojo.connect(mapMain, "onMouseMove", function(evt) {
mapMain.graphics.clear();
var graphic = new esri.Graphic(evt.mapPoint, null);
graphic.setInfoTemplate(infoTemplate);
mapMain.graphics.add(graphic);
mapMain.infoWindow.show(evt.screenPoint, mapMain.getInfoWindowAnchor(evt.screenPoint));
});
});
});
html, body, #divMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#bcMain {
width: 100%;
height: 100%;
}
#divRenderer {
position: absolute;
left: 27px;
bottom: 27px;
}
#cpBottom {
height: 100px;
}
#divGrid {
height: 100%;
}
.dgrid {
border: none;
}
.field-eqid {
width: 100px;
}
.field-datetime {
width: 160px;
}
.field-magnitude {
width: 60px;
}
.field-longitude {
width: 100px;
}
.field-latitude {
width: 100%;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Select Features</title>
<!-- Configure dojo for asynchronous module loading -->
<script>
var dojoConfig = {
async: true
};
</script>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
</head>
<body class="claro">
<div id="bcMain" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', liveSplitters:'true'">
<div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="divMap"></div>
<div id="divRenderer">
</div>
</div>
<div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'bottom'">
<div id="divGrid"></div>
</div>
</div>
</body>
</html>
var mapMain, infoTemplate;
// @formatter:off
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/toolbars/draw",
"esri/graphic",
"esri/tasks/query",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"dojo/ready",
"dojo/parser",
"dojo/on",
"dojo/dom",
"dojo/store/Memory",
"dojo/date/locale",
"dojo/_base/Color",
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button"],
function (Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Draw, Graphic,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Query,
ready, parser, on, dom,
Memory, locale,
Color, declare, array,
Grid, Selection,
BorderContainer, ContentPane, Button) {
// @formatter:on
ready(function () {
parser.parse();
var sUrlUSAService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
mapMain = new Map("divMap", {
basemap: "satellite",
center: [-119.65, 36.87],
zoom: 4
});
var lyrUSA = new ArcGISDynamicMapServiceLayer(sUrlUSAService, {
opacity: 0.5
});
lyrUSA.setVisibleLayers([2]);
mapMain.addLayers([lyrUSA]);
infoTemplate = new esri.InfoTemplate("<b>State Name</b>","${state_name}");
queryTask = new esri.tasks.QueryTask(sUrlUSAService+"/2");
//build query filter
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["state_name"];
dojo.connect(mapMain, "onMouseMove", executeQueryTask);
//create the infoTemplate to be used in the infoWindow.
//All ${attributeName} will be substituted with the attribute value for current feature.
});
});
var lastMapPoint, screenPoint;
function executeQueryTask(evt) {
setTimeout(function(){
if (lastMapPoint==evt.mapPoint) {
query.geometry = evt.mapPoint;
screenPoint = evt.screenPoint;
event = evt;
//Execute task and call showResults on completion
queryTask.execute(query, showResults);
}
},4000);
mapMain.infoWindow.hide();
lastMapPoint = evt.mapPoint;
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
mapMain.graphics.clear();
var features = featureSet.features;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(features,function(feature){
var graphic = feature;
// graphic.setSymbol(new esri.symbol.SimpleMarkerSymbol());
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
mapMain.graphics.add(graphic);
mapMain.infoWindow.setContent(graphic.getContent());
mapMain.infoWindow.setTitle(graphic.getTitle());
mapMain.infoWindow.show(screenPoint,mapMain.getInfoWindowAnchor(screenPoint));
});
}
html, body, #divMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#bcMain {
width: 100%;
height: 100%;
}
#divRenderer {
position: absolute;
left: 27px;
bottom: 27px;
}
#cpBottom {
height: 100px;
}
#divGrid {
height: 100%;
}
.dgrid {
border: none;
}
.field-eqid {
width: 100px;
}
.field-datetime {
width: 160px;
}
.field-magnitude {
width: 60px;
}
.field-longitude {
width: 100px;
}
.field-latitude {
width: 100%;
}