已能为Esri Leaflet的L.esri.DynamicMapLayer绑定Popup，如何绑定Tooltip？

其实Esri Leaflet的L.esri.DynamicMapLayer本身并没有像FeatureLayer那样直接绑定Tooltip的便捷方法——毕竟它是动态切片图层，没有内置的要素级交互能力。不过我们可以通过结合Identify任务和Leaflet原生的Tooltip组件来实现这个需求，具体步骤如下：

1. 初始化图层与Identify任务 #

先创建你的动态图层实例，同时初始化一个L.esri.Tasks.Identify任务，关联到目标地图服务：

var url = "你的地图服务URL";
var featureLayer = L.esri.dynamicMapLayer({ url: url, useCors: true }).addTo(map);

// 初始化Identify任务，和动态图层关联同一个地图服务
var identifyTask = L.esri.Tasks.Identify({
  url: url,
  useCors: true
});

2. 创建全局Tooltip实例 #

先创建一个可复用的Tooltip实例绑定到地图上，初始保持隐藏状态：

var tooltip = L.tooltip({
  permanent: false,
  direction: 'top',
  offset: [0, -10],
  opacity: 0.9
}).addTo(map);

3. 监听鼠标事件，触发查询并展示Tooltip #

给动态图层绑定mousemove事件，在鼠标移动时获取当前坐标，通过Identify查询获取对应位置的要素属性，再更新Tooltip内容并展示：

featureLayer.on('mousemove', function(e) {
  // 执行Identify查询，配置必要参数
  identifyTask
    .at(e.latlng, {
      layerIds: [0], // 替换成你需要查询的图层ID，多图层可传数组如[0,1,2]
      tolerance: 5, // 查询容差（像素），避免鼠标需要精准点选的问题
      map: map // 当前地图实例
    })
    .run(function(error, response) {
      if (error) {
        console.error(error);
        tooltip.close();
        return;
      }
      
      // 查询到结果时，提取属性更新Tooltip
      if (response.results.length > 0) {
        var targetFeature = response.results[0];
        // 自定义Tooltip内容，可根据实际要素字段调整
        var tooltipContent = `<strong>要素名称:</strong> ${targetFeature.attributes.NAME || '无名称'}<br>
                              <strong>要素ID:</strong> ${targetFeature.attributes.OBJECTID}`;
        tooltip.setContent(tooltipContent).setLatLng(e.latlng).openTooltip();
      } else {
        // 无匹配要素时关闭Tooltip
        tooltip.close();
      }
    });
});

// 鼠标移出图层区域时关闭Tooltip
featureLayer.on('mouseout', function() {
  tooltip.close();
});

关键细节提示 #

• layerIds必须指定你要查询的具体图层ID，可以在ArcGIS Server服务的详情页面找到对应图层的ID值。
• tolerance参数可按需调整，数值越大，鼠标附近的要素越容易被查询到。
• 你可以根据实际的要素属性结构，修改tooltipContent的内容，展示业务需要的字段信息。

内容的提问来源于stack exchange，提问作者Bravo Ragazo