在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制

在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制

1,先去高德地图开放平台申请账号注册流程不再赘述;

2,在我的应用中创建key,选择web端Js点击提交生成;

3,生成后可以看到自己的key

4,进入项目中使用npm下载依赖

npm i @amap/amap-jsapi-loader --save
1

5,下载完成后页面组件中引入

import AMapLoader from '@amap/amap-jsapi-loader';
1

6,引入完成后初始化地图

  //这里是数据
  import { HAILINGdata, JIANGYANdata, GAOXINdata } from './map.js';
  const map = ref<any>(null);
  const mapZoom = ref<number>(10.5);
  //初始化地图
  AMapLoader.load({
    key: '***', //填入你申请的key
    version: '1.4.15', //高德版本 可以不填
    plugins: [ //需要的地图插件
      "AMap.ToolBar",
      "AMap.Driving",
      "AMap.PolygonEditor",
      "AMap.PlaceSearch",
    ]
  }).then(v => {
  	//对地图进行赋值 “container”为div盒子的id
  	//

    map.value = new v.Map("container", {
      resizeEnable: true, //调整大小启用
      center: [114.573471, 25.128443], //地图中心点坐标
      zoom: 1 //缩放(可能失效)
    });
	
	//因为我这里是需要三个区切换显示所以我做了判断 如果只有一个可以直接赋值;
    var path1 = active.value == 0 ? HAILINGdata : (active.value == 1 ? JIANGYANdata : GAOXINdata);
    //重新创建边界范围对象
    var polygon = new v.Polygon({
      path: path1, //边界的所有坐标
      fillColor: '#0070EF', //覆盖颜色
      strokeOpacity: 1, //边界透明度
      fillOpacity: 0.2, //覆盖颜色后的透明度
      strokeColor: '#0070EF', //边界线条颜色
      strokeWeight: 1, //边界线条宽度
      strokeStyle: 'dashed', //边界线条
      strokeDasharray: [5, 5], //阵列
    });
    map.value.add([polygon]); //将范围对象add到地图中
    map.value.setFitView(); //重新绘制
    map.value.setZoom(mapZoom.value); //注意我这里因为上面zoom缩放失效我这里重新进行set 可以将值写死 也可以写成动态的根据自己项目情况
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

7,边界数据怎么下载(也就是我这里的 HAILINGdata / JIANGYANdata / GAOXINdata)

可以去阿里的dataV中下载也可以找github上的边界范围下载excel导入到项目中;

官方dome中只有上海和苏州的可以去看看数据格式到时候修改一样即可;

官方demo数据

我自己在github上找的也可以自己找

github地址

如果你觉得不错 希望一键三连 有什么问题评论或者私信看到后我会及时回复的哦~感谢