ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）

最新推荐文章于 2023-11-02 16:58:28 发布

weixin_30248399

最新推荐文章于 2023-11-02 16:58:28 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/onsummer/p/6399628.html

版权

本文深入探讨了ArcGIS API for JavaScript中View的Popup特性，讲解了如何自定义Popup展示地图上的经纬度和其他信息。通过监听View的click事件，结合Locator服务获取坐标并展示在Popup上。Popup类的属性如actions、content、location和title在实现自定义弹窗内容和位置中起到关键作用。最后，文章提供了官方源代码示例。

摘要由CSDN通过智能技术生成

看本文前最好对第二章（Mapping and Views）中的Map和View类有理解。

视图类有一个属性是Popup类型的popup，查阅API知道这个就是视图的弹窗，每一个View的实例都有一个popup。

这个popup属性在View对象实例化的时候就实例化了的，即随着View的出生，它也会出生，它拥有默认的样子，它显示的文字也是默认的样式。

我们看看Popup这个类：

直接继承自Accessor，位于widgets模块下，说明Popup（弹窗）也是小部件的一种。但是为什么要单独拿出来讲呢？可能用法上比较复杂吧。

如果用户对弹窗有更高的样式要求，官方的说法是

可以自己new一个Popup对象，替换掉view默认的popup即可。

其实Popup有个兄弟类，叫PopupTemplate，它长得很像Popup，但是在功能上更服务于Layer和Graphic，即地理数据，而且也是高度可自定义的，在下一节会细说这两个的区别。

说完了Popup这个新玩意儿，我就来说说第一个例子吧！

它的功能就是点击View上的一个地方，就会弹出一个小窗，显示经纬度和其他信息。

引用

直接给：

require(
    [
      "esri/tasks/Locator",
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], 
    function(){}
);

函数参数中因为Map和View 对象是经常性出现的，所以就用 var map = new Map(...);代替了（以后也是）

所以函数参数的关键代码是：

function(Locator, Map, MapView){
        var map = new Map(...);
        var view = new MapView(...);
        var locatorTask = new Locator({
            url : "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";
　　　　 });
        view.on("click", funcion(event){...})
}

locatorTask是一个Locator类的对象，用于定位服务。这个不用知道太详细，因为本例中重点并不是它。

重点应该是view的事件“click”，写法同上，但是事件的方法体没有写完整。

我们就来看看这个事件的方法体具体是什么：

function(event){
        //获取经纬度
        var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
        var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
        view.popup.open({
            title: "Reverse geocode: [" + lon + ", " + lat + "]",
            location: event.mapPoint
        });

        //定位服务，可以省略，不是本例中的主要内容
        locatorTask.locationToAddress(event.mapPoint)
        .then(function(response) {
          var address = response.address.Match_addr;
          view.popup.content = address;
        })
        .otherwise(function