mapbox gl 上的 ArcGis 图层
Posted
技术标签:
【中文标题】mapbox gl 上的 ArcGis 图层【英文标题】：ArcGis layers on mapbox gl 【发布时间】：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 上做到这一点？
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于mapbox gl 上的 ArcGis 图层的主要内容，如果未能解决你的问题，请参考以下文章