在智慧城市建设中,城市交通态势感知至关重要。本文介绍了一种基于Vue3和百度地图GL的解决方案,用于绘制可交互线图层,帮助用户直观地了解城市道路交通状况。
该代码实现了以下功能:
async mounted() {
await Promise.all([
this.loadScripts([
// 百度地图GL脚本和样式
'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
// 其他需要的脚本和样式
'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
]),
this.loadStyles([
'http://api.map.baidu.com/res/webgl/10/bmap.css',
'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
]),
])
}
该代码段负责加载百度地图GL所需的脚本和样式。
var map = new BMapGL.Map('allmap', {
displayOptions: {
poi: false,
poiText: false,
},
})
创建百度地图GL实例,并设置地图选项,如隐藏兴趣点和兴趣点文本。
var lineLayer = null
function addLineLayer() {
fetch(
'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/lineLayerData.json',
)
.then((res) => {
return res.json()
})
.then((testLineData) => {
if (!lineLayer) {
lineLayer = new BMapGL.LineLayer({
enablePicked: true,
autoSelect: true,
pickWidth: 30,
pickHeight: 30,
opacity: 1,
selectedColor: 'blue', // 选中项颜色
style: {
sequence: false, // 是否采用间隔填充纹理,默认false
marginLength: 8, // 间隔距离,默认16,单位像素
borderColor: '#999',
borderMask: true, // 是否受内部填充区域掩膜,默认true,如果存在borderWeight小于0,则自动切换false
borderWeight: ['match', ['get', 'name'], 'demo1', 2, 0], // 描边宽度,可以设置负值
strokeWeight: 8, // 描边线宽度,默认0
strokeLineJoin: 'miter', //描边线连接处类型, 可选'miter', 'round', 'bevel'
strokeLineCap: 'square', // 描边线端头类型,可选'round', 'butt', 'square',默认round
// 填充纹理图片地址,默认是空。图片需要是竖向表达,在填充时会自动横向处理。
strokeTextureUrl: [
'match',
['get', 'name'],
'demo1',
upTwo,
'demo2',
icon1,
'demo3',
icon2,
icon3,
],
strokeTextureWidth: ['match', ['get', 'name'], 'demo1', 32, 16],
strokeTextureHeight: [
'match',
['get', 'name'],
'demo1',
64,
64,
],
},
})
}
lineLayer.addEventListener('click', function (e) {
if (e.value.dataIndex !== -1 && e.value.dataItem) {
this.updateState(e.value.dataIndex, { picked: true })
}
})
lineLayer.setData(testLineData)
map.addNormalLayer(lineLayer)
})
}
该代码段定义了一个函数addLineLayer
,用于创建线图层。它从一个JSON文件中加载线图层数据,并设置图层样式,如描边颜色、填充纹理和事件响应。
// 添加图层
function addLineLayer() {
// ...
}
// 移除图层
function removeLineLayer() {
map.removeNormalLayer(lineLayer)
}
这些函数分别用于添加和移除线图层。
通过本段代码的开发,我们掌握了如何使用Vue3和百度地图GL绘制可交互线图层,并了解了相关API的使用。
未来,该卡片功能可以进一步拓展和优化: