“jspopularGL

2023年1月12日 (四) 16:16的最后版本

MVTLayer图层

更新时间:2023年01月12日

简介

JSAPI GL提供MVTLayer类支持加载MVT矢量瓦片数据,方便用户进行海量数据的个性化展示。MVTLayer继承XYZLayer网格瓦片设置相关参数，内部实例化TileLayer，用于添加MVT标准图层，通过options设置图层瓦片请求地址、显示等级、显示范围、显示图层、图层样式等。

MVT标准图层

DEMO详情

类参考

详情请见类文档

图层示例

1确认MVT瓦片请求地址

以商业慧图平台数据源为例, 瓦片请求地址需要明确创建数据用户ak、项目ID以及项目状态(未发布是0,已发布是1)

const ak = 【用户ak】;
const mapId = 【项目ID】;
const mode = 1;
var tileUrl = `https://api.map.baidu.com/region_lite/v1/region/huitu/encryption/mvt?ak=${ak}&mapId=${mapId}&x=[x]&y=[y]&z=[z]&tileSize=256&mode=${mode}`;

2创建MVTLayer图层

// 定义MVTayer图层
var layer = new BMapGL.MVTLayer({
    encrypt: true,
    idProperty: 'region_id',
    spanLevel: -1,
    noCollision: false, // 图层文字碰撞
    style: {
        point: {
            type: 'point',
            maxZoom: 12,
            painter: {
                name: ['get', 'name'],
                fontSize: 32,
                symbolPath: 9,
                symbolFillColor: ['case', ['boolean', ['feature-state', 'hover'], false], 'orange', 'red']
            }
        },
        fill: {
            type: 'polygon',
            painter: {
                fillColor: ['case', ['boolean', ['feature-state', 'hover'], false], 'blue', '#f5f975'],
                fillOpacity: 0.3,
                strokeWeight: 2,
                strokeOpacity: 0.6,
                strokeColor: 'rgb(141,33,33)'
            }
        }
    },
    minZoom: 9,
    maxZoom: 17,
    tileUrlTemplate: tileUrl
});

3定义事件

layer.addEventListener('onmousemove', function (e) {
layer.updateState(e.value, {
    hover: true
  }, false);
});
layer.addEventListener('onmouseout', function (e) {
    layer.clearState();
});

4添加图层到地图实例

map.addTileLayer(layer);

@@ 第2行： / 第2行： @@
 <div class="h1-title">MVTLayer图层</div><div id="update-time1">更新时间:2023年01月12日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">JSAPI GL提供MVTLayer类支持加载MVT矢量瓦片数据,方便用户进行海量数据的个性化展示。MVTLayer继承XYZLayer网格瓦片设置相关参数，内部实例化TileLayer，用于添加MVT标准图层，通过options设置图层瓦片请求地址、显示等级、显示范围、显示图层、图层样式等。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo/demo/mvtLayer.htm"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/mvtLayer.htm MVT标准图层]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#mvtLayer DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>类参考</span></div></div></div><div class="serve-explain-text">
 [https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a8b56 详情请见类文档]
-</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>图层示例</span></div></div></div><div class="devguide bInteligencemap-a"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>确认MVT瓦片请求地址</div><div class="devguidecenter"><div style="width: 642px;">以[https://lbsyun.baidu.com/apiconsole/user/choose 商业慧图平台]数据源为例, 瓦片请求地址需要明确创建数据用户ak、项目ID以及项目状态(未发布是0,已发布是1)</div><pre class="prettyprint codestyle">const ak = 【用户ak】;
+</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>图层示例</span></div></div></div>
+<div class="devguide bInteligencemap-a"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>确认MVT瓦片请求地址</div><div class="devguidecenter"><div style="width: 642px;">以[https://lbsyun.baidu.com/spatialconsole/center 商业慧图平台]数据源为例, 瓦片请求地址需要明确创建数据用户ak、项目ID以及项目状态(未发布是0,已发布是1)</div>
+<pre class="prettyprint codestyle">const ak = 【用户ak】;
 const mapId = 【项目ID】;
 const mode = 1;
 var tileUrl = `https://api.map.baidu.com/region_lite/v1/region/huitu/encryption/mvt?ak=${ak}&mapId=${mapId}&x=[x]&y=[y]&z=[z]&tileSize=256&mode=${mode}`;
 </pre>
-</div><div class="devguideorder"><span>2</span>创建MVTLayer图层</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;">// 定义MVTayer图层
+</div><div class="devguideorder"><span>2</span>创建MVTLayer图层</div><div class="devguidecenter">
+<pre class="prettyprint codestyle" style="overflow-y: auto;">// 定义MVTayer图层
 var layer = new BMapGL.MVTLayer({
      encrypt: true,
@@ 第40行： / 第44行： @@
 });
 </pre>
-</div><div class="devguideorder"><span>3</span>定义事件</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;">layer.addEventListener('onmousemove', function (e) {
+</div><div class="devguideorder"><span>3</span>定义事件</div><div class="devguidecenter">
+<pre class="prettyprint codestyle" style="overflow-y: auto;">layer.addEventListener('onmousemove', function (e) {
 layer.updateState(e.value, {
      hover: true
@@ 第49行： / 第54行： @@
 });
 </pre>
-</div><div class="devguideorder"><span>4</span>添加图层到地图实例</div><div class="devguidecenter"><pre class="prettyprint codestyle" style="overflow-y: auto;">map.addTileLayer(layer);
+</div><div class="devguideorder"><span>4</span>添加图层到地图实例</div><div class="devguidecenter">
+<pre class="prettyprint codestyle" style="overflow-y: auto;">map.addTileLayer(layer);
 </pre>
-</div></div>
+</div>
+</div>

文档全面上新

2023年1月12日 (四) 16:16的最后版本