在鼠标悬停时在地图上显示工具提示

Question

I want to show a tooltip with an attribute when the user hovers over an area of the map for more than a few seconds. 当用户将鼠标悬停在地图区域上几秒钟时，我想显示一个带有属性的工具提示。

In this example I am trying to show the state name when a user hovers over that state. 在此示例中，我试图在用户将鼠标悬停在状态上时显示状态名称。

I have implemented the tooltip but the state name is not showing up. 我已经实现了工具提示，但是没有显示状态名称。 The tooltip is blank. 工具提示为空白。

I'm also unsure how to implement the delay. 我也不确定如何实施延迟。 Currently the tooltip appears as soon as the mouse hovers over the map. 当前，一旦鼠标悬停在地图上，就会显示工具提示。

I need this to work with an ArcGISDynamicMapServiceLayer. 我需要它与ArcGISDynamicMapServiceLayer一起使用。

Here is the fiddle: 这是小提琴：

tooltip fiddle 工具提示小提琴

HTML: 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>

JS: JS：

// @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));
        });


    });
});

CSS: CSS：

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%;
}

Answer 1

I believe I have a solution. 我相信我有解决方案。 infoTemplate with state name will popup after 4 seconds of hovering over a point on the map. 将鼠标悬停在地图上的某个点4秒钟后，将弹出带有状态名称的infoTemplate。

There needs to be a call back to the server because we are using ArcGISDynamicMapServiceLayer not a FeatureLayer. 由于我们使用的是ArcGISDynamicMapServiceLayer而不是FeatureLayer，因此需要回调服务器。

Tooltip fiddle 工具提示小提琴

HTML: 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>

JS: JS：

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));

    });

  }

CSS: CSS：

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%;
}

在鼠标悬停时在地图上显示工具提示

问题描述

1 个解决方案

解决方案1
0 2018-05-17 00:22:50

在鼠标悬停时在地图上显示工具提示

问题描述

1 个解决方案

解决方案1 0 2018-05-17 00:22:50

解决方案1
0 2018-05-17 00:22:50