关于使用高德地图开发可视化页面的一些常用操作

1.引入高德地图如何去掉地图上的logo

.amap-logo {
    display: none;
}

2.解决高德地图刷新时闪白屏问题

.amap-container {
  background-color: transparent !important;
}
.amap-marker-content {
  div {
    color: transparent !important;
  }
}

3.在高德地图中添加一些动态点位，一般用来展示实时推送数据，可以用apng图片显示动图，轻便而且效果好。让UI做png格式动图方法是：从AE导出序列帧，然后使用isparta软件生成。

4.若需要使用3D地图，并兼容IE，需要设置window.forceWebGL = true;

5.地图上添加图标

new AMap.Marker ({
  icon: require('../../../assets/img/platform.png'),
  offset: new AMap.Pixel(-12, -16),
  position: [120.236522,30.183376],
  map: map
})

6.设定自己想要的地图风格

首先注册成为高德的开发者，然后添加项目生成key，ui设计师可以在控制台设计相应的地图风格并发布，让风格链接给前端即可引入。

map.setMapStyle('amap://styles/5fb842579a8dd26c87034dcc8a074234')

7.地图中调用公交线路并显示

let linesearch = new AMap.LineSearch({
  pageIndex: 1,
  city: '杭州',
  pageSize: 1,
  extensions: 'all'
})
linesearch.search('315', function(status, result) {
  map.clearMap()
  if (status === 'complete' && result.info === 'OK') {
    lineSearch_Callback(result)
  } else {
    alert(result)
  }
})
/*公交路线查询服务返回数据解析概况*/
function lineSearch_Callback(data) {
  let lineArr = data.lineInfo
  let lineNum = data.lineInfo.length
  if (lineNum == 0) {
  } else {
    for (let i = 0; i < lineNum; i++) {
      let pathArr = lineArr[i].path
      let stops = lineArr[i].via_stops
      let startPot = stops[0].location
      let endPot = stops[stops.length - 1].location
      if (i == 0) //作为示例，只绘制一条线路
        drawbusLine(startPot, endPot, pathArr)
    }
  }
}
/*绘制路线*/
function drawbusLine(startPot, endPot, BusArr) {
  //绘制起点，终点
  new AMap.Marker({
    map: map,
    position: startPot, //基点位置
    icon: require('../../../assets/img/busEnd.png'),
    zIndex: 10
  })
  new AMap.Marker({
    map: map,
    position: endPot, //基点位置
    icon: require('../../../assets/img/busStart.png'),
    zIndex: 10
  })
  //绘制乘车的路线
  let busPolyline = new AMap.Polyline({
    map: map,
    path: BusArr,
    strokeColor: "#FF3A68",//线颜色
    strokeOpacity: 1,//线透明度
    isOutline:true,
    outlineColor: "rgba(255, 255, 255, .4)",
    strokeWeight: 4//线宽
  })
  map.setFitView()
}

 8.获取天气信息

        const _this = this;
        // 加载天气查询插件
        AMap.plugin('AMap.Weather', function() {
          // 创建天气查询实例
          const weather = new AMap.Weather();
          // 执行实时天气信息查询
          weather.getLive(_this.city, function(err, data) {
            if (data) {
              _this.temperature = data.temperature;
              _this.windDirection = data.windDirection;
              _this.windPower = data.windPower;
            } else {
              console.log(err);
            }
          });
        });