Отображение всплывающей подсказки на карте при наведении мыши - PullRequest
Новая
       62

Отображение всплывающей подсказки на карте при наведении мыши

0 голосов
/ 16 мая 2018

Я хочу показать всплывающую подсказку с атрибутом, когда пользователь наводит курсор на область карты более чем на несколько секунд.

В этом примере я пытаюсь показать имя состояния, когда пользователь наводит курсор на это состояние.

Я реализовал всплывающую подсказку, но имя состояния не отображается. Всплывающая подсказка пуста.

Я также не уверен, как реализовать задержку. В настоящее время всплывающая подсказка появляется, как только указатель мыши наводится на карту.

Мне нужно это для работы с ArcGISDynamicMapServiceLayer.

Вот скрипка:

скриптовая подсказка

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: 

// @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: 

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 Ответ

0 голосов
/ 17 мая 2018

Мне кажется, у меня есть решение. infoTemplate с именем состояния появится через 4 секунды при наведении курсора на точку на карте.

Необходимо перезвонить на сервер, потому что мы используем 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>

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: 

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