1 問題描述
近期,將ArcGIS Api for JS v4.16更新到了ArcGIS Maps SDK for JS v4.27,原本去除地圖的css代碼失效了。
v4.26及以前版本 ,需要用.esri-view-surface--inset-outline:focus::after
控制邊框屬性。
從 v4.27版本開始 ,改用.esri-view-surface--touch-none::after
控制邊框屬性。
下面為沒有關閉地圖邊框的效果圖。(亮色版地圖為黑色邊框,暗色版地圖為白色邊框。下圖為亮色版地圖)
2 解決方案
ArcGIS Api for JS v4.26及以前版本
/*移除地圖邊框 ArcGIS Api for JS v4.26及以前版本*/
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: none !important;
}
/*不加.esri-view 也可以*/
.esri-view-surface--inset-outline:focus::after {
outline: none !important;
}
ArcGIS Maps SDK for JavaScript v4.27
/*移除地圖邊框 ArcGIS Maps SDK for JavaScript v4.27*/
.esri-view-surface--touch-none::after {
outline: none !important;
}
完整代碼:文章來源:http://www.zghlxwxcb.cn/news/detail-714787.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
/*移除地圖邊框 ArcGIS Maps SDK for JavaScript v4.27*/
.esri-view-surface--touch-none::after {
outline: none !important;
}
</style>
<!-- 從 CDN 加載 ArcGIS Maps SDK for JavaScript -->
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<!-- 引用 main.css 樣式表 -->
<script src="https://js.arcgis.com/4.27/"></script>
</head>
<body>
<!-- 存放地圖內(nèi)容的div -->
<div id="viewDiv"></div>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
// 創(chuàng)建Map對象,指定地圖
const map = new Map({
basemap: "topo-vector"
});
// 創(chuàng)建MapView對象
const view = new MapView({
container: "viewDiv", // viewDiv為容器div的id
map: map, // 地圖所在的Map對象
zoom: 4, // 初始LOD縮放等級(0-23) level of detail (LOD)
// scale: 50000000, // 設置初始比例尺為 1:50,000,000 zoom和scale選其一即可
center: [108, 32] // 地圖初始中心位置經(jīng)緯度 [longitude,latitude]
});
});
</script>
</body>
</html>
結果展示:文章來源地址http://www.zghlxwxcb.cn/news/detail-714787.html
到了這里,關于ArcGIS Maps SDK for JS:隱藏地圖邊框的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!