arcgis api 4.x for js地圖加載第三方矢量切片

時間 2020-05-30

標籤 arcgis api 4.x 地圖加載第三方矢量切片欄目 JavaScript 简体版

原文原文鏈接

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 4.x for js：esri 官網 api，裏面詳細的介紹 arcgis api 4.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 4.x 的好素材。javascript

內容概覽

arcgis api 4.x for js地圖加載第三方矢量切片
參考文獻：ArcGIS JS 4加載第三方矢量切片css

實現效果圖以下：
html
html 頁面完整代碼java

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>arcgis api 4.x for js 地圖加載第三方矢量切片</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
 
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
 
<script>
 
var style = {
"version": 8,
"sources": {
"osm": {
"tiles": ["https://osm-lambda.tegola.io/v1/maps/osm/{z}/{x}/{y}.pbf"],
"type": "vector"
}
},
"layers": [
{
id: "land",
type: "fill",
source: "osm",
"source-layer": "land",
minzoom: 0,
maxzoom: 24,
paint: {
"fill-color": "rgba(255, 255, 0, 0.8)"
}
}
],
"id": "test"
}
 
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/layers/VectorTileLayer",
"esri/layers/TileLayer",
"dojo/domReady!"
], function(Map, MapView, SceneView, VectorTileLayer,TileLayer) {
 
var layer = new TileLayer({
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
});
map = new Map({//加載arcgis在線地圖
layers:[layer]
});
//var map = new Map();
/*view = new MapView({//建立視圖
container: "viewDiv",
map: map,
zoom: 2,
center: [-98.5795, 39.8283] // longitude, latitude
});*/
view = new SceneView({//建立視圖
container: "viewDiv",
map: map,
zoom: 2,
center: [-98.5795, 39.8283] // longitude, latitude
});
 
var tileLyr = new VectorTileLayer({
style: style
});
map.add(tileLyr);
 
});
</script>
</head>
 
<body>
<div id="viewDiv"></div>
</body>
</html>

更多精彩文章見GIS之家小專欄：GIS之家小專欄git

相關文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波api

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。