ArcGIS JS 基础教程24VectorTileLayer 矢量切片图层零、写在前面一、功能介绍二、功能实现2.1 创建并加入 3D 场景2.2 在 3D 中切换样式loadStyle2.3 可见性与透明度3D 通用三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍VectorTileLayer用于加载矢量切片Vector Tile服务。与栅格切片图片不同矢量切片在客户端以矢量形式实时渲染样式因此具有数据量小、缩放无锯齿、支持高 DPI 屏幕、可动态切换样式等优势。在三维 SceneView中VectorTileLayer会被自动贴合到地形/地面之上draped非常适合作为大比例尺精细底图、暗黑/明亮主题底图或离线矢量包。参考官方 VectorTileLayer API⚠️三维场景下的限制务必注意不能像 2D 那样对单个样式图层做setPaintProperties/setLayoutProperties等微调只能整体替换样式。effectCSS 滤镜特效在 3D 中不支持blendMode在 3D 中支持。切换样式请使用loadStyle()方法整体替换 style JSON。二、功能实现核心 APIVectorTileLayerarcgis/core/layers/VectorTileLayer.js。2.1 创建并加入 3D 场景constVectorTileLayerawait$arcgis.import(arcgis/core/layers/VectorTileLayer.js);// 方式一通过服务/样式 URLconstvtlnewVectorTileLayer({url:https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer});// 方式二通过 portalItem本示例采用constvtlnewVectorTileLayer({portalItem:{id:7675d44bb1e4428aa2c30a9b68f97822}});map.add(vtl);// 在 3D 中自动贴合地面2.2 在 3D 中切换样式loadStyle3D 场景无法逐图层改样式只能整体替换样式文件style JSON遵循 MapLibre v8 规范// 切换到另一套完整样式vtl.loadStyle(https://www.arcgis.com/sharing/rest/content/items/effe3475f05a4d608e66fd6eeb2113c0/resources/styles/root.json).then(()console.log(样式切换完成)).catch(errconsole.error(err));// 还原初始样式读取只读属性 currentStyleInfo.styleUrlconstoriginalvtl.currentStyleInfo.styleUrl;vtl.loadStyle(original);2.3 可见性与透明度3D 通用vtl.visiblefalse;// 隐藏vtl.opacity0.5;// 半透明0~1可见性/透明度/比例尺控制详见第 26 课本课聚焦「矢量切片 三维贴合 样式切换」。三、功能应用应用场景说明大比例尺精细底图道路、建筑轮廓等矢量要素在 3D 中清晰呈现缩放无锯齿暗黑/明亮主题切换通过loadStyle()一键切换整套底图样式半透明底图叠加设置opacity让矢量底图与影像/地形叠加对比离线矢量包矢量切片体积小适合离线三维场景部署四、核心代码完整代码已保存至sample/lesson24_vector_tile_layer.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第24课VectorTileLayer 矢量切片图层/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Microsoft YaHei,sans-serif;}#mapContainer{width:100vw;height:100vh;}.page-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);padding:10px 24px;border-radius:6px;font-size:18px;font-weight:bold;z-index:100;box-shadow:0 2px 8pxrgba(0,0,0,0.15);}.control-panel{position:absolute;top:80px;right:20px;background:rgba(255,255,255,0.95);padding:16px;border-radius:8px;box-shadow:0 2px 12pxrgba(0,0,0,0.15);z-index:100;min-width:300px;}.control-panel h3{margin:0 0 8px 0;font-size:14px;color:#333;}.section{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eee;}.section:last-child{border-bottom:none;margin-bottom:0;}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}.btn-row button{flex:1;min-width:60px;padding:6px 0;border:1px solid #d9d9d9;border-radius:4px;background:white;cursor:pointer;font-size:12px;}.btn-row button:hover{border-color:#1890ff;color:#1890ff;}.btn-row button.on{background:#1890ff;color:white;border-color:#1890ff;}.info-card{margin-top:10px;padding:10px 12px;background:#f0f5ff;border-radius:6px;border-left:3px solid #1890ff;font-size:12px;line-height:1.6;}.info-card .val{font-weight:bold;color:#1890ff;}.status-text{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 20px;border-radius:20px;font-size:13px;z-index:100;pointer-events:none;white-space:nowrap;}/style/headbodyh1classpage-title第24课VectorTileLayer 矢量切片图层/h1divclasscontrol-paneldivclasssectionh3️ 矢量切片图层3D 贴合地面/h3divclassbtn-rowbuttonidbtnVisibleclasson️ 显示 / 隐藏/buttonbuttonidbtnOpacity 透明度/button/divdivclassbtn-rowbuttonidbtnStyleA 切换暗色样式/buttonbuttonidbtnStyleReset↩️ 还原样式/button/div/divdivclassinfo-carddiv图层状态spanclassvalidlayerStatus加载中.../span/divdiv3D 中 VTL 自动贴合地形/div/div/divdivclassstatus-textidstatusTextVectorTileLayer | 矢量切片 · 3D 贴合地面 · 支持样式切换/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constVectorTileLayerawait$arcgis.import(arcgis/core/layers/VectorTileLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:-118.24,latitude:34.05,z:12000},heading:0,tilt:60}});window.viewview;// VectorTileLayer通过 portalItem 加载矢量切片 constvtlnewVectorTileLayer({portalItem:{id:7675d44bb1e4428aa2c30a9b68f97822}});map.add(vtl);letoriginalStylenull;view.when((){vtl.when((){originalStylevtl.currentStyleInfovtl.currentStyleInfo.styleUrl;document.getElementById(layerStatus).textContent已加载;}).catch(err{document.getElementById(layerStatus).textContent加载失败;console.error(err);});});functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}// 显示 / 隐藏document.getElementById(btnVisible).addEventListener(click,function(){vtl.visible!vtl.visible;this.classList.toggle(on,vtl.visible);setStatus(图层(vtl.visible?显示:隐藏));});// 透明度document.getElementById(btnOpacity).addEventListener(click,(){vtl.opacityvtl.opacity1?0.5:1;setStatus(透明度vtl.opacity);});// 切换暗色样式整体替换 style JSONdocument.getElementById(btnStyleA).addEventListener(click,(){vtl.loadStyle(https://www.arcgis.com/sharing/rest/content/items/effe3475f05a4d608e66fd6eeb2113c0/resources/styles/root.json).then(()setStatus(已切换为暗色样式)).catch(errsetStatus(样式切换失败err.message));});// 还原初始样式document.getElementById(btnStyleReset).addEventListener(click,(){if(originalStyle){vtl.loadStyle(originalStyle).then(()setStatus(已还原初始样式)).catch(errsetStatus(样式还原失败err.message));}});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson24.html操作说明场景加载后矢量切片图层自动贴合在三维地形之上。点击「显示 / 隐藏」切换图层可见性。点击「透明度」在1.0与0.5之间切换观察半透明叠加效果。点击「切换暗色样式」通过loadStyle()整体替换为暗色样式。点击「还原样式」加载currentStyleInfo.styleUrl回到初始样式。六、关键 API 说明API说明new VectorTileLayer({ url | portalItem | style })构造矢量切片图层vtl.loadStyle(styleUrl | styleJson)3D 中整体替换样式返回Promisevoidvtl.currentStyleInfo.styleUrl只读当前样式地址用于还原vtl.visible图层显隐booleanvtl.opacity图层透明度0~13D 限制不支持逐图层改样式setPaintProperties等仅 2D、不支持effect参考链接VectorTileLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程23GaussianSplatLayer 高斯泼溅图层➡️下一篇ArcGIS JS 基础教程25GeoJSONLayer 与 KML 图层小贴士在三维场景中VectorTileLayer最大的价值是轻量、清晰的矢量底图。loadStyle()是 3D 下唯一合法的「换肤」手段——记住它是「整体替换」而非「局部修改」这与 2D 的setPaintProperties思路完全不同。 ArcGIS JS 基础教程（24）：VectorTileLayer 矢量切片图层
ArcGIS JS 基础教程24VectorTileLayer 矢量切片图层零、写在前面一、功能介绍二、功能实现2.1 创建并加入 3D 场景2.2 在 3D 中切换样式loadStyle2.3 可见性与透明度3D 通用三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞给教程充电 评论提问必回 收藏下次再看一、功能介绍VectorTileLayer用于加载矢量切片Vector Tile服务。与栅格切片图片不同矢量切片在客户端以矢量形式实时渲染样式因此具有数据量小、缩放无锯齿、支持高 DPI 屏幕、可动态切换样式等优势。在三维 SceneView中VectorTileLayer会被自动贴合到地形/地面之上draped非常适合作为大比例尺精细底图、暗黑/明亮主题底图或离线矢量包。参考官方 VectorTileLayer API⚠️三维场景下的限制务必注意不能像 2D 那样对单个样式图层做setPaintProperties/setLayoutProperties等微调只能整体替换样式。effectCSS 滤镜特效在 3D 中不支持blendMode在 3D 中支持。切换样式请使用loadStyle()方法整体替换 style JSON。二、功能实现核心 APIVectorTileLayerarcgis/core/layers/VectorTileLayer.js。2.1 创建并加入 3D 场景constVectorTileLayerawait$arcgis.import(arcgis/core/layers/VectorTileLayer.js);// 方式一通过服务/样式 URLconstvtlnewVectorTileLayer({url:https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer});// 方式二通过 portalItem本示例采用constvtlnewVectorTileLayer({portalItem:{id:7675d44bb1e4428aa2c30a9b68f97822}});map.add(vtl);// 在 3D 中自动贴合地面2.2 在 3D 中切换样式loadStyle3D 场景无法逐图层改样式只能整体替换样式文件style JSON遵循 MapLibre v8 规范// 切换到另一套完整样式vtl.loadStyle(https://www.arcgis.com/sharing/rest/content/items/effe3475f05a4d608e66fd6eeb2113c0/resources/styles/root.json).then(()console.log(样式切换完成)).catch(errconsole.error(err));// 还原初始样式读取只读属性 currentStyleInfo.styleUrlconstoriginalvtl.currentStyleInfo.styleUrl;vtl.loadStyle(original);2.3 可见性与透明度3D 通用vtl.visiblefalse;// 隐藏vtl.opacity0.5;// 半透明0~1可见性/透明度/比例尺控制详见第 26 课本课聚焦「矢量切片 三维贴合 样式切换」。三、功能应用应用场景说明大比例尺精细底图道路、建筑轮廓等矢量要素在 3D 中清晰呈现缩放无锯齿暗黑/明亮主题切换通过loadStyle()一键切换整套底图样式半透明底图叠加设置opacity让矢量底图与影像/地形叠加对比离线矢量包矢量切片体积小适合离线三维场景部署四、核心代码完整代码已保存至sample/lesson24_vector_tile_layer.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第24课VectorTileLayer 矢量切片图层/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Microsoft YaHei,sans-serif;}#mapContainer{width:100vw;height:100vh;}.page-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);padding:10px 24px;border-radius:6px;font-size:18px;font-weight:bold;z-index:100;box-shadow:0 2px 8pxrgba(0,0,0,0.15);}.control-panel{position:absolute;top:80px;right:20px;background:rgba(255,255,255,0.95);padding:16px;border-radius:8px;box-shadow:0 2px 12pxrgba(0,0,0,0.15);z-index:100;min-width:300px;}.control-panel h3{margin:0 0 8px 0;font-size:14px;color:#333;}.section{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eee;}.section:last-child{border-bottom:none;margin-bottom:0;}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}.btn-row button{flex:1;min-width:60px;padding:6px 0;border:1px solid #d9d9d9;border-radius:4px;background:white;cursor:pointer;font-size:12px;}.btn-row button:hover{border-color:#1890ff;color:#1890ff;}.btn-row button.on{background:#1890ff;color:white;border-color:#1890ff;}.info-card{margin-top:10px;padding:10px 12px;background:#f0f5ff;border-radius:6px;border-left:3px solid #1890ff;font-size:12px;line-height:1.6;}.info-card .val{font-weight:bold;color:#1890ff;}.status-text{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 20px;border-radius:20px;font-size:13px;z-index:100;pointer-events:none;white-space:nowrap;}/style/headbodyh1classpage-title第24课VectorTileLayer 矢量切片图层/h1divclasscontrol-paneldivclasssectionh3️ 矢量切片图层3D 贴合地面/h3divclassbtn-rowbuttonidbtnVisibleclasson️ 显示 / 隐藏/buttonbuttonidbtnOpacity 透明度/button/divdivclassbtn-rowbuttonidbtnStyleA 切换暗色样式/buttonbuttonidbtnStyleReset↩️ 还原样式/button/div/divdivclassinfo-carddiv图层状态spanclassvalidlayerStatus加载中.../span/divdiv3D 中 VTL 自动贴合地形/div/div/divdivclassstatus-textidstatusTextVectorTileLayer | 矢量切片 · 3D 贴合地面 · 支持样式切换/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constVectorTileLayerawait$arcgis.import(arcgis/core/layers/VectorTileLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:-118.24,latitude:34.05,z:12000},heading:0,tilt:60}});window.viewview;// VectorTileLayer通过 portalItem 加载矢量切片 constvtlnewVectorTileLayer({portalItem:{id:7675d44bb1e4428aa2c30a9b68f97822}});map.add(vtl);letoriginalStylenull;view.when((){vtl.when((){originalStylevtl.currentStyleInfovtl.currentStyleInfo.styleUrl;document.getElementById(layerStatus).textContent已加载;}).catch(err{document.getElementById(layerStatus).textContent加载失败;console.error(err);});});functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}// 显示 / 隐藏document.getElementById(btnVisible).addEventListener(click,function(){vtl.visible!vtl.visible;this.classList.toggle(on,vtl.visible);setStatus(图层(vtl.visible?显示:隐藏));});// 透明度document.getElementById(btnOpacity).addEventListener(click,(){vtl.opacityvtl.opacity1?0.5:1;setStatus(透明度vtl.opacity);});// 切换暗色样式整体替换 style JSONdocument.getElementById(btnStyleA).addEventListener(click,(){vtl.loadStyle(https://www.arcgis.com/sharing/rest/content/items/effe3475f05a4d608e66fd6eeb2113c0/resources/styles/root.json).then(()setStatus(已切换为暗色样式)).catch(errsetStatus(样式切换失败err.message));});// 还原初始样式document.getElementById(btnStyleReset).addEventListener(click,(){if(originalStyle){vtl.loadStyle(originalStyle).then(()setStatus(已还原初始样式)).catch(errsetStatus(样式还原失败err.message));}});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson24.html操作说明场景加载后矢量切片图层自动贴合在三维地形之上。点击「显示 / 隐藏」切换图层可见性。点击「透明度」在1.0与0.5之间切换观察半透明叠加效果。点击「切换暗色样式」通过loadStyle()整体替换为暗色样式。点击「还原样式」加载currentStyleInfo.styleUrl回到初始样式。六、关键 API 说明API说明new VectorTileLayer({ url | portalItem | style })构造矢量切片图层vtl.loadStyle(styleUrl | styleJson)3D 中整体替换样式返回Promisevoidvtl.currentStyleInfo.styleUrl只读当前样式地址用于还原vtl.visible图层显隐booleanvtl.opacity图层透明度0~13D 限制不支持逐图层改样式setPaintProperties等仅 2D、不支持effect参考链接VectorTileLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程23GaussianSplatLayer 高斯泼溅图层➡️下一篇ArcGIS JS 基础教程25GeoJSONLayer 与 KML 图层小贴士在三维场景中VectorTileLayer最大的价值是轻量、清晰的矢量底图。loadStyle()是 3D 下唯一合法的「换肤」手段——记住它是「整体替换」而非「局部修改」这与 2D 的setPaintProperties思路完全不同。