个人中心
gpt4 book ai didi

javascript - 在鼠标悬停时在 map 上显示工具提示

转载 作者：行者123 更新时间：2023-11-28 01:42:33 24 4
gpt4 key购买 nike

我想在用户将鼠标悬停在 map 的某个区域上超过几秒钟时显示带有属性的工具提示。

在此示例中，我试图在用户将鼠标悬停在该状态上时显示该状态名称。

我已经实现了工具提示，但没有显示状态名称。工具提示为空白。

我也不确定如何实现延迟。目前，只要鼠标悬停在 map 上，工具提示就会出现。

我需要它来使用 ArcGISDynamicMapServiceLayer。

这是 fiddle :

tooltip fiddle

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

最佳答案

我相信我有解决办法。将鼠标悬停在 map 上的某个点上 4 秒后，将弹出带有州名的信息模板。

需要回调到服务器，因为我们使用的是 ArcGISDynamicMapServiceLayer 而不是 FeatureLayer。

Tooltip fiddle

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

关于javascript - 在鼠标悬停时在 map 上显示工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50361343/

24 4 0
文章推荐： c++如何输出我在函数中操作的数组？
文章推荐： css - Chrome 开发工具将链接标签替换为样式标签
文章推荐： Android Firefox 浏览器上的 CSS 动画抖动
文章推荐： javascript - href 没有链接到外部 url
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com