资源可视化百度地图

使用的是百度地图Javascript API 3.0，以下是使用过程中的一些总结和归纳：

• 百度地图支持http和http协议，接口使用无次数限制。使用前，需要先申请密匙（ak）才可使用。
• Javascript API GL使用了WebGL对地图、覆盖物进行渲染，支持3D视角展示地图
• 百度地图API地址链接：中文文档 (opens new window)
• 百度地图Javascript WebGL v1.0类参考：[API库](javascript API GL (opens new window))

地图的基本使用

创建地图

BmapGL在引入API的方式如下：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=您的密钥"></script>

BMap在引入API的方式如下：

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

创建地图容器元素：

<div id = "mapContent" style={{ height: '100vh', width: '100%' }}></div>

创建GL地图实例：

var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

基础知识总结

基础类

• Point

  构造函数Point(lng: Number, lat: Number) [lng: 精度 lat：维度]

  描述以指定的经度和纬度创建一个地理点坐标

• Marker

  构造函数Marker(pint:Point,opt:MarkerOptions)

  此类表示Marker构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

  属性	类型	描述
  offset	Size (opens new window)	标注的位置偏移值
  icon	Icon (opens new window)	标注所用的图标对象
  enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
  enableDragging	Boolean	是否启用拖拽，默认为false
  enableClicking	Boolean	是否响应点击事件。默认为true
  raiseOnDrag	Boolean	拖拽标注时，标注是否开启离开地图表面效果。默认为false
  draggingCursor	String	拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
  rotation	Number	旋转角度
  title	String	鼠标移到marker上的显示内容

  • Icon

  此类表示标注覆盖物所使用的图标。

  构造函数	描述
  Icon(url: String, size: Size (opens new window), opts: IconOptions (opens new window))	以给定的图像地址和大小创建图标对象实例

  属性	类型	描述
  anchor	Size (opens new window)	图标的定位点相对于图标左上角的偏移值
  size	Size (opens new window)	图标可视区域的大小
  imageOffset	Size (opens new window)	图标所用的图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性
  imageSize	Size (opens new window)	图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
  imageUrl	String	图标所用图像资源的位置
  printImageUrl	String	设置icon打印图片的url，该打印图片只针对IE6有效，解决IE6使用PNG滤镜导致的错位问题。如果您的icon没有使用PNG格式图片或者没有使用CSS Sprites技术，则可忽略此配置

  方法	返回值	描述
  setImageUrl(imageUrl: String)	none	设置图片资源的地址
  setSize(size: Size (opens new window))	none	设置图标可视区域的大小
  setImageSize(offset: Size (opens new window))	none	设置图标的大小
  setAnchor(anchor: Size (opens new window))	none	设置图标定位点相对于其左上角的偏移值
  setImageOffset(offset: Size (opens new window))	none	设置图片相对于可视区域的偏移值

  • IconOptions

  此类表示Icon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

  属性	类型	描述
  anchor	Size (opens new window)	图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值
  imageOffset	Size (opens new window)	图片相对于可视区域的偏移值

  描述创建一个图像标注实例 point参数指定了图像标注所谓的地图位置

• Label 此类表示地图的上的文本标注

  构造函数	描述
  Label(content: String, opts: LabelOptions (opens new window))	创建一个文本标注实例。point参数指定了文本标注所在的地理位置

​ 方法：setStyle(styles:Object)

​ 描述：设置文本标注样式，该样式将作用于文本标注的容器元素上。其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" })注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor

百度地图API - 事件

地图事件

【1】 地图事件 这个事件顾名思义就是在地图加载完成之后会调用这个事件，我们可以去做一些操作

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
//map.centerAndZoom('上海市', 12); // 初始化地图,设置中心点坐标和地图级别 [第二种设置中心点位置的方式:参数1传城市名称]
map.enableScrollWheelZoom(true);
map.addEventListener('tilesloaded', function () {
    alert('地图加载完成！');
});

实际的效果就是地图加载完成之后，会弹出地图加载完成的提示。

在实际应用的时候，会在回调函数中添加地图的初始化操作。

【2】地图单击事件 这个事件顾名思义就是当我们鼠标点击地图，就出触发这个事件

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
map.addEventListener('click', function (e) {
    alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});

点击地图任何位置，可以获取地图的经纬度等信息。具体是通过addEventListener监听函数实现

【3】注销事件 相当于移出了地图的单击事件，主要通过removeEventListener删除地图的点击事件

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
function showInfo(e) {
    alert('经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
}
// 添加地图点击事件
function addMapEvent() {
    map.addEventListener('click', showInfo);
}
// 移除地图点击事件
function removeMapEvent() {
    map.removeEventListener('click', showInfo);
}

覆盖物事件

[1] 覆盖物鼠标点击事件 这个覆盖物实质就是地图的点击事件，只不过对象编程了覆盖物对象，本质都是通过addEventListener去监听事件的发生

案例：创建一个点和一个面覆盖物，然后去给这两个覆盖物添加鼠标点击事件

var map = new BMap.Map('container');
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);

// 绘制点
var marker = new BMap.Marker(point);
map.addOverlay(marker);

// 绘制面
var polygon = new BMap.Polygon([
    new BMap.Point(116.387112, 39.920977),
    new BMap.Point(116.385243, 39.913063),
    new BMap.Point(116.394226, 39.917988),
    new BMap.Point(116.401772, 39.921364),
    new BMap.Point(116.41248, 39.927893)
], {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
map.addOverlay(polygon);

//给点添加点击事件
marker.addEventListener('click',function(){
    alert(marker.toString() +  '被单击!');
});
//给面添加点击事件
polygon.addEventListener('click',function(){
    alert(polygon.toString() +  '被单击!');
});

在资源可视化项目中的应用如下：

  let pt = new BMapGL.Point(x, y);
  let iconDom = ""
  // 采用svg的格式显示标注点
  iconDom = "<svg class="icon" width="28px" height="26px" aria-hidden="true"> ' +
            '<use xlink:href="#icon-juzhan"></use>' +
          ' </svg>'"
  // 因为使用到了字体图标，所以这里换成label的添加方式
   let opts = {
         position: pt, // 指定文本标注所在的地理位置
         offset: new BMapGL.Size(-12, -26) //设置文本（icon、svg）偏移量(左右， 上下)
    };
   let iconLabel = new BMapGL.Label(iconDom, opts); // 创建文本标注对象
   // 给icon设置整体的样式，如边框、字体大小、宽高、背景等...
   iconLabel.setStyle({
          border: "none",
          padding:"0",
          color: "#fff",
          fontSize: "16px",
          height: "28px",
          width: "26px",
          backgroundColor: "rgba(255, 255, 255, 0)",
        });
   iconLabel.customData =  { 
      roomName: gisPointDtoList.chinaName,
      roomID: gisPointDtoList.stationId,
   };
  // 最后吧创建的标注点，添加到地图的图层上方
  this.mapObj.addOverlay(iconLabel);
	    

效果如上所示

添加标注：this.mapObj.addOverlay(iconLabel)

删除单个标注：this.mapObj.removeOverlay(iconLabel)

清除地图上所有的标记，用map.clearOverlays();

核心API：返回地图当前中心点

   let point = new BMapGL.Point(106.754312, 34.133817); // 初始化地图,设置中心（自己通过百度地图的坐标拾取获取的一个中心点---西安太白县上面的一个坐标点）
   that.mapObj.centerAndZoom(point, 5); // 初始化地图,设置中心

核心API: 地图缩放 、拖拽事件

zoomend地图更改缩放级别结束时触发触发此事件

dragend停止拖拽地图时触发

    this.mapObj.off("zoomend"); // 解除缩放事件
    this.mapObj.off("dragend"); // 解除拖拽事件

**核心API：**返回地图缩放层级

getZoom(type:Number) 

核心API：获取当前视野范围的举行区域、以地理坐标表示

  getBounds()

  let bs = _this.mapObj.getBounds(); //获取可视区域
  let bssw = bs.getSouthWest(); //可视区域左下角
  let bsne = bs.getNorthEast(); //可视区域右上角

---

核心API : 获取当前地图的中心点

   let mapCenter = _this.mapObj.getCenter(); // 获取到当前地图的中心点    - 返回一个经纬度point对象

核心类API : 地图中心点定位【 地图层级的级别为1-19级(1级 10000km ---- 19级 20m)】

this.mapObj.centerAndZoom(pt, this.mapObj.getZoom());
//centerAndZoom(center: Point , zoom: Number)
// pt 表示经纬度坐标对象、 getZoom表示要呈现的层级 最小min = 4  max = 16

//设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

核心类API : panTo(center:Point)

**说明：**将地图的中心点更改为给定的点，跳转到指定中心点进行渲染。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果

正、逆向地址解析

• 百度地图相关数据请求需要设置代理去请求网络资源，配置如下：

        '/baiduOffLine': {
          target: 'http://10.244.6.92:8081', // 百度离线地图WebApi请求需要用到
          changeOrigin: true,
          pathRewrite: {
            '^/baiduOffLine': ''
          }
        },
  

---

**说明：**地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。

// 通过经纬度查询地址--逆地理编码
export const queryPoint = (data) => {
  return api.request({
    method: 'get',
    url: '/baiduOffLine/geocoding?location='+ data.location +'&output=json',
  })
}

// 通过名称查询地址的经纬度坐标
export const getLocalInfo = (data) => {
  return api.request({
    method: 'get',
    url: '/baiduOffLine/search?q='+data.district+'&output=json&city='+data.cityName+'&district='+data.district+'&page_num=1&page_size=1',
  })
}

---

// 通过名称查询行政区边界查询
export const getBoundary = (data) => {
  return api.request({
    method: 'get',
//  url: 'boundary?q=data.district&output=json&adcode=',
    url: '/baiduOffLine/boundary?&q='+ data.district +'&output=json',
  })
}

省份行政区域高亮

相关axios请求：

// 通过行政区的code查询对应的行政区边界数据
export const boundaryProvince = (adcode) => {
  return api.request({
    method: 'get',
    url: '/baiduOffLine/boundary?version=2.0&ApiAuthorization=baidu-8f34e4fabcf34fbdbdf171868337ae35&output=json&adcode=' + adcode,
  })
}

---

// 通过行政区的code查询对应的行政区边界数据
export const boundaryGeoJson = (distinctId) => {
  return api.request({
    method: 'get',
    url: '/baiduOffLine/boundaryGeoJson?distinctId=' + distinctId,
  })
}

---

// 通过名称查询行政区边界查询
export const getBoundary = (data) => {
  return api.request({
    method: 'get',
//  url: 'boundary?q=data.district&output=json&adcode=',
    url: '/baiduOffLine/boundary?&q='+ data.district +'&output=json',
  })
}

2.5D 地图设置

        // 设置2.5D立体时，天空的颜色渐变
        this.mapObj.setDisplayOptions({
          skyColors: [
            // 地面颜色
            'rgba(10, 49, 79, 0)',
            // 天空颜色
            'rgba(10, 49, 79, 1)'
          ]
        });
        this.mapObj.setTilt(65);

地图框选功能

• 设置框选工具的样式

          let styleOptions = {
            strokeColor: "#5E87DB", // 边线颜色
            fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
            strokeWeight: 2, // 边线宽度，以像素为单位
            strokeOpacity: 1, // 边线透明度，取值范围0-1
            fillOpacity: 0.2, // 填充透明度，取值范围0-1
          };
  

• 实例化鼠标绘图工具

          // 实例化鼠标绘制工具
          this.drawingManager = new BMapGLLib.DrawingManager(_this.mapObj, {
            isOpen: false, // 是否开启绘制模式
            enableCalculate: false, // 绘制是否进行测距测面
            enableSorption: false, // 是否开启边界吸附功能
            sorptiondistance: 20, // 边界吸附距离
            rectangleOptions: styleOptions, // 矩形的样式
            enableDrawingTool: false, //是否显示工具栏
            drawingToolOptions: {
              anchor: BMAP_ANCHOR_TOP_LEFT, //位置
              offset: new BMapGL.Size(5, 5), //偏离值
              drawingModes: [BMAP_DRAWING_RECTANGLE],
              scale: 0.8,
            },
            drawingMode: BMAP_DRAWING_RECTANGLE, //绘制模式  矩形
          });
  

• 关闭距离计算

          this.drawingManager.disableCalculate(); // 关闭距离计算
  

• 添加鼠标绘制工具监听事件，用于获取绘制结果

          this.drawingManager.addEventListener("overlaycomplete", this.overlaycomplete);
  

• 完成框选功能后的，触发回调函数

        // 接入段资源， 绘图结果
        overlaycomplete(e) {
          this.drawingManager.close(); // 关闭框选功能
          console.log("框选功能已关闭------------");
          // 将当前框选的点，存起来
          this.boxSelectionOverlays.push(e.overlay);
          //鼠标绘制完成回调方法   获取各个点的经纬度
          var path = e.overlay.getPath(); //Array<Point> 返回多边型的点数组 <目前项目中是矩形>
          this.rangeCoordinate =  path
          console.log(path,'path');
        },