Leaflet mapbox gl上的ArcGis图层_Leaflet_Arcgis_Esri_Mapbox Gl

Leaflet mapbox gl上的ArcGis图层

leaflet

Leaflet mapbox gl上的ArcGis图层,leaflet,arcgis,esri,mapbox-gl,Leaflet,Arcgis,Esri,Mapbox Gl,我正在尝试从ArcGis上的api添加一个层：在传单中，它可以与：有没有办法在mapboxgl上执行此操作 Hi-Mapbox GL JS希望数据源为。在您希望从ArcGIS REST服务加载建筑示意图的情况下，最好将其作为geojson加载看起来您正在从ArcServer发布服务。在这种情况下，我加载ArcGIS REST服务的方式是通过公开这些服务，如这里所述。如果你有这个选择，那似乎是最简单的。除此之外，还有其他一些我没有经验的解决办法以华盛顿特区为例，如果导航到：然后单击AP

我正在尝试从ArcGis上的api添加一个层：

在传单中，它可以与：

有没有办法在mapboxgl上执行此操作

Hi-Mapbox GL JS希望数据源为。在您希望从ArcGIS REST服务加载建筑示意图的情况下，最好将其作为geojson加载

看起来您正在从ArcServer发布服务。在这种情况下，我加载ArcGIS REST服务的方式是通过公开这些服务，如这里所述。如果你有这个选择，那似乎是最简单的。除此之外，还有其他一些我没有经验的解决办法

以华盛顿特区为例，如果导航到：然后单击API，则可以将链接复制到geojson服务

然后，您可以通过此处显示的geojson源的属性加载到MapboxGL JS中。

您可以使用传单-mapbox-gl.JS集成传单和mapbox。从mapbox获取令牌并将其添加到下面的示例中，以使其正常工作

参考资料：

  L.esri.featureLayer({
  url:"https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Facility_and_Structure/MapServer/1",
    style: function () {
    return { color: "#70ca49", weight: 2 };
    }
    }).addTo(map);

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <style>
      html, body, #map {
        margin:0; padding:0;  width : 100%; height : 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var token = "";//add token before running this example

      const INITIAL_VIEW_STATE = {
          latitude: 45.528,
          longitude: -122.680,
          zoom: 13
        };

      var map = L.map('map').setView([45.528, -122.680], 13);
      L.esri.basemapLayer("NationalGeographic").addTo(map);
      var parks = L.esri.featureLayer({
        url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      }).addTo(map);

      var gl = L.mapboxGL({
            accessToken: token,
            style: 'mapbox://styles/mapbox/dark-v10'
        }).addTo(map);

      //To add anything on mapbox, first access the mapbox using getMapboxMap()
      gl.getMapboxMap().on('load', () => {
          //To load any layer on mapbox
          //gl.getMapboxMap().addLayer();
      });
      var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

      parks.bindPopup(function(e){
        return L.Util.template(popupTemplate, e.feature.properties)
      });
    </script>
  </body>
</html>