javascript - OL-Cesium - 来自 services.arcgisonline.com 的源图
问题描述
我在开放层 (5.2.0) 中有一个简单的 2d 地图,它来自以下网址:https ://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer 。当我切换到 ol-cesium 时,地图不再显示,我只看到一个黑色圆圈(地球)。这是代码:
它适用于 OpenStreetMap,问题是当我尝试使用来自 arcgisonline.com 的地图时
<!doctype html>
<html lang="en">
<head>
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<link type="text/css" rel="stylesheet" href="/csiaps/webjars/openlayers/5.2.0/ol.css" />
<link type="text/css" rel="stylesheet" href="/csiaps/js/olcesium/olcs.css" />
<script type="text/javascript" src="/csiaps/webjars/openlayers/5.2.0/ol.js"></script>
<script type="text/javascript" src="/csiaps/js/cesium/Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="/csiaps/js/olcesium/olcesium.js"></script>
<script>
var ol3d = null;
var baseLayerGroup;
function createArcGISCacheLayer(name, url, layerInfoParam) {
name = 'NatGeo_World_Map';
url = 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer';
layerInfoParam = <NEVER MIND, not include for this post>;
var wrapDateLineOption = true;
var layer = new ol.layer.Image({
visible : true,
source : new ol.source.ImageArcGISRest({
url : url,
params : {
"layerInfo" : layerInfoParam,
"wrapDateLine" : wrapDateLineOption
}
})
});
layer.set('title', name);
return layer;
}
</script>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layer = createArcGISCacheLayer(null, null, null);
var map = new ol.Map({
target : 'map',
layers : [ layer ],
view : new ol.View({
center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
zoom : 4
})
});
function showHideMap() {
if (!ol3d || !ol3d.getEnabled()){
ol3d = new olcs.OLCesium({
map : map,
});
}
ol3d.setEnabled(!ol3d.getEnabled());
}
</script>
<a href="javascript:showHideMap();">3d</a>
</body>
</html>
我希望 ol-celium 以 3d 格式格式化已经加载的 2d 地图并显示它们而不是黑色地图
解决方案
这是一个瓦片层
var layer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer'
})
});
由于它是 EPSG:3857 并使用标准网格,因此它也可以设置为 XYZ 源并且打开速度更快(请注意,与大多数 XYZ 源相比,x 和 y 是相反的)
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'
})
});
推荐阅读
- java - 无法将新对象添加到 arraylist
- reactjs - 如果你发送一个在 React Xstate 中不存在的事件会发生什么?
- cordova - 无法安装“corodova-plugin-googleplus”
- flutter - Flutter 中的自定义 BouncingScroll 效果
- javascript - 网络客户端主机识别(如 Netflix)
- java - Spring Boot 应用程序从 azure dev ops 部署到 appengine
- javascript - 修改 JS 寻呼机 - 如何使用 JQuery 替换 html 元素
- rust - 使用 Nom 5 解析带有转义引号的单引号字符串
- bash - 如何从 Apache 访问日志中解析每个 IP,并在 bash 脚本的 CSV 文件中计算来自它们的每个唯一请求?
- python - 如何在 Python 中对对象进行排序