地图相关需求积累

todo

20240319

~~百度地图貌似没球，提供的为二位地图~~
中心位置可以修改
api可能会收费
版本太杂，文档散乱，工期会长

百度地图BMap和BMapGL的区别

BMap是JavaScript API，BMapGL是WebGL API
BMapGL可以显示3D地图，BMap不能

传统版本的引用（以 2.0 版本为例）：http://api.map.baidu.com/api?v=2.0&ak=xxxxx

WebGL 版本的引用（当前为 1.0 版本）：http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx

传统版本的命名空间为 BMap，比如：new BMap.Map('container')。

WebGL 版本的命名空间为 BMapGL，比如：new BMapGL.Map('container')。

百度地图API默认提供的是一个二维的地图视图，即使在缩放级别为1（最小）时，它仍然是一个平面的地图，而不是球状的。这种视图通常被称为"鸟瞰视图"或"全球视图"，它展示了全球的大致轮廓，但并不会以球体的形式呈现。

如果你希望在你的应用中使用一个三维的地球视图，你可能需要寻找支持这个功能的其他地图API，例如Google Earth API。但是请注意，这可能需要更复杂的编程技术，并且可能需要用户安装额外的插件或软件。

收费情况

一些api

在上述代码中，BMAP_NORMAL_MAP是百度地图API提供的一个常量，表示普通街道地图。如果你想切换到其他类型的地图，你可以使用以下的常量：

BMAP_NORMAL_MAP：普通街道地图 BMAP_HYBRID_MAP：混合地图 BMAP_SATELLITE_MAP：卫星地图 BMAP_PERSPECTIVE_MAP：三维地图（需要开通）

在百度地图API中，map.centerAndZoom(point, zoom)方法用于设置地图的中心点和缩放级别。其中，point是一个BMap.Point对象，表示地图的中心点坐标；zoom是一个整数，表示地图的缩放级别。

zoom的值越大，地图显示的内容就越详细。例如，当zoom为1时，地图会被缩放到最小，只显示全球的概览；当zoom为19时，地图会被缩放到最大，可以看到街道的详细信息。

根据百度地图API的文档，zoom的取值范围是1到19。所以，zoom的最小值是1，最大值是19

官方个性化：https://lbsyun.baidu.com/apiconsole/custommap 案例： https://mapv.baidu.com/examples/#qianxi.html

Vue Cesium

https://zouyaoji.top/vue-cesium-v2/#/zh/imageryLayer/vc-provider-imagery-baidumap

http://192.168.2.76:1024/#/daping1/App

var map = new BMapGL.Map("container");          // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 1);                 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// map.setHeading(64.5);   //设置地图旋转角度
// map.setTilt(73);       //设置地图的倾斜角度
map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为地球模式

map.setMapStyleV2({
  styleId: '4647fd4b2862d7fa6331e39270ba2f7b'
});

var point1 = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point1);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

initPoint(){
      // 创建 MapVGL 视图
      let view = new mapvgl.View({
        map: map
      });
      // 创建飞线图
      let flyLineLayer = new mapvgl.FlyLineLayer({
        color: 'rgba(50, 50, 200, 1)',
        textureColor: 'rgba(50, 50, 200, 1)'
      });

      // 设置飞线数据
      flyLineLayer.setData([
        {
          geometry: {
            type: 'LineString',
            coordinates: [
              [116.404, 39.915], // 起点经纬度
              [121.48, 31.22] // 终点经纬度
            ]
          }
        }
      ]);

      // 添加飞线图到视图
      view.addLayer(flyLineLayer);

      // 创建标记点的数据
      let markersData = [
        { lng: 116.404, lat: 39.915, name: '北京' },
        { lng: 121.48, lat: 31.22, name: '上海' },
        // 添加更多的标记点数据...
      ];

      // 添加标记点和弹窗
      markersData.forEach(data => {
        let markerPoint = new BMapGL.Point(data.lng, data.lat);
        let marker = new BMapGL.Marker(markerPoint);
        map.addOverlay(marker);

        let infoWindow = new BMapGL.InfoWindow(`<p>生生世世生生世世生生世世生生世世生生世世是事实生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世${data.name}</p>`);
        marker.addEventListener('click', function() {
          map.openInfoWindow(infoWindow, markerPoint);
        });
      });
    },

配置项目

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

      var point1 = new BMapGL.Point(116.404, 39.915);
      var marker = new BMapGL.Marker(point1);        // 创建标注
      map.addOverlay(marker);                     // 将标注添加到地图中
      var points = [
          new BMapGL.Point(105.2, 60.326),
          new BMapGL.Point(116.405, 39.916),
          new BMapGL.Point(116.406, 39.917),
          // 其他坐标点...
      ];

      for (var i = 0; i < points.length; i++) {
          var marker = new BMapGL.Marker(points[i]); // 创建标注
          map.addOverlay(marker); // 将标注添加到地图中
      }