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

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

2.在vue组件中使用

<template>
  <div id="map-chart">
    <div class="rose-chart-title">充电站分布</div>
    <div id="map" class="map" style="width:100%;height:700px ;"></div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      AMap: window.AMap,
    }
  },
  mounted() {
    this.initMap() // 初始化
  },
  methods: {
    // 初始化地图
    initMap() {
      var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'province'
      };
      //利用行政区查询获取边界构建mask路径
      //也可以直接通过经纬度构建mask路径

      var district = new AMap.DistrictSearch(opts);
      district.search('四川省', (status, result) => {
        console.log(status, result)
        var bounds = result.districtList[0].boundaries;
        var mask = []
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]])
        }
        var map = new AMap.Map('map',{
	        viewMode:'3D',
	        center:[104.06675, 30.589955],
	        pitch:55,
          rotateEnable: true,
          pitchEnable: true,
          skyColor: '#061740',
          rotation: -15,
          rotateEnable: true,
          pitchEnable: true,
          mask: mask,
          mapStyle: "amap://styles/light",
          zoom: 17,
          zooms: [8, 17],
	    });
       
        map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],1);
    	map.DirectionLight = new AMap.Lights.DirectionLight([1,0,-0.5],[1,1,1],1);
		new AMap.Circle({
			center:[104.06675, 30.589955],
			map:map,
			radius:700,
			fillColor:'blue',
			strokeWeight:1,
			strokeColor:'white',
			fillOpacity:0.05
		})
		new AMap.Circle({
			center:[104.06675, 30.589955],
			map:map,
			radius:500,
			fillColor:'blue',
			strokeWeight:1,
			strokeColor:'white',
			fillOpacity:0.05
		})
		new AMap.Circle({
			center:[104.06675, 30.589955],
			map:map,
			radius:300,
			fillColor:'blue',
			strokeWeight:1,
			strokeColor:'white',
			fillOpacity:0.05
		})
	
        //创建Object3DLayer图层
        var object3Dlayer = new AMap.Object3DLayer({map:map,zIndex:9999});
        map.add(object3Dlayer);
        var druckMeshes
        map.plugin(["AMap.GltfLoader"], function () {
            var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';
            var paramDuck = {
                position: new AMap.LngLat(104.06675, 30.589955), // 必须
                scale: 500, // 非必须，默认1
                height: -100,  // 非必须，默认0
                scene: 0, // 非必须，默认0
            };
            var gltfObj = new AMap.GltfLoader();
            gltfObj.load(urlDuck, function (gltfDuck) {
                druckMeshes = gltfDuck;
                gltfDuck.setOption(paramDuck);
                gltfDuck.rotateX(90);
                gltfDuck.rotateZ(-230);
                object3Dlayer.add(gltfDuck);
            });
           

        });
      })
    },

  },
}

</script>
  
<style lang="less">
.amap-logo{
  display: none !important;
}
</style>