vue 高德地图海量线

最新推荐文章于 2024-09-11 09:29:08 发布

zc自由飞~

最新推荐文章于 2024-09-11 09:29:08 发布

阅读量622

点赞数 1

文章标签： css vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_39808181/article/details/121658734

版权

本文介绍了如何使用高德地图API在JavaScript环境中初始化地图，并展示了如何通过PathSimplifier处理复杂的路线数据，以简洁地显示在地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  async created () {
    // 已载入高德地图API，则直接初始化地图
    await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&plugin=AMap.DistrictSearch`);
    await remoteLoad(`https://webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/`);
    await remoteLoad('http://webapi.amap.com/ui/1.1/main.js');
  },
  // 初始化地图 生成path路径 
  //_bigRoutes是线的数据格式
 // [{endLatitude: 35.7412,endLongitude: 110.901,id: "1",startLatitude: 35.6573,startLongitude: 110.6039,type: "0303502"},{endLatitude: 35.7412,endLongitude: 110.901,id: "1",startLatitude: 35.6573,startLongitude: 110.6039,type: "0303502"}]
//坐标是必需有参数
    initMap (_bigRoutes) {
      let that = this;
      let AMap = this.AMap = window.AMap
      //创建地图
      let map = new AMap.Map('container', {
        center: [112.548093,37.874332],
        zoom: 6.5,
        mapStyle: 'amap://styles/whitesmoke',
      });
      //用this是为了全局map对象
      this.map = map;
      //以下是path线路的逻辑，引入PathSimplifier
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
        }
        let pathSimplifierIns = new PathSimplifier({
          zIndex: 2,
          map: map, //所属的地图实例
          getPath: function(pathData, pathIndex) {
            return pathData.path;
          },
          getHoverTitle: function(pathData) {
            return null;
          },

          clickToSelectPath: false,
          onTopWhenSelected: false,
          renderOptions: {
            pathLineStyle: {
              dirArrowStyle: true
            },
            getPathStyle: function(pathItem) {
              let pathData = pathStyle(pathItem);
              //定义变量可以添加判断，不同类型的线是不同样式
              let strokeStyle = "#3334FF";//填充颜色
			  let borderStyle = "#3334FF";//边的颜色
			  let lineWidth = 0；//线宽
              return {
                pathLineStyle: {
                  lineWidth: pathData.lineWidth,
                  strokeStyle: pathData.strokeStyle,
                  borderWidth: 1,
                  borderStyle: pathData.borderStyle,
                  dirArrowStyle: true
                },
                startPointStyle: {
                  radius: 1,
                  fillStyle: "#109618",
                  lineWidth: 1,
                  strokeStyle: "#eeeeee"
                },
                endPointStyle: {
                  radius: 1,
                  fillStyle: "#dc3912",
                  lineWidth: 1,
                  strokeStyle: "#eeeeee"
                },
                pathLineHoverStyle: {
                  lineWidth: 2,
                  strokeStyle: "#f7b538",
                  borderWidth: 1,
                  borderStyle: "#f7b538",
                  dirArrowStyle: false
                },
                pathLineSelectedStyle: {
                  lineWidth: 2,
                  strokeStyle: "#f7b538",
                  borderWidth: 1,
                  borderStyle: "#f7b538",
                  dirArrowStyle: false
                },
                keyPointStyle: {
                  radius: 1,
                  fillStyle: null,
                  lineWidth: 0,
                  strokeStyle: null
                },
                keyPointHoverStyle: {
                  radius: 1,
                  fillStyle: null,
                  lineWidth:0,
                  strokeStyle: null
                },
                keyPointOnSelectedPathLineStyle: {
                  radius: 1,
                  fillStyle: null,
                  lineWidth: 0,
                  strokeStyle: null
                }
              }
            }
          }
        });
        window.pathSimplifierIns = pathSimplifierIns;
        let flyRoutes = [];
        this._bigRoutes = _bigRoutes;
        _bigRoutes.push.apply(_bigRoutes, flyRoutes);
        pathSimplifierIns.setData(_bigRoutes);
      });
    },