Question

目前正在尝试使用ESRI ArcGIS地图环境实现/解决问题，其中我有一个多层地图，每个图层都会呈现自定义图形。一些图形是简单的形状，如直线和圆形，但大多数图形是在图层上绘制的图标（.png）文件。（所有这些都是在JavaScript中完成的。）

我已经能够正确生成所有图层 - 数据不存储在ArcGIS地图中，而是定制设计的Contact＆amp; Web应用程序中的位置数据库（SQL）和其他表单维护此C＆amp; L数据。

在地图上呈现的图形图标需要显示鼠标悬停工具提示弹出窗口，其中显示的信息在创建.substitute()命令将更新模板的位置时与图标一起存储。显示的信息是HTML格式的<div> 问题：
当鼠标移动到一个图标上时，工具提示会出现，但1）它总是出现在屏幕的右下角 - 尽管＆＃34; orient：＆＃34;具体＆＃34; x：＆＃34;和＆＃34; y：＆＃34;指定的坐标。另外，当执行tooltipDialog.open()命令时，对话框的offsetHeight设置为624，offsetTop设置为502.（offsetWidth实际上设置为正确的值。）如何覆盖offsetHeight / offsetTop？

中的任何一个/两者

我已尝试为tooltipDialog.open()命令指定其他参数，但到目前为止没有尝试过改变结果。即使我将模板内容更改为＆＃34; Hi There！＆＃34;不会改变结果。

注意：如果单击某个图标，将弹出IconWindow对话框，其中显示正确的内容和格式。所以它让我相信问题是在CSS或dojo / dijit的其他方面，因为tooltipDialog.open()命令实际上是在进行偏移更改的地方 - 值保留（offsetTop=0 offsetHeight=0）之前致open()电话。

思想/建议？

Answer 1

您可以尝试使用bufferedOutputStream模块打开dijit/popup，这样您就可以传入应该打开工具提示的DOM节点：

TooltipDialog

有一个完整的here示例（“可以从任何节点弹出一个TooltipDialog”。）

Answer 2

好吧，只要您将鼠标悬停在地图上的任何功能上，似乎都希望显示带有偏移值的信息弹出窗口。

<强>解决方案 -

这样做我觉得你不需要处理TooltipDialog，因为每当你在地图上加载特征或要素图层时，你都可以附加信息弹出窗口。它将负责整个加载和显示信息弹出对话框及其定位。

传递偏移值 -

如果想要将一些偏移值传递给弹出对话框，可以使用下面提到的属性： -

有关弹出对话框的更多属性，请参阅此链接 - https://developers.arcgis.com/javascript/3/jsapi/popup.html

悬停对话框示例 -

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #mapDiv {
        position: relative;
      }
      #info {
        background: #fff;
        box-shadow: 0 0 5px #888;
        left: 1em;
        padding: 0.5em;
        position: absolute;
        top: 1em;
        z-index: 40;
      }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "esri/Color", "dojo/number", "dojo/dom-style",
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle,
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });

        var southCarolinaCounties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,255,255,0.35]),
            1
          ),
          new Color([125,125,125,0.35])
        );
        southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

        map.infoWindow.resize(245,125);

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 3
          ),
          new Color([125,125,125,0.35])
        );

        //close the dialog when the mouse leaves the highlight graphic
        map.on("load", function(){
          map.graphics.enableMouseEvents();
          map.graphics.on("mouse-out", closeDialog);

        });

        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        southCarolinaCounties.on("mouse-over", function(evt){
          var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
            + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
            + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
            + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";

          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });

        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }

      });
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv">
      <div id="info">
        Hover over a county in South Carolina to get more information.
      </div>
    </div>
  </body>
</html>

希望这会对您有所帮助：）

但是，如果您正在寻找精确修复，则始终建议您在此处添加代码。

Answer 3

找到了我的情况的答案。似乎有一个未说明的要求，即使用提供的CSS dijit / themes之一，或者用户必须创建自己的主题，其中有一些CSS配置显示位置。

使用消除对top的任何样式引用解决了offsetTop问题：。

Dojo / Dijit TooltipDialog.open：如何覆盖offsetHeight和offsetTop值

3 个答案: