vue 高德图层---省市区行政图层显示

官网文档:https://lbs.amap.com/api/javascript-api-v2/guide/layers/districtlayer

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
41
42
var map;
var distProvince;
   
initMap() {
        //初始化地图
        AMapLoader.load({
          key: '申请的key',
          version: '2.0',//需要使用JSAPI 2.0版本。若从1.x版本升级,之前的图层和点标记等方法有改动,可参考官网升级指南:https://lbs.amap.com/api/javascript-api-v2/update
          Loca: {
            version: '2.0',//需要使用2.0版本,与JSAPI 2.0版本对应
          }
        }).then((AMap) => {
          map = new AMap.Map('container', {
            zoom: 12, //级别,地图放大倍数
            center: [120.41, 36.05], //中心点坐标
            viewMode: '3D', //使用3D视图
            mapStyle: "amap://styles/darkblue",//样式
          });
           
          //创建省市简易行政区图层
          distProvince = new AMap.DistrictLayer.Province({
            zIndex: 10, //设置图层层级
            zooms: [2, 15], //设置图层显示范围
            adcode: "370200", //设置行政区 adcode
            depth: 2, //设置数据显示层级,0:显示国家面,1:显示省级,当国家为中国时设置depth为2的可以显示市一级,2:区县
          });
          // 设置行政区图层样式
          distProvince.setStyles({
            "stroke-width": 2, //描边线宽
            fill: function (data) {
              //设置区域填充颜色,可根据回调信息返回区域信息设置不同填充色
              //回调返回区域信息数据,字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
              //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
              return "rgba(14,91,141,0.55)";
            },
          });
          //将简易行政区图层添加到地图
          map.add(distProvince);
        }).catch((e) => {
          console.log(e);
        });
      },

  

posted on   七七2020  阅读(333)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
历史上的今天:
2019-02-20 Oracle导出csv时数字不变成科学计数法
< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示