esri popupTemplate修改

Question

如何修改esri中的popupTemplate？我可以根据我的设计修改popupTemplate吗？

我有一个popupTemplate

    popupTemplate: {
      content: [{
        type: "fields",
        fieldInfos: [{
          fieldName: "Name"
        }, {
          fieldName: "Owner"
        }, {
          fieldName: "Length"
        }]
      }]
    }

这就是结果

​

​

我想要的是设计

​

​

资源https://totalapis.github.io/sample-code/popup-custom-action/index.html

更新，我的反应有问题，当我点击图标时，没有弹出模板显示。

  useEffect(() => {
    if (mapDiv.current) {
      esriConfig.apiKey = process.env.ARCGIS_API;

      const map = new Map({
        basemap: 'arcgis-light-gray'
      });
      const view = new MapView({
        center: [123.5504, 12.3574], // Longitude, latitude
        container: mapDiv.current,
        map: map,
        zoom: 13, // Zoom level
      });
      view
        .when((r) => {})
        .then(() => {
          mapDiv.current = view;
          setMapView(view);
        });


        var list= [{
          type: "fields",
          fieldInfos: [{
            fieldName: "Name "
          }, {
            fieldName: "Owner"
          }, {
            fieldName: "Length"
          }]
        },
        {
          type: "text",
          text: "<div class=\"icontain\"></><a class=\"ic\"><i class=\"bi bi-star\"></i></a><a class=\"ic\"><i class=\"bi bi-geo-alt-fill\"></i></a></div>"
        }]
        var Stack= {
        content: list
        }
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
       popupTemplate: Stack,
        outFields: ["*"]
      });
      map.add(featureLayer);
    }

    
  }, []);

  const displayLocation = (locations) => {
    mapView.center = [
      locations.data[0].geoCode.longitude,
      locations.data[0].geoCode.latitude,
    ];


  locations.data.map((location) => {
      const point = new Graphic({
        geometry: {
          latitude: location.geoCode.latitude,
          longitude: location.geoCode.longitude,
          type: 'point',
        },
        symbol: LocationPin,
        
      });
      mapView.graphics.add(point);
    });
  };

  return <div className="mapDiv layers" ref={mapDiv}></div>;
}

Answer 1

Hello，修改弹出模板的一个快速解决方案是向模板数组中添加另一个具有文本和文本类型属性的对象。文本值将是html代码，我们将创建一个div来显示图标，这些图标和它们各自的css类。最重要的是CSS。下面是弹出模板的一个示例：

popupTemplate: {[{
        type: "fields",
        fieldInfos: [{
          fieldName: "Name "
        }, {
          fieldName: "Owner"
        }, {
          fieldName: "Length"
        }]
      },
      {
            type: "text",
            text: "<div class=\"icontain\"></><a class=\"ic\"><i class=\"bi bi-star\"></i></a><a class=\"ic\"><i class=\"bi bi-geo-alt-fill\"></i></a></div>"
          }]
}

为了进行更好的压缩，我已经在css中使用了这段代码的示例。您剩下的任务是玩CSS，使图标div响应。为了更好地可视化这个例子，在全屏上运行它。另一个细节是，由于需要多个CDNs，该示例需要时间加载。

​

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {

      // Create the Map
      var map = new Map({
        basemap: "streets-navigation-vector"
      });
      
      var view = new MapView({
        container: "mapDiv",
        map: map,
        center: [-118.399400711028, 34.08713590709093],
        zoom: 16,
        // Since there are many elements, it is best to dock the popup so
        // the elements display better rather than have to scroll through them all.
        popup: {
          dockEnabled: true,
          dockOptions: {
            buttonEnabled: false,
            breakpoint: false
          }
        }
      });
      
      var list= [{
        type: "fields",
        fieldInfos: [{
          fieldName: "Name "
        }, {
          fieldName: "Owner"
        }, {
          fieldName: "Length"
        }]
      },
      {
            type: "text",
            text: "<div class=\"icontain\"></><a class=\"ic\"><i class=\"bi bi-star\"></i></a><a class=\"ic\"><i class=\"bi bi-geo-alt-fill\"></i></a></div>"
          }]
      
      var Stack= {
      content: list
    }

      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
       popupTemplate: Stack,
        outFields: ["*"]
      });
      map.add(featureLayer);
    });

html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    .esri-popup__main-container{
      border: solid 1px gray;
      border-radius: 10px;
    }
    
    .icontain{
     position: absolute;
    top: 0;
    height: 100%;
    left: -17px;
    display: flex;
    flex-direction: column;
    /* margin-top: auto; */
    /* margin-bottom: auto; */
    /* align-items: center; */
    justify-content: center;
    }
    
    .ic{
      border: solid 1px gray;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    margin-top: 4px;
    margin-bottom: 4px;
    }

<!DOCTYPE html>
<html dir="ltr">
<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"
  /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  <title>Multiple popup elements - 4.4</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.4/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.4/"></script></head>

<body>
  <div id="mapDiv"></div>
</body>

</html>

​

更新

在您的环境中运行此代码。弹出窗口应该出现，您应该只添加样式。

useEffect(() => {
    if (mapDiv.current) {
      esriConfig.apiKey = process.env.ARCGIS_API_KEY;

      const map = new Map({
        basemap: 'arcgis-light-gray', // Basemap layer service
        // portalItem:{
        //     id: "2d11c8164ce04843a38bfde68e00e6e7"
        // }
      });
      const view = new MapView({
        center: [123.5504, 12.3574], // Longitude, latitude
        container: mapDiv.current,
        map: map,
        zoom: 13, // Zoom level
      });
      view
        .when((r) => {})
        .then(() => {
          mapDiv.current = view;
          setMapView(view);
        });
    }
  }, []);

  const displayLocation = (locations) => {
    mapView.center = [
      locations.data[0].geoCode.longitude,
      locations.data[0].geoCode.latitude,
    ];




    locations.data.map((location) => {
      const point = new Graphic({
        geometry: {
          latitude: location.geoCode.latitude,
          longitude: location.geoCode.longitude,
          type: 'point',
        },
        symbol: LocationPin,
        popupTemplate: {
          title: "Sample",
      
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "Name"
            }, {
              fieldName: "Owner"
            }, {
              fieldName: "Length"
            }]
          },{
            type: "text",
            text: "<div class=\"icontain\"></><a class=\"ic\"><i class=\"bi bi-star\"></i></a><a class=\"ic\"><i class=\"bi bi-geo-alt-fill\"></i></a></div>"
          }]
        }
      });
      mapView.graphics.add(point);
    });
  };

为按钮关闭更新css

.esri-popup__header-buttons{
position: absolute;
    top: 100px;
    margin: 0;
    left: -17px;
    padding: 0;
    background: white;
    border-radius: 50%;
    border: solid 1px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.esri-popup__button {
     z-index: 10;
}

尝试使用此类和样式，自定义“关闭”按钮。