@mapgis/webclient-common

<header id="page-title" class="page-title"> <span class="page-title-main">类名</span> <span class="page-title-sub">ArcGISVectorTileLayer</span> </header> <section> <article> <div class="container-overview"> <div class='vertical-section'> <div class="members"> <div class="member"> <h4 class="name" id="ArcGISVectorTileLayer"> <a class="href-link" href="#ArcGISVectorTileLayer">#</a> <span class="code-name" id="ArcGISVectorTileLayer" style="font-size:30px"> new ArcGISVectorTileLayer<span class="signature">(options)</span> </span> </h4> <div class="description"> <p>ArcGIS矢量瓦片图层<br/> <br/> 支持通过如下三种方式来初始化矢量瓦片图层对象：<br/> 1、通过服务基地址来初始化矢量瓦片图层对象；<br/> 2、通过加载矢量瓦片样式文件的方式来初始化矢量瓦片图层对象；<br/> 3、通过设置矢量瓦片样式的方式来初始化矢量瓦片图层对象；<br/> <br><br>[ES5引入方式]：<br/> zondy.layer.ArcGISVectorTileLayer() <br/> [ES6引入方式]：<br/> import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" <br/> <br/> 针对图层的操作请在图层加载完毕事件中进行<br/> Layer.on('layerview-created', function (result) {<br/> console.log("加载完毕:", result.layer)<br/> });<br/> 如果不想在该事件中放入业务代码，则请确认图层资源以加载完毕后再进行操作<br/> if(layer.loadStatus === 'loaded') {<br/> // 你的业务逻辑<br/> } <br/><br/> 同时也支持二次开发自定义业务逻辑，示例如下：<br/> <a href='#custom-es5'>[自定义矢量瓦片业务逻辑-es5]</a>，<a href='#custom-es6'>[自定义矢量瓦片业务逻辑-es6]</a></p> </div> <h4>参数</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th style="min-width: 100px;">默认值</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="default"> </td> <td class="description last"><p>构造参数</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>url</code></td> <td class="type"> <span class="param-type"> String </span> </td> <td class="default"> null </td> <td class="description last"><p>服务基地址，和style参数二者选其一<br> 基地址格式如下：<br> 'https://{ip}:{port}/arcgis/rest/services/{服务名称}/VectorTileServer'，<br> 参考示例：<a href='#vector-tile-server'>[加载矢量瓦片服务]</a><br/> 服务基地址也支持传入矢量瓦片样式文件地址，例如：<br> 'https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json'，<br> 参考示例：<a href='#vector-tile-json'>[加载矢量瓦片样式文件]</a><br/> 删除图层方法：<a href='#remove-layer'>[删除图层]</a></p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>style</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="default"> null </td> <td class="description last"><p>矢量瓦片样式，也可以支持通过传入矢量瓦片样式的方式构造矢量瓦片，注意矢量瓦片样式要符合arcgis矢量瓦片的规范，<br> 和url参数二者选其一<br> 参考示例：<a href='#vector-tile-style'>[加载矢量瓦片样式对象]</a></p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>minScale</code></td> <td class="type"> <span class="param-type"> Number </span> </td> <td class="default"> 0 </td> <td class="description last"><p>最小显示比例尺，图层在视图中可见的最小比例尺。</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>maxScale</code></td> <td class="type"> <span class="param-type"> Number </span> </td> <td class="default"> 0 </td> <td class="description last"><p>最大显示比例尺，图层在视图中可见的最大比例尺。</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>opacity</code></td> <td class="type"> <span class="param-type"> Number </span> </td> <td class="default"> 1 </td> <td class="description last"><p>图层透明度，0到1之间的值，0为完全透明，1为不透明，参考示例：<a href='#opacity'>[设置图层透明度]</a></p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>tokenKey</code></td> <td class="type"> <span class="param-type"> String </span> </td> <td class="default"> 'token' </td> <td class="description last"><p>token名</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>tokenValue</code></td> <td class="type"> <span class="param-type"> String </span> </td> <td class="default"> null </td> <td class="description last"><p>token值，只有当tokenValue存在时，才会绑定token</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>visible</code></td> <td class="type"> <span class="param-type"> Boolean </span> </td> <td class="default"> true </td> <td class="description last"><p>图层显示或隐藏，true则显示，false则隐藏，参考示例：<a href='#visible'>[设置图层显隐]</a></p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>labelsRenderMode</code></td> <td class="type"> <span class="param-type"> String </span> </td> <td class="default"> 'off-screen' </td> <td class="description last"><p>指定矢量瓦片注记的渲染模式,仅在三维上有效。on-screen表示使用三维接口实时渲染注记；off-screen表示通过先将注记渲染到图片上，再通过三维接口渲染到屏幕。<br/> 参考示例：<a href='#labels-3d'>[矢量瓦片三维注记]</a><br/></p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>clippingArea</code></td> <td class="type"> <span class="param-type"> <a link="Polygon.html" onclick="getTypeHTML(event)" href="Polygon.html">Polygon</a> </span> | <span class="param-type"> <a link="Extent.html" onclick="getTypeHTML(event)" href="Extent.html">Extent</a> </span> | <span class="param-type"> <a link="Circle.html" onclick="getTypeHTML(event)" href="Circle.html">Circle</a> </span> | <span class="param-type"> <a link="MultiPolygon.html" onclick="getTypeHTML(event)" href="MultiPolygon.html">MultiPolygon</a> </span> | <span class="param-type"> null </span> </td> <td class="default"> null </td> <td class="description last"><p>图层空间裁剪范围，仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <div class="method-parameter columns"> <div class="column is-2"><label>绑定事件</label></div> <div class="column is-10"> <ul> <li><a href="#图层加载完毕事件">图层加载完毕事件</a></li> <li><a href="#图层销毁完毕事件">图层销毁完毕事件</a></li> <li><a href="#图层更新完毕事件">图层更新完毕事件</a></li> <li><a href="#图层显隐更新完毕事件">图层显隐更新完毕事件</a></li> <li><a href="#图层透明度更新完毕事件">图层透明度更新完毕事件</a></li> </ul> </div> </div> <p class="summary"><h5>支持如下方法：</h5> <a href='#fromJSON'>[1、通过传入的json构造并返回一个新的几何对象]</a><br/> <a href="OGCLayer.html#toJSON"><code>2、导出为json对象</code></a><br/> <a href="VectorTileLayer.html#getStyleLayer"><code>3、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层对象</code></a><br/> <a href="VectorTileLayer.html#getStyleLayerIndex"><code>4、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层的序号</code></a><br/> <a href="VectorTileLayer.html#getStyleLayerId"><code>5、通过矢量瓦片样式图层的序号，找到对应的矢量瓦片样式图层的id</code></a><br/> <a href="VectorTileLayer.html#setStyleLayer"><code>6、设置样式图层属性对象</code></a><br/> <a href="VectorTileLayer.html#deleteStyleLayer"><code>7、删除样式图层</code></a><br/> <a href="VectorTileLayer.html#setStyleLayerVisibility"><code>8、设置样式图层可见性</code></a><br/> <a href="VectorTileLayer.html#getStyleLayerVisibility"><code>9、获取样式图层可见性</code></a><br/> <a href="VectorTileLayer.html#getPaintProperties"><code>10、获取样式图层绘制属性</code></a><br/> <a href="VectorTileLayer.html#setPaintProperties"><code>11、设置样式图层绘制属性</code></a><br/> <a href="VectorTileLayer.html#getLayoutProperties"><code>12、获取样式图层布局属性</code></a><br/> <a href="VectorTileLayer.html#setLayoutProperties"><code>13、设置样式图层布局属性</code></a><br/> <a href="VectorTileLayer.html#setExtendProperties"><code>14、设置样式图层的额外属性</code></a><br/> <a href="VectorTileLayer.html#getExtendProperties"><code>15、获取样式图层的额外属性</code></a><br/> <a href="VectorTileLayer.html#clone"><code>16、克隆图层</code></a><br/></p> <h5>示例</h5> <p class="code-caption"><h7 id='vector-tile-server'>初始化矢量瓦片对象</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { ArcGISVectorTileLayer } = zondy.layer // ES6引入方式 import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" // 初始化矢量瓦片图层 const arcgisVectorTileLayer = new ArcGISVectorTileLayer({ // 服务基地址 url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer' });</code></pre> <p class="code-caption"><h7 id='vector-tile-json'>加载矢量瓦片样式文件</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { ArcGISVectorTileLayer } = zondy.layer // ES6引入方式 import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" // 初始化矢量瓦片图层 const arcgisVectorTileLayer = new ArcGISVectorTileLayer({ // 样式文件地址 url: 'https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json' });</code></pre> <p class="code-caption"><h7 id='vector-tile-style'>加载矢量瓦片样式对象</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { ArcGISVectorTileLayer } = zondy.layer // ES6引入方式 import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" // 初始化矢量瓦片图层 const arcgisVectorTileLayer = new ArcGISVectorTileLayer({ // 设置你的样式 style: {} });</code></pre> <p class="code-caption"><h7 id='custom-es5'>自定义矢量瓦片业务逻辑-es5</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { ArcGISVectorTileLayer } = zondy.layer // ES6引入方式 import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" // 初始化矢量瓦片图层 const arcGISVectorTileLayer = new ArcGISVectorTileLayer({ // 矢量瓦片基地址 url: '' }); // 例如通过重写arcGISVectorTileLayer对象的covertCustomStyleToMVTStyle方法，来自定义矢量瓦片业务逻辑 arcGISVectorTileLayer.covertCustomStyleToMVTStyle = function(customStyle) { // 自定义你的业务逻辑 // 此方法必须要返回一个符合MapBox标准的矢量瓦片 return mvtStyle } // 在ES5模式下，如果更改了图层的业务逻辑，则必须通过图层的load方法来加载元信息，之后再添加图层 arcGISVectorTileLayer.load().then(() => { // 添加图层 map.add(arcGISVectorTileLayer) })</code></pre> <p class="code-caption"><h7 id='custom-es6'>自定义矢量瓦片业务逻辑-es6</h7></p> <pre class="prettyprint"><code>// ES6引入方式 import { ArcGISVectorTileLayer } from "@mapgis/webclient-common" // 在ES6模式下继承IGSVectorTileLayer，并重写其业务逻辑 class ArcGISVectorTileLayerCustom extends ArcGISVectorTileLayer { constructor(options) { super(options) } } // 重写方法 ArcGISVectorTileLayerCustom.prototype.covertCustomStyleToMVTStyle = function (customStyle) { // 自定义你的业务逻辑 // 此方法必须要返回一个符合MapBox标准的矢量瓦片 return mvtStyle } const customLayer = new ArcGISVectorTileLayerCustom({ // 矢量瓦片基地址 url: '' })</code></pre> <p class="code-caption"><h7 id='labels-3d'>矢量瓦片三维注记</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { LabelClass } = zondy const { ArcGISVectorTileLayer } = zondy.layer // ES6引入方式 import { ArcGISVectorTileLayer, LabelClass } from "@mapgis/webclient-common" // 初始化一个额外的图标DOM对象 const iconImage = new Image() iconImage.src = '图片地址或者base64字符串' // 初始化矢量瓦片图层 const arcGISVectorTileLayer = new ArcGISVectorTileLayer({ // 矢量瓦片基地址 url: '' }) // 加载图层元信息 arcGISVectorTileLayer.load().then((result) => { // 由于ArcGIS矢量瓦片没有子图层的概念，因此直接设置该属性到样式图层上 arcGISVectorTileLayer.setExtendProperties('样式图层id', 'labelingInfo', [ new LabelClass({ symbol: { // 填充颜色 rgba or 16进制颜色 color: 'rgba(255,255,255,1)', // 描边颜色 haloColor: 'rgba(0,0,0,0.5)', // 描边宽度 haloSize: 2, // 行高 lineHeight: 1.1, // 文本间距 letterSpacing: 2, // 字体样式参考css font: { size: 14, family: '微软雅黑', weight: 'normal', style: 'normal' }, // 额外的图标 textExtraIcon: iconImage, // 图标的大小 textExtraIconSize:20, // 图标方位 textExtraIconAnchor:'left' }, // 渲染方式 1.canvas 2.label 3.ground renderMode: 'canvas', // 最大可见范围 minScale: 60000000, // 最小可见范围 maxScale: 1, // 布局位置可选 1.above-left 2.above-center 3.above-right 4.center-left 5.center-center 6.center-right 7.below-left 8.below-center 9.below-right labelPlacement: 'above-center', // 高程采样参数 elevationInfo: { mode: 'OnTheGround', offset: 0 } }) ]) })</code></pre> <p class="code-caption"><h7 id='opacity'>设置图层透明度</h7></p> <pre class="prettyprint"><code>arcgisVectorTileLayer.opacity = 0.5</code></pre> <p class="code-caption"><h7 id='visible'>显示或隐藏图层</h7></p> <pre class="prettyprint"><code>arcgisVectorTileLayer.visible = !igsVectorTileLayer.visible</code></pre> <p class="code-caption"><h7 id='remove-layer'>删除图层</h7></p> <pre class="prettyprint"><code>map.remove(arcgisVectorTileLayer)</code></pre> </div> </div> </div> </div> <h3 class="subsection-title">继承关系</h3> <ul> <li><a link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html">VectorTileLayer</a></li> </ul> <div class='vertical-section'> <h3 id='member'>成员变量</h3> <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量概述</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code><a href="#capabilities">capabilities</a></code></td> <td class="name"> <code> <span class="param-type"> Array.<String> </span> </code> </td> <td class="name"><code><p>服务支持的能力</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#clippingArea">clippingArea</a></code></td> <td class="name"> <code> <span class="param-type"> <a link="Polygon.html" onclick="getTypeHTML(event)" href="Polygon.html">Polygon</a> </span> | <span class="param-type"> <a link="Extent.html" onclick="getTypeHTML(event)" href="Extent.html">Extent</a> </span> | <span class="param-type"> <a link="Circle.html" onclick="getTypeHTML(event)" href="Circle.html">Circle</a> </span> | <span class="param-type"> <a link="MultiPolygon.html" onclick="getTypeHTML(event)" href="MultiPolygon.html">MultiPolygon</a> </span> | <span class="param-type"> null </span> </code> </td> <td class="name"><code><p>空间裁剪范围</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#currentStyleInfo">currentStyleInfo</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code><p>当前的矢量瓦片样式信息，包含serviceUrl 、styleUrl 、spriteUrl 、glyphsUrl 以及style</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#description">description</a></code></td> <td class="name"> <code> <span class="param-type"> String </span> </code> </td> <td class="name"><code><p>图层描述</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#labelsRenderMode">labelsRenderMode</a></code></td> <td class="name"> <code> <span class="param-type"> String </span> </code> </td> <td class="name"><code><p>指定矢量瓦片注记的渲染模式,仅在三维上有效； on-screen: 使用Cesium接口实时渲染注记； off-screen: 使用矢量瓦片来绘制注记；请注意模式切换时，会造成性能损失，在显卡较弱的机器上会出现卡顿现象；</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#mvtExtent">mvtExtent</a></code></td> <td class="name"> <code> <span class="param-type"> Number </span> </code> </td> <td class="name"><code><p>mvt矢量瓦片相对坐标范围,默认为4096,表示矢量瓦片相对坐标的范围为0到4096</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#style">style</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code><p>矢量瓦片的mvt样式对象</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#tileInfo">tileInfo</a></code></td> <td class="name"> <code> <span class="param-type"> <a link="TileInfo.html" onclick="getTypeHTML(event)" href="TileInfo.html">TileInfo</a> </span> | <span class="param-type"> undefined </span> </code> </td> <td class="name"><code><p>瓦片切图信息</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#type">type</a></code></td> <td class="name"> <code> <span class="param-type"> String </span> </code> </td> <td class="name"><code><p>图层类型</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#url">url</a></code></td> <td class="name"> <code> <span class="param-type"> String </span> </code> </td> <td class="name"><code><p>矢量瓦片服务地址</p></code></td> </tr> </tbody> </table> </div> <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量详情</h4> <div class="members"> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> Array.<String> </span> </span> <h4 class="name" id="capabilities"> <a class="href-link" href="#capabilities">#</a> <span class="code-name"> capabilities </span> </h4> <div class="description"> <p>服务支持的能力</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="VectorTileLayer.html#capabilities">VectorTileLayer#capabilities</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> <a link="Polygon.html" onclick="getTypeHTML(event)" href="Polygon.html">Polygon</a> </span> | <span class="param-type"> <a link="Extent.html" onclick="getTypeHTML(event)" href="Extent.html">Extent</a> </span> | <span class="param-type"> <a link="Circle.html" onclick="getTypeHTML(event)" href="Circle.html">Circle</a> </span> | <span class="param-type"> <a link="MultiPolygon.html" onclick="getTypeHTML(event)" href="MultiPolygon.html">MultiPolygon</a> </span> | <span class="param-type"> null </span> </span> <h4 class="name" id="clippingArea"> <a class="href-link" href="#clippingArea">#</a> <span class="code-name"> clippingArea </span> </h4> <div class="description"> <p>空间裁剪范围</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="clippingArea" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#clippingArea">VectorTileLayer#clippingArea</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> Object </span> </span> <h4 class="name" id="currentStyleInfo"> <a class="href-link" href="#currentStyleInfo">#</a> <span class='tag'>readonly</span> <span class="code-name"> currentStyleInfo </span> </h4> <div class="description"> <p>当前的矢量瓦片样式信息，包含serviceUrl 、styleUrl 、spriteUrl 、glyphsUrl 以及style</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="currentStyleInfo" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#currentStyleInfo">VectorTileLayer#currentStyleInfo</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> String </span> </span> <h4 class="name" id="description"> <a class="href-link" href="#description">#</a> <span class="code-name"> description </span> </h4> <div class="description"> <p>图层描述</p> </div> <dl class="details"> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> String </span> </span> <h4 class="name" id="labelsRenderMode"> <a class="href-link" href="#labelsRenderMode">#</a> <span class="code-name"> labelsRenderMode </span> </h4> <div class="description"> <p>指定矢量瓦片注记的渲染模式,仅在三维上有效； on-screen: 使用Cesium接口实时渲染注记； off-screen: 使用矢量瓦片来绘制注记；请注意模式切换时，会造成性能损失，在显卡较弱的机器上会出现卡顿现象；</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="labelsRenderMode" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#labelsRenderMode">VectorTileLayer#labelsRenderMode</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> Number </span> </span> <h4 class="name" id="mvtExtent"> <a class="href-link" href="#mvtExtent">#</a> <span class="code-name"> mvtExtent </span> </h4> <div class="description"> <p>mvt矢量瓦片相对坐标范围,默认为4096,表示矢量瓦片相对坐标的范围为0到4096</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="mvtExtent" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#mvtExtent">VectorTileLayer#mvtExtent</a> </li></ul></dd> <dt class="tag-default">Default Value:</dt> <dd class="tag-default"><ul class="dummy"> <li>4096</li> </ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> Object </span> </span> <h4 class="name" id="style"> <a class="href-link" href="#style">#</a> <span class="code-name"> style </span> </h4> <div class="description"> <p>矢量瓦片的mvt样式对象</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="style" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#style">VectorTileLayer#style</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> <a link="TileInfo.html" onclick="getTypeHTML(event)" href="TileInfo.html">TileInfo</a> </span> | <span class="param-type"> undefined </span> </span> <h4 class="name" id="tileInfo"> <a class="href-link" href="#tileInfo">#</a> <span class='tag'>readonly</span> <span class="code-name"> tileInfo </span> </h4> <div class="description"> <p>瓦片切图信息</p> </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a href="VectorTileLayer.html#tileInfo">VectorTileLayer#tileInfo</a> </li></ul></dd> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> String </span> </span> <h4 class="name" id="type"> <a class="href-link" href="#type">#</a> <span class="code-name"> type </span> </h4> <div class="description"> <p>图层类型</p> </div> <dl class="details"> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"> String </span> </span> <h4 class="name" id="url"> <a class="href-link" href="#url">#</a> <span class="code-name"> url </span> </h4> <div class="description"> <p>矢量瓦片服务地址</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="url" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#url">VectorTileLayer#url</a> </li></ul></dd> </dl> </div> </div> </div> <div class='vertical-section'> <h3 id='function'>方法</h3> <h4 style="margin-top: 20px;margin-bottom: 20px;">方法概述</h4> <div class="members"> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>返回值类型</th> <th>描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code><a href="#fromJSON">fromJSON</a></code></td> <td class="name"> <code> <span class="param-type"> <a link="ArcGISVectorTileLayer.html" onclick="getTypeHTML(event)" href="ArcGISVectorTileLayer.html">ArcGISVectorTileLayer</a> </span> </code> </td> <td class="name"><code><p>通过传入的json构造并返回一个新的ArcGISVectorTileLayer对象</code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#clone">clone</a></code></td> <td class="name"> <code> <span class="param-type"> <a link="Layer.html" onclick="getTypeHTML(event)" href="Layer.html">Layer</a> </span> </code> </td> <td class="name"><code><p>克隆方法</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#covertCustomStyleToMVTStyle">covertCustomStyleToMVTStyle</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code><p>将自定义的style转成矢量瓦片的mvtStyle，可有子类或初始化时自定义</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#deleteStyleLayer">deleteStyleLayer</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getExtendProperties">getExtendProperties</a></code></td> <td class="name"> <code> <span class="param-type"> Any </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getLayoutProperties">getLayoutProperties</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> | <span class="param-type"> null </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getPaintProperties">getPaintProperties</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> | <span class="param-type"> null </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getStyleLayer">getStyleLayer</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getStyleLayerId">getStyleLayerId</a></code></td> <td class="name"> <code> <span class="param-type"> String </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getStyleLayerIndex">getStyleLayerIndex</a></code></td> <td class="name"> <code> <span class="param-type"> Number </span> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getStyleLayerVisibility">getStyleLayerVisibility</a></code></td> <td class="name"> <code> <span class="param-type"> Boolean </span> </code> </td> <td class="name"><code><p>获取样式图层可见性 </code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setExtendProperties">setExtendProperties</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setLayoutProperties">setLayoutProperties</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setPaintProperties">setPaintProperties</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setStyleLayer">setStyleLayer</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setStyleLayerVisibility">setStyleLayerVisibility</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#toJSON">toJSON</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code><p>转换为json对象</p></code></td> </tr> </tbody> </table> </div> <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4> <div class="member"> <h4 class="name" id=".fromJSON"> <a class="href-link" href="#.fromJSON">#</a> <span class='tag'>static</span> <span class="code-name" id="fromJSON" style="font-size:30px"> fromJSON<span class="signature">(json)</span> </span> </h4> <div class="description"> <p>通过传入的json构造并返回一个新的ArcGISVectorTileLayer对象<a id='fromJSON'></a></p> </div> <h4>参数</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>json</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="description last"><p>JSON对象</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>一个新的ArcGISVectorTileLayer对象</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> <a link="ArcGISVectorTileLayer.html" onclick="getTypeHTML(event)" href="ArcGISVectorTileLayer.html">ArcGISVectorTileLayer</a> </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="clone"> <a class="href-link" href="#clone">#</a> <span class="code-name" id="clone" style="font-size:30px"> clone<span class="signature">()</span> </span> </h4> <div class="description"> <p>克隆方法</p> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="clone" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#clone">VectorTileLayer#clone</a> </li></ul></dd> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>图层</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> <a link="Layer.html" onclick="getTypeHTML(event)" href="Layer.html">Layer</a> </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="covertCustomStyleToMVTStyle"> <a class="href-link" href="#covertCustomStyleToMVTStyle">#</a> <span class="code-name" id="covertCustomStyleToMVTStyle" style="font-size:30px"> covertCustomStyleToMVTStyle<span class="signature">(customStyle, tiles)</span> </span> </h4> <div class="description"> <p>将自定义的style转成矢量瓦片的mvtStyle，可有子类或初始化时自定义</p> </div> <h4>参数</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>customStyle</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="description last"><p>自定义的style</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>tiles</code></td> <td class="type"> <span class="param-type"> Array.<String> </span> </td> <td class="description last"><p>瓦片实际地址</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>修改好的符合矢量瓦片规范的样式对象</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> Object </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="deleteStyleLayer"> <a class="href-link" href="#deleteStyleLayer">#</a> <span class="code-name" id="deleteStyleLayer" style="font-size:30px"> deleteStyleLayer<span class="signature">(styleLayerId)</span> </span> </h4> <div class="description"> <a id='deleteStyleLayer'/> 删除样式图层 </div> <h4>参数</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>styleLayerId</code></td> <td class="type"> <span class="param-type"> String </span> </td> <td class="description last"><p>样式图层id</p></td> </tr> </tbody> </table> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="deleteStyleLayer" link="VectorTileLayer.html" onclick="getTypeHTML(event)" href="VectorTileLayer.html#deleteStyleLayer">VectorTileLayer#deleteStyleLayer</a> </li></ul></dd> </dl> </div> <div class="member"> <h4 class="name" id="getExtendProperties"> <a class="href-link" href="#getExtendProperties">#</a> <span class="code-name" id="getExtendProperties" style="font-size:30px"> getExtendProperties<span class="signature">(styleLayerId, key)</span>