专栏首页前端之攻略高德地图画线、清除线与改变颜色

高德地图画线、清除线与改变颜色

画线-------是通过创建 new AMap.Polyline实例 并添加到地图上 polyline.setMap(this.GDMap);

清除线----画线的同时把画线创建的实例存储起来通过remove方法移除线

改变线的颜色---通过 setOptions重新设置配置项

完整的代码

<el-button @click="drawLine">画折线</el-button>
<el-button @click="changeLineColor">改变颜色</el-button>
<el-button @click="clearAllLine">清除线</el-button>
  data() {
    return {
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.4",
      GDMap: null,
      line:[]
    };
  },
  mounted() {
    loadMap(this.key, this.plugins, this.v)
      .then((AMap) => {
        this.GDMap = new AMap.Map("GDMap", {
          zoom: 10,
          center: [119.947, 31.7728],
        });
        this.GDMap.on("complete", () => {
          // var geolocation = new AMap.Geolocation({
          //   enableHighAccuracy: true, //是否使用高精度定位,默认:true
          //   timeout: 10000, //超过10秒后停止定位,默认:5s
          //   buttonPosition: "RB", //定位按钮的停靠位置
          //   buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
          //   zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
          // });
          // this.GDMap.addControl(geolocation);
          // geolocation.getCurrentPosition(function(status, result) {
          //   if (status == "complete") {
          //     onComplete(result);
          //   } else {
          //     onError(result);
          //   }
          // });

          // //解析定位结果
          // function onComplete(data) {
          //   console.log(data.position);
          // }
        });
      })
      .catch(() => {
        console.log("地图加载失败!");
      });
  },
    clearAllLine(){
      //移除line
      this.GDMap.remove(this.line);
    },
    changeLineColor(){
      this.line[0].setOptions({strokeColor:"#ff8033"})
      // this.GDMap.setFitView();
    },
    drawLine() {
      this.line = [];
      //     var path = [
      //     [116.362209, 39.887487],
      //     [116.422897, 39.878002],
      //     [116.372105, 39.90651],
      //     [116.428945, 39.89663]
      // ];
      var path = [
        [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
        ],
        [
          [116.372105, 39.90651],
          [116.428945, 39.89663],
        ],
      ];
      for (let i = 0; i < path.length; i++) {
        var polyline = new AMap.Polyline({
          path: path[i],
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 3,
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });

        polyline.setMap(this.GDMap);
        // 缩放地图到合适的视野级别
        this.GDMap.setFitView();
        this.line.push(polyline)
      }

      // var mouseTool = new AMap.MouseTool(this.GDMap);
      // //监听draw事件可获取画好的覆盖物
      // var overlays = [];
      // // map.remove(polyline);
      // // 右键结束画线的时候调用
      // mouseTool.on("draw", function (e) {
      //   overlays.push(e.obj);
      //   console.log(e.obj.getPath())
      // });
      // mouseTool.polyline({
      //   strokeColor: "#80d8ff",
      //   //同Polyline的Option设置
      // });
    },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • Vue 结合bootstrap table插件使用

    bootstrap Table插件可以很方便的搜索排序,方便快捷,下面是结合vue的完整的例子。

    tianyawhl
  • 茅明睿:开放,众包与规划改革[36页PPT]

    大数据文摘
  • 通用数据权限的思考与设计

    数据权限是指对系统用户进行数据资源可见性的控制,通俗的解释就是:符合某条件的用户只能看到该条件下对应的数据资源。那么最简单的数据权限大概就是:用户只能看到自己的...

    猿天地
  • Hibernate单表操作(四)——组件属性

    转载请注明:http://blog.csdn.net/uniquewonderq

    MickyInvQ
  • JAVA大数据导出EXCEL方案

    Java当中常用的Excel文档导出主要有POI、JXL和“直接IO流”这三种方式,三种方式各自分别有不同的优势与缺点,下面将分行对其进行简

    终身幼稚园
  • 【学术】将吴恩达的第一个深度神经网络应用于泰坦尼克生存数据集

    这篇文章包括了神经网络在kaggle泰坦尼克生存数据集上的应用程序。它帮助读者加深他们对神经网络的理解,而不是简单地执行吴恩达代码。泰坦尼克生存数据集就是可以随...

    AiTechYun
  • 准确率超 99% 的病理 AI 系统,能否成为“两癌筛查”的一把利器?

    大量、优质病理医生的紧缺,让基层的两癌筛查工作进展异常缓慢。业界的一个测算结果是,如果要完成全国3.51亿适龄妇女的两癌筛查,以目前人工的方式需要18年。这个数...

    AI掘金志
  • 通用数据权限的思考与设计

    如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:787707172...

    java架构师

扫码关注云+社区

领取腾讯云代金券