esri popupTemplate修改

Question

如何修改 esri 中的 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

你好，修改Popup模板的一个快速解决方案是在模板数组中添加另一个具有文本和文本类型属性的对象。文本值将是 html 代码，我们将在其中创建一个 div 来显示图标，这些图标具有各自的 css classes。最多的是CSS。以下是 Popup 模板的示例：

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 响应。为了更好地显示示例，运行全屏显示。另一个细节是该示例需要时间来加载，因为它需要多个 CDN

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

尝试使用此 class 和样式来自定义关闭按钮

esri popupTemplate修改

esri popupTemplate modify

javascript

reactjs

arcgis

esri

更新

更新css按钮关闭