本代码用于在百度地图中展示北京市的相关地理信息,包括北京各区边界、北京市边界以及北京市内的兴趣点(POI)。该代码适用于需要在网页或应用程序中展示北京市地理信息的情景,例如城市规划、旅游指南或地图导航等。
本代码的基本功能如下:
await Promise.all([
this.loadScripts([
'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',
'https://mapv.baidu.com/gl/examples/static/common.js',
'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/geoJson.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',
]),
])
使用Promise.all()
并行加载必要的脚本和样式文件,以确保地图功能正常运作。
const BMapGL = window.BMapGL
var map = new BMapGL.Map('allmap')
创建百度地图对象,指定地图容器的ID为"allmap"
。
function addGeoLayer1() {
bjRegionLayer = new BMapGL.GeoJSONLayer('bj-child', {
reference: 'GCJ02',
dataSource: region,
level: -10,
minZoom: 7,
maxZoom: 19,
polylineStyle: function (properties) {
return {
strokeColor: 'blue',
}
},
polygonStyle: function (properties) {
var index = properties.join || 0
return {
fillColor: colorBand[index],
}
},
markerStyle: function (properties) {
return {}
},
})
map.addGeoJSONLayer(bjRegionLayer)
}
创建bjRegionLayer
GeoJSON图层,指定图层名称、参考坐标系、数据源、层级、显示范围以及要素样式。然后将其添加到地图中。
function addGeoLayer2() {
bjLayer = new BMapGL.GeoJSONLayer('bj-all', {
reference: 'GCJ02',
dataSource: beijing,
level: -9,
polygonStyle: {
strokeColor: 'darkred',
strokeWeight: 4,
fillOpacity: 0.6,
},
})
map.addGeoJSONLayer(bjLayer)
}
创建bjLayer
GeoJSON图层,指定图层名称、参考坐标系、数据源、层级以及要素样式。然后将其添加到地图中。
function addGeoLayer3() {
poiLayer = new BMapGL.GeoJSONLayer('bj-poi', {
reference: 'GCJ02',
dataSource: markers,
level: -10,
markerStyle: function (properties) {
var index = properties.join || 0
return {
icon: new BMapGL.Icon(urls[index % 2], new BMapGL.Size(23, 25)),
}
},
})
map.addGeoJSONLayer(poiLayer)
}
创建poiLayer
GeoJSON图层,指定图层名称、参考坐标系、数据源、层级以及要素样式。然后将其添加到地图中。
function removeGeoLayer1() {
bjRegionLayer && map.removeGeoJSONLayer(bjRegionLayer)
}
function removeGeoLayer2() {
bjLayer && map.removeGeoJSONLayer(bjLayer)
}
function removeGeoLayer3() {
poiLayer && map.removeGeoJSONLayer(poiLayer)
}
function moveIndex(index) {
bjLayer && bjLayer.setLevel(bjLayer.getLevel() + index)
}
提供按钮控制各图层的添加、移除和层级调整。
bjRegionLayer.addEventListener('click', function (e) {
if (e.features) {
popup(e)
} else {
resetGeoLayer1()
map.removeOverlay(label)
}
console.log('click', e, e.features)
})
bjRegionLayer.addEventListener('mousemove', function (e) {
console.log('mousemove', e, e.features)
})
bjRegionLayer.addEventListener('mouseout', function (e) {
console.log('mouseout', e, e.features)
})
为bjRegionLayer
图层添加事件监听器,在点击、悬停和离开要素时执行不同的操作,例如显示信息气泡或重置图层样式。
本代码提供了在百度地图中展示北京市地理信息的一套完整解决方案。通过使用GeoJSON图层,可以灵活地添加和控制不同类型的地理数据。通过事件监听器,可以实现要素交互,增强用户体验。
未来,该卡片功能可以进一步扩展和优化,例如: