Question

我正在尝试在ESRI Vector Basemaps中添加新的OpenLayers 3。我已经通过修改OpenLayers发布的Mapbox Example来显示未设置样式的图层。

显然，我必须删除style: createMapboxStreetsV6Style()选项才能显示esri图层。所以基本上地图不知道正确显示图层的样式信息。

我认为应该可以这样做，因为ESRI's Leaflet port和example已经这样做了。我认为有关esri的样式ID的信息可以在这里找到Leaflet code。

OpenLayers应该已经能够使用所有这些信息，因为它能够显示Mapbox Layer。我需要帮助的是，如何使用ESRI的样式信息。

这是我到目前为止所拥有的内容（codepen here）：

var map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
        tilePixelRatio: 16,
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

.map {
  background: #f8f4f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

Answer 1

有一个单独的库https://npmjs.com/package/ol-mapbox-style，可以很容易地使用矢量图块地图，包括它们在OpenLayers中的样式。它读取样式文档并从中构建整个地图。对于您上面链接的ESRI地图之一，在OpenLayers中获取该地图的代码将是

var map = new ol.Map({
  target: 'map'
});
olms.apply(map, 'https://www.arcgis.com/sharing/rest/content/items/4f4843d99c34436f82920932317893ae/resources/styles/root.json?f=json');

您可以将4f4843d99c34436f82920932317893ae替换为Leaflet示例中列出的其他地图ID之一，以获取其他地图。

您也可以使用该代码 - 我创建了一个CodePen：https://codepen.io/ahocevar/pen/xLaBVV。

Answer 2

@ahocevar的建议很完美，

esri的root.json，sprite和字形不是完整的URL，仅是最后一部分，如下所示

在您的示例中，那些不完整的URL可行，但是，我已经在mapbox js api中对其进行了测试，但失败了，错误是无法解析URL，

我必须将这些url更改为完整的URL，以使其起作用。

import 'package:flutter/material.dart';

void main(){
  TimeOfDay day = TimeOfDay.now();
  switch(day.period.toString()){
    case 'DayPeriod.am': print('its morning');
      break;
    case 'DayPeriod.pm': print('its evening/night');
  }
}

如何在Openlayers 3中显示ESRI Vector基本映射

2 个答案: