vue使用高德地图

高德文档链接：概述-地图 JS API 2.0 | 高德地图API

本次完成功能：单一某省的地图，3D地图展示，3D模型在地图加载并展示，地图上绘制圆圈

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,Map3D"></script>

最终成果

1.vue中高德地图的引入及基本使用

在全局html文件中添加高德JS API

1.  
   <script type="text/javascript">
2.  
   window._AMapSecurityConfig = {
3.  
   securityJsCode:'您的密钥',
4.  
   }
5.  
   </script>
6.  
   <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=所用到的插件"></script>

2.在vue组件中使用

1.  
   <template>
2.  
   <div id="map-chart">
3.  
   <div class="rose-chart-title">充电站分布</div>
4.  
   <div id="map" class="map" style="width:100%;height:700px ;"></div>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
    data() {
11.  
    return {
12.  
    AMap: window.AMap,
13.  
    }
14.  
    },
15.  
    mounted() {
16.  
    this.initMap() // 初始化
17.  
    },
18.  
    methods: {
19.  
    // 初始化地图
20.  
    initMap() {
21.  
    var opts = {
22.  
    subdistrict: 0,
23.  
    extensions: 'all',
24.  
    level: 'province'
25.  
    };
26.  
    //利用行政区查询获取边界构建mask路径
27.  
    //也可以直接通过经纬度构建mask路径
28.  
     
29.  
    var district = new AMap.DistrictSearch(opts);
30.  
    district.search('四川省', (status, result) => {
31.  
    console.log(status, result)
32.  
    var bounds = result.districtList[0].boundaries;
33.  
    var mask = []
34.  
    for (var i = 0; i < bounds.length; i = 1) {
35.  
    mask.push([bounds[i]])
36.  
    }
37.  
    var map = new AMap.Map('map',{
38.  
    viewMode:'3D',
39.  
    center:[104.06675, 30.589955],
40.  
    pitch:55,
41.  
    rotateEnable: true,
42.  
    pitchEnable: true,
43.  
    skyColor: '#061740',
44.  
    rotation: -15,
45.  
    rotateEnable: true,
46.  
    pitchEnable: true,
47.  
    mask: mask,
48.  
    mapStyle: "amap://styles/light",
49.  
    zoom: 17,
50.  
    zooms: [8, 17],
51.  
    });
52.  
     
53.  
    map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],1);
54.  
    map.DirectionLight = new AMap.Lights.DirectionLight([1,0,-0.5],[1,1,1],1);
55.  
    new AMap.Circle({
56.  
    center:[104.06675, 30.589955],
57.  
    map:map,
58.  
    radius:700,
59.  
    fillColor:'blue',
60.  
    strokeWeight:1,
61.  
    strokeColor:'white',
62.  
    fillOpacity:0.05
63.  
    })
64.  
    new AMap.Circle({
65.  
    center:[104.06675, 30.589955],
66.  
    map:map,
67.  
    radius:500,
68.  
    fillColor:'blue',
69.  
    strokeWeight:1,
70.  
    strokeColor:'white',
71.  
    fillOpacity:0.05
72.  
    })
73.  
    new AMap.Circle({
74.  
    center:[104.06675, 30.589955],
75.  
    map:map,
76.  
    radius:300,
77.  
    fillColor:'blue',
78.  
    strokeWeight:1,
79.  
    strokeColor:'white',
80.  
    fillOpacity:0.05
81.  
    })
82.  
     
83.  
    //创建Object3DLayer图层
84.  
    var object3Dlayer = new AMap.Object3DLayer({map:map,zIndex:9999});
85.  
    map.add(object3Dlayer);
86.  
    var druckMeshes
87.  
    map.plugin(["AMap.GltfLoader"], function () {
88.  
    var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';
89.  
    var paramDuck = {
90.  
    position: new AMap.LngLat(104.06675, 30.589955), // 必须
91.  
    scale: 500, // 非必须，默认1
92.  
    height: -100, // 非必须，默认0
93.  
    scene: 0, // 非必须，默认0
94.  
    };
95.  
    var gltfObj = new AMap.GltfLoader();
96.  
    gltfObj.load(urlDuck, function (gltfDuck) {
97.  
    druckMeshes = gltfDuck;
98.  
    gltfDuck.setOption(paramDuck);
99.  
    gltfDuck.rotateX(90);
100.  
     gltfDuck.rotateZ(-230);
101.  
     object3Dlayer.add(gltfDuck);
102.  
     });
103.  
      
104.  
      
105.  
     });
106.  
     })
107.  
     },
108.  
      
109.  
     },
110.  
     }
111.  
      
112.  
     </script>
113.  
      
114.  
     <style lang="less">
115.  
     .amap-logo{
116.  
     display: none !important;
117.  
     }
118.  
     </style>

这篇好文章是转载于：学新通技术网