使用 ArcGIS JavaScript API v4.12 不显示基本 ESRI tilelayer
Basic ESRI tilelayer not displaying using ArcGIS JavaScript API v4.12
我正在尝试在 HTML 页面中加载 ESRI 切片图层,但由于某种原因地图未显示。
这应该是一个简单的过程,我无法确定问题所在(我在控制台中没有收到任何错误消息 window)。
有什么建议吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(TileLayer, Map, MapView) {
var layer = new TileLayer({
url:
"https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
因为你的进口订单有误。你应该改变这一行
function(TileLayer, Map, MapView)
至
function(Map, MapView,TileLayer) {
https://jsfiddle.net/h31m5ub7/
完整代码:;
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView,TileLayer) {
var layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
我正在尝试在 HTML 页面中加载 ESRI 切片图层,但由于某种原因地图未显示。
这应该是一个简单的过程,我无法确定问题所在(我在控制台中没有收到任何错误消息 window)。
有什么建议吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(TileLayer, Map, MapView) {
var layer = new TileLayer({
url:
"https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
因为你的进口订单有误。你应该改变这一行
function(TileLayer, Map, MapView)
至
function(Map, MapView,TileLayer) {
https://jsfiddle.net/h31m5ub7/
完整代码:; `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView,TileLayer) {
var layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>