前言关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 4.x for js： esri 官网 api ，里面详细的介绍 arcgis api 4.x 各个类的介绍，还有就是在线例子： esri 官网在线例子，这个也是学习 arcgis api 4.x 的好素材。 html 页面完整代码 <!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>

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

vip168

前言
关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 4.x for js：esri 官网 api，里面详细的介绍 arcgis api 4.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 4.x 的好素材。
html 页面完整代码

<!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": "

此内容登录或注册后可见