添加矢量切片图层
将已发布的矢量切片图层添加至现有地图。
矢量切片图层是托管图层。数据源是矢量切片数据。通过数据管理工具发布。
在本教程中，使用默认样式显示宗地矢量切片图层。
步骤
创建新 Pen
添加模块
在
require语句中，添加VectorTileLayer模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoScene API for JavaScript: 添加矢量切片图层</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/layers/VectorTileLayer", "geoscene/views/MapView" ], function (geosceneConfig,Map, VectorTileLayer, MapView) { const vtlLayer = new VectorTileLayer({ url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/" }); geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-light-gray", layers: [vtlLayer] }); const view = new MapView({ container: "viewDiv", center: [-118.80543,34.02700], zoom: 13, map: map }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
添加矢量切片图层
创建
VectorTileLayer。设置url属性以引用矢量切片图层。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoScene API for JavaScript: 添加矢量切片图层</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/layers/VectorTileLayer", "geoscene/views/MapView" ], function (geosceneConfig,Map, VectorTileLayer, MapView) { const vtlLayer = new VectorTileLayer({ url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/" }); geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-light-gray", layers: [vtlLayer] }); const view = new MapView({ container: "viewDiv", center: [-118.80543,34.02700], zoom: 13, map: map }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
更新地图
将
layers设置为vtlLayer元素。Change line Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoScene API for JavaScript: 添加矢量切片图层</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/layers/VectorTileLayer", "geoscene/views/MapView" ], function (geosceneConfig,Map, VectorTileLayer, MapView) { const vtlLayer = new VectorTileLayer({ url: "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer/" });
const map = new Map({ basemap: "tianditu-vector", layers: [vtlLayer] }); const view = new MapView({ container: "viewDiv", center: [-118.80543,34.02700], zoom: 13, map: map }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
您应看到在底图图层上显示的宗地矢量切片图层。
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟