| 第5行： | 第5行： | ||
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>新建发布</span></div></div></div> | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>新建发布</span></div></div></div> | ||
<div style="width: 680px;"> | <div style="width: 680px;"> | ||
| − | <div><span></span><span style="display: inline-block;color: transparent; width: 0px;height: 0px;border: solid 3px #999;border-radius: 4px;padding: 0px;line-height: 0px;margin-right: 15px;position: relative;top: 0px;left: 0px;"></span>点击【发布项目】选择要发布为MVT服务的项目</div> | + | <div><span style="display:inline-block; width:5px"></span><span style="display: inline-block;color: transparent; width: 0px;height: 0px;border: solid 3px #999;border-radius: 4px;padding: 0px;line-height: 0px;margin-right: 15px;position: relative;top: 0px;left: 0px;"></span>点击【发布项目】选择要发布为MVT服务的项目</div> |
<div><span style="display: inline-block;color: transparent; width: 0px;height: 0px;border: solid 3px #999;border-radius: 4px;padding: 0px;line-height: 0px;margin-right: 15px;position: relative;top: 0px;left: 0px;"></span>点击【发布】对项目进行发布，后续可以通过JS API对服务图层进行加载</div> | <div><span style="display: inline-block;color: transparent; width: 0px;height: 0px;border: solid 3px #999;border-radius: 4px;padding: 0px;line-height: 0px;margin-right: 15px;position: relative;top: 0px;left: 0px;"></span>点击【发布】对项目进行发布，后续可以通过JS API对服务图层进行加载</div> | ||
</div> | </div> | ||
2023年1月5日 (四) 18:26的版本
项目发布
更新时间：2022年12月28日
新建发布
点击【发布项目】选择要发布为MVT服务的项目
点击【发布】对项目进行发布，后续可以通过JS API对服务图层进行加载
使用地图JS API调用发布的项目
1使用JSAPI GL版本创建地图，地图创建参考文档
2确认创建项目时用户ak以及发布项目的ID，拼接最终请求瓦片地址如下：
https://api.map.baidu.com/region_lite/v1/region/mvt?ak=【用户ak】&mapId=【项目ID】&x=[x]&y=[y]&z=[z]&tileSize=256&mode=1
3使用JSAPI MVTLayer开发接口开发矢量图层，添加到Map实例中
const ak =【用户ak】;
const mapId =【
项目ID】
;
var mapCustom = new BMapGL.MVTLayer({
idProperty: 'region_id',
style: {
point: {
type: 'point',
painter: {
symbolPath: 1,
symbolScale: 4,
symbolFillColor: ['case', ['boolean', ['feature-state', 'hover'], false], '#ff8b1a', 'red']
}
},
line: {
type: 'polyline',
painter: {
strokeWeight: 4,
strokeColor: ['case', ['boolean', ['feature-state', 'hover'], false], '#ff8b1a', '#48cec3'],
}
},
fill: {
type: 'polygon',
painter: {
fillColor: ['case', ['boolean', ['feature-state', 'hover'], false], '#ff8b1a', 'blue'],
fillOpacity: 0.6,
strokeWeight: 2,
strokeOpacity: 1,
strokeColor: 'blue'
}
}
},
tileUrlTemplate: `https://api.map.baidu.com/region_lite/v1/region/mvt?ak=${ak}&mapId=${mapId}&x=[x]&y=[y]&z=[z]&tileSize=256&mode=1`
});
mapCustom.addEventListener('onclick', function (e) {
console.log('onclick', e);
});
mapCustom.addEventListener('onmousemove', function (e) {
mapCustom.updateState(e.value, {
hover: true
}, false);
});
mapCustom.addEventListener('onmouseout', function (e) {
mapCustom.clearState();
});
map.addTileLayer(mapCustom);
