基于百度地图绘制山东省三维地图的实现

应用场景

本代码主要用于展示如何使用百度地图 API 绘制山东省的三维地图，并在地图上添加带高度的城市点标记。该地图可以应用于地理信息展示、城市规划、旅游出行等场景。

基本功能

• 绘制山东省行政区域边界
• 在山东省主要城市添加带高度的点标记
• 添加鼠标事件（悬停、点击）

功能实现步骤及关键代码分析

1. 导入百度地图 API

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',
  ]),
  this.loadStyles([
    'http://api.map.baidu.com/res/webgl/10/bmap.css',
    'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
  ]),
])

首先，导入必要的百度地图 API 和样式文件。

2. 创建地图实例

var map = new BMapGL.Map('container', {
  restrictCenter: false,
})

创建地图实例，并设置地图的中心点和缩放级别。

3. 绘制山东省行政区域边界

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) // 调整视野
})

通过百度地图的 Boundary 类获取山东省的行政区域边界数据，并绘制在地图上。

4. 添加带高度的城市点标记

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,
      },
    )
    // 添加鼠标事件
    marker.addEventListener('mouseover', function (e) {
      e.target.setFillColor('#f00')
    })
    marker.addEventListener('mouseout', function (e) {
      e.target.setFillColor('#454399')
    })
    marker.addEventListener('click', function (e) {
      alert('click!')
    })
    map.addOverlay(marker)
  })
}

使用 Geocoder 类获取城市经纬度，并创建带高度的点标记。添加鼠标事件，实现悬停和点击效果。

总结与展望

通过本代码的实现，我们可以快速绘制出带有高度城市点的山东省三维地图。在未来，该地图功能可以进一步拓展和优化，例如：

• 添加更多数据层，如道路、水系、建筑物等
• 提供更多交互功能，如缩放、平移、旋转等
• 优化代码结构，提高性能和可维护性