Question

我正在尝试在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上执行此操作？

Answer 1

嗨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]我没有遇到过。

以Washington D.C.为例，如果您导航到：http://opendata.dc.gov/datasets/building-footprints然后点击API，您可以将链接复制到geojson服务。

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

Answer 2

您可以使用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>

mapbox gl上的ArcGis图层

2 个答案: