本代码用于在网页中展示一个基于百度地图的3D可视化地图,展示山东省的边界、城市分布和高度信息。该卡片可用于城市规划、地理教育等场景。
1. 加载必要资源 首先,需要加载百度地图API、3D地图库和辅助库。
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',
'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.min.js',
'https://mapv.baidu.com/build/mapv.min.js',
'https://bj.bcebos.com/v1/mapopen/api-demos/data/province.js',
'https://bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/customgreen.js',
'https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js',
'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js',
'https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js',
'https://bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/mapstyleblack.js',
'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.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',
]),
])
2. 初始化地图
使用BMapGL.Map
类创建地图实例,并设置中心点和缩放级别。
var map = new BMapGL.Map('container', {
restrictCenter: false,
})
var point = new BMapGL.Point(118.6614, 36.219)
map.centerAndZoom(point, 8)
map.enableScrollWheelZoom()
3. 获取行政区边界
使用BMapGL.Boundary
类获取山东省的行政区边界。
var bdary = new BMapGL.Boundary()
bdary.get('山东省', function (rs) {
// 绘制行政区
map.clearOverlays()
var count = rs.boundaries.length
if (count === 0) {
alert('未能获取当前输入行政区域')
return
}
var pointArray = []
for (var i = 0; i < count; i++) {
var ply = new BMapGL.Polygon(rs.boundaries[i], {
strokeWeight: 1,
strokeColor: '#90c8f1',
}) // 建立多边形覆盖物
map.addOverlay(ply)
pointArray = pointArray.concat(ply.getPath())
}
map.setViewport(pointArray) // 调整视野
})
4. 获取城市位置和高度
使用BMapGL.Geocoder
类获取山东省主要城市的经纬度,并根据随机值生成城市的高度信息。
var citys = [
'济南市',
'青岛市',
'烟台市',
'潍坊市',
'淄博市',
'威海市',
'济宁市',
'东营市',
'泰安市',
'德州市',
'聊城市',
'滨州市',
'枣庄市',
'菏泽市',
'日照市',
'莱芜市',
'临沂市',
]
var cityGeo = new BMapGL.Geocoder()
for (let i = 0; i < citys.length; i++) {
cityGeo.getPoint(citys[i], function (point) {
// 地址解析获取对应经纬度
var pt = new BMapGL.Point(point.lng, point.lat)
var marker = new BMapGL.Marker3D(
pt,
Math.round(Math.random()) * 130000,
{
size: 50,
shape: 'BMAP_SHAPE_CIRCLE',
fillColor: '#454399',
fillOpacity: 0.6,
},
)
map.addOverlay(marker)
})
}
5. 3D视角
通过设置enableTilt
和enableRotate
属性,开启3D视角和旋转功能。
map.enableTilt()
map.enableRotate()
开发经验与收获:
未来拓展与优化: