代码应用场景

本代码用于在百度地图中展示北京市的相关地理信息,包括北京各区边界、北京市边界以及北京市内的兴趣点(POI)。该代码适用于需要在网页或应用程序中展示北京市地理信息的情景,例如城市规划、旅游指南或地图导航等。

代码基本功能

本代码的基本功能如下:

  • 加载百度地图API并初始化地图对象
  • 添加北京各区边界GeoJSON图层
  • 添加北京市边界GeoJSON图层
  • 添加北京市POI GeoJSON图层
  • 提供按钮控制各图层的添加、移除和层级调整
  • 当鼠标悬停或点击图层上的要素时,显示要素的详细信息

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

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',
    '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()并行加载必要的脚本和样式文件,以确保地图功能正常运作。

2. 初始化地图对象

const BMapGL = window.BMapGL
var map = new BMapGL.Map('allmap')

创建百度地图对象,指定地图容器的ID为"allmap"

3. 添加北京各区边界GeoJSON图层

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图层,指定图层名称、参考坐标系、数据源、层级、显示范围以及要素样式。然后将其添加到地图中。

4. 添加北京市边界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图层,指定图层名称、参考坐标系、数据源、层级以及要素样式。然后将其添加到地图中。

5. 添加北京市POI 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图层,指定图层名称、参考坐标系、数据源、层级以及要素样式。然后将其添加到地图中。

6. 控制图层显示

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)
}

提供按钮控制各图层的添加、移除和层级调整。

7. 要素交互

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图层,可以灵活地添加和控制不同类型的地理数据。通过事件监听器,可以实现要素交互,增强用户体验。

未来,该卡片功能可以进一步扩展和优化,例如:

  • 添加更多地理数据,如道路、河流、建筑物等
  • 支持自定义要素样式和交互行为
  • 集成其他百度地图功能,如导航、搜索等
  • 优化代码结构和性能
登录
ECHO推荐
ScriptEcho.ai

用户批注

GeoJSONLayer图层

我要吐槽
新手指引
在线客服