<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DisplayaCustomBasemapStyle</title>
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
"esri/layers/TileLayer",
], function(esriConfig, Map, MapView, Basemap, VectorTileLayer, TileLayer) {
esriConfig.apiKey = "AAPK9e6aa5a44a8141229ab2f44a1fdbe7faoqWEoLJ08r7fsvDn0LwNz67bx76JBaj2bpnnoNSh56cogZowxeGydmQetuwL2hxg";
//创建矢量切片图层
const vectorTileLayer = new VectorTileLayer({
portalItem: {
id: "6976148c11bd497d8624206f9ee03e30"
},
opacity: .75
});
//创建图像切片图层
const tileLayer = new TileLayer({
portalItem: {
id: "1b243539f4514b6ba35e7d995890db1d"
}
});
//创建底图
const basemap = new Basemap({
//baseLayers: [vectorTileLayer, tileLayer]
baseLayers: [tileLayer, vectorTileLayer] //这里图层的顺序代表显示时图层的上下顺序
});
//更新底图
const map = new Map({
basemap: basemap,
});
//创建视图显示自定义底图
const view = new MapView({
map: map,
center: [-100, 40],
zoom: 8,
container: "mapDiv"
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
WEBGIS加载自定义地图底图
最新推荐文章于 2024-03-12 11:21:50 发布