高德 JS API 多区域多边形的绘制和编辑

最新推荐文章于 2024-06-10 21:01:18 发布

飞滕人生TYF

最新推荐文章于 2024-06-10 21:01:18 发布

阅读量815

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/T_Y_F_/article/details/136736340

版权

问题

高德 JS API 多区域多边形的绘制和编辑

详细问题

笔者使用Vue进行前端开发，需要集成高德API实现多区域多边形的绘制和编辑。但是在高德JS API1.4示例多边形的绘制和编辑中，只给了一个区域的多边形的绘制和编辑，未提供多区域多边形的绘制和编辑。

解决方案

由于笔者使用Vue进行开发，此处给出Vue实现方法

实现效果

在这里插入图片描述

动态请求数据

<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>

    <div id="info"></div>
  </div>
</template>

<script>
// import AMap from 'AMap'
var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];


export default {
  name: "Map",
  data() {
    return {
      map: '',
      data: [],
    }
  },
  created() {

  },
  mounted: function () {
    // 在 mounted 钩子函数中引入高德地图相关脚本
    const script1 = document.createElement('script');
    script1.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_api_key&plugin=AMap.PolyEditor';
    document.body.appendChild(script1);

    const script2 = document.createElement('script');
    script2.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js';
    document.body.appendChild(script2);
    setTimeout(() => {
      this.initMap();
    }, 1000);

  },
  methods: {
    initMap() {
      //初始化地图对象，加载地图
      this.map = new AMap.Map("container", {
        center: [101.77, 36.62],
        // 卫星地图
        // layers: [new AMap.TileLayer.Satellite()],
        zoom: 10,
        resizeEnable: true,
      });
      this.load()
    },
    load() {
      this.request.get("/your_data_request_interface").then(res => {
        this.data = res.data.map(item => {
          return {
            // 数据唯一标识
            id: item.id,
            // 指定区域 数据格式如下：101.723141,36.59516;101.730394,36.585745;101.721896,36.584933
            value: item.region
          };
        });
        this.format()
      })
    },
    format() {
      //数据格式化;
      for (var j = 0; j < this.data.length; j++) {
        var path = [];
        var points = this.data[j].value.split(";");
        for (var i = 0; i < points.length; i++) {
          var point = points[i].split(",");
          path.push(new AMap.LngLat(point[0], point[1]));
        }
        this.addPolygon(path);
      }
    },
  //循环遍历添加多边形;

    addPolygon(path) {
      var polygon = new AMap.Polygon({
        map: this.map,
        path: path,
        strokeColor: "#1E9FFF",
        strokeWeight: 2,
        strokeStyle: 'dashed',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50,
      });

      //多边形覆盖物上点击触发函数;
      polygon.on('click', function (e) {

      });

      //鼠标高亮效果
      polygon.on('mouseover', function (e) {
        polygon.setOptions({
          fillColor: '#FFB800',
        })
      });

      polygon.on('mouseout', function (e) {
        polygon.setOptions({
          fillColor: '#1E9FFF',
        })
      });
    }
  }
}
</script>

<style>
</style>

静态数据

<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>

    <div id="info"></div>
  </div>
</template>

<script>
// import AMap from 'AMap'
var content = [
  "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
];


export default {
  name: "Map",
  data() {
    return {
      map: '',
      data: [],
    }
  },
  created() {

  },
  mounted: function () {
    // 在 mounted 钩子函数中引入高德地图相关脚本
    const script1 = document.createElement('script');
    script1.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_api_key&plugin=AMap.PolyEditor';
    document.body.appendChild(script1);

    const script2 = document.createElement('script');
    script2.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js';
    document.body.appendChild(script2);
    this.data = [
      {
        id: 1,
        value: "101.723141,36.59516;101.730394,36.585745;101.721896,36.584933"
      },
      {
        id: 2,
        value: "101.707949,36.603153;101.708078,36.60318;101.708078,36.603126;101.697092,36.583003;101.702241,36.617043"
      },
      {
        id: 3,
        value: "101.706984,36.589591;101.706877,36.589811;101.706876,36.589895;101.697092,36.583003;101.710395,36.576662"
      },
      {
        id: 4,
        value: "101.705525,36.567328;101.705728,36.567507;101.705417,36.56748;101.705674,36.567494;101.713657,36.566598;101.710395,36.576662"
      }
    ];
    setTimeout(() => {
      this.initMap();
    }, 1000);

  },
  methods: {
    initMap() {
      //初始化地图对象，加载地图
      this.map = new AMap.Map("container", {
        center: [101.77, 36.62],
        // 卫星地图
        // layers: [new AMap.TileLayer.Satellite()],
        zoom: 10,
        resizeEnable: true,
      });
      this.format()
    },
    format() {
      //数据格式化;
      for (var j = 0; j < this.data.length; j++) {
        var path = [];
        var points = this.data[j].value.split(";");
        for (var i = 0; i < points.length; i++) {
          var point = points[i].split(",");
          path.push(new AMap.LngLat(point[0], point[1]));
        }
        this.addPolygon(path);
      }
    },
  //循环遍历添加多边形;

    addPolygon(path) {
      var polygon = new AMap.Polygon({
        map: this.map,
        path: path,
        strokeColor: "#1E9FFF",
        strokeWeight: 2,
        strokeStyle: 'dashed',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#1E9FFF',
        zIndex: 50,
      });

      //多边形覆盖物上点击触发函数;
      polygon.on('click', function (e) {

      });

      //鼠标高亮效果
      polygon.on('mouseover', function (e) {
        polygon.setOptions({
          fillColor: '#FFB800',
        })
      });

      polygon.on('mouseout', function (e) {
        polygon.setOptions({
          fillColor: '#1E9FFF',
        })
      });
    }
  }
}
</script>

<style>
</style>