mapbox gl 上的 ArcGis 图层答案

【问题标题】：ArcGis layers on mapbox glmapbox gl 上的 ArcGis 图层
【发布时间】：2018-04-20 11:06:00
【问题描述】：

我正在尝试从 ArcGis 上的 api 添加一个图层： https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Facility_and_Structure/MapServer/1

在传单中可以使用：

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

有没有办法在 mapboxgl 上做到这一点？

【问题讨论】：

标签： leaflet arcgis esri mapbox-gl

【解决方案1】：

您可以使用leaflet-mapbox-gl.js 来集成leaflet 和mapbox。从 mapbox 获取令牌并将其添加到下面的示例中以使其工作。

参考：https://github.com/mapbox/mapbox-gl-leaflet

<!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>

【讨论】：

【解决方案2】：

嗨Jorge Monroy - Mapbox GL JS 期望数据源为such。如果您想从 ArcGIS REST 服务加载建筑物覆盖区，最好的办法是将它们加载为 geojson。

您似乎正在从 ArcServer 10.31 发布服务。在这种情况下，我加载 ArcGIS REST 服务的方式是通过AGOL 公开它们，如那里所述。如果你有那个选项，那似乎是最简单的。否则，还有其他（解决方法）[https://gis.stackexchange.com/questions/13029/converting-arcgis-server-json-to-geojson] 我没有经验。

以华盛顿特区为例，如果您导航到：http://opendata.dc.gov/datasets/building-footprints，然后单击 API，您可以将链接复制到 geojson 服务。

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

【讨论】：