高德地图上画图!和3D绘制区域

封装了一些方法 前提是引入 高德api 才能使用这个办法

//    绘制进博会的区域
    $(document).ready(function () {
        // 绘制板块
        $.ajax({
//可以是一个json里面是地址就是经纬度 
            url: ctx + '/map/demonstration/json/jinbohui.json',
            async: false,
            success: function (data) {
                var polygons = outPolygon(data);
                // 创建小区覆盖物群组
                allBankuai = new AMap.OverlayGroup(polygons);
            }
        });
    })

    // 创建外层不规则图形
    function outPolygon(areaDatas) {
        let polygons = [];
        for (let i = 0; i < areaDatas.length; i++) {
            let areaData = areaDatas[i];
            let name = areaData.name;
            let areas = areaData.areas;
            let strokeColor = '#00B6DA';
            let fillColor = '#00A2E8';
            let polygon = new AMap.Polygon({
                path: areas,
                fillColor: fillColor, // 多边形填充颜色
                //这个是不规则的区域的
                fillOpacity: 0,  // 填充透明度
                borderWeight: 2, // 线条宽度，默认为 1
                strokeWeight: 1.5, // 轮廓线宽度
                strokeColor: strokeColor, // 轮廓线条颜色
                bubble: true
            });
            polygons.push(polygon);
        }
        return polygons;
    }
map.add(allBankuai)
    //    绘制进博会的区域

3D绘制代码如下

在vue中引用高德地图

npm  i  @amap/amap-jsapi-loader

哪里使用在哪里引入

import AMapLoader from "@amap/amap-jsapi-loader"; //引入

记得在data中使用

  data() {
    return {
//引入图片的方法
      images: require("@/assets/screen/personnel/renyuanzuobiao.png"),
      imagetip: require("@/assets/screen/personnel/bordertip.png"),
      zaichangrneyuan: 40,

      // infoWindow: "",
      map: "", //地图实例化对象
      // info: [], //信息窗体的内容
    };
  },

 

 使用如下  这是在一个方法中使用 initmap(){}

     let that = this;
      // debugger
      window._AMapSecurityConfig = {
//秘钥
        securityJsCode: "d427d954bfafa3fb694741659dab2dae",
      };
      AMapLoader.load({
//申请的KEY的值
        key: "8e990b742a2f4e168eee432972a9972c", //此处填入我们注册账号后获取的Key
        // version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Object3DLayer"], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {

          // this.map = new AMap.Map("container", {
          //
          //   //设置地图容器id
          //   viewMode: "3D", //是否为3D地图模式
          //   zoom: 18, //初始化地图级别121.680479,31.300322  121.680429,31.30037
          //   center: [121.680479, 31.300322], //初始化地图中心点位置
          //   // 禁止拖动
          //   // zoomEnable: false, //是否缩放
          //   // dragEnable: false, //是否拖动
          //   showLabel: false, //不显示地图文字标记
          // });
          this.map = new AMap.Map("container12", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 16, //初始化地图级别121.680479,31.300322  121.680429,31.30037
            center: [121.680497, 31.301334], //初始化地图中心点位置
            // 禁止拖动
            // zoomEnable: false, //是否缩放
            // dragEnable: false, //是否拖动
            showLabel: false, //不显示地图文字标记
          });
//这个还是使用了自定义的地图
        var styleName = "amap://styles/497004ae2c51a8533ae790fa18b72c5e";
        that.map.setMapStyle(styleName);
        that.map.setFitView();

  })
        .catch((e) => {
          console.log(e);
        });
    },

上方是必须写的   下发是利用了了插件

  var object3Dlayer = new AMap.Object3DLayer();
        console.log("object3Dlayer", object3Dlayer);
        // 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中,定义3d图层的形状 就是四个点位 用来绘制3d柱体
//这个是路径点的所有的坐标
        var paths = [
          [
            [121.679736, 31.300845],
            [121.679313, 31.300075],
            [121.679608, 31.29997],
            [121.679999, 31.300749],
            [121.679608, 31.29997],
            [121.679999, 31.300749],
            [121.679999, 31.300749],
            [121.679736, 31.300845],
          ],
          [
            [121.679865, 31.299942],
            [121.680267, 31.300634],
            [121.680552, 31.300543],
            [121.680166, 31.299832],
            [121.68009, 31.299828],
            [121.680133, 31.299929],
            [121.679967, 31.299988],
            [121.67993, 31.299896],
            [121.679865, 31.299942],
          ],
          [
            [121.680852, 31.300401],
            [121.680444, 31.299599],
            [121.680659, 31.299534],
            [121.681056, 31.300323],
            [121.680852, 31.300401],
          ],
          [
            [121.678233, 31.300527],
            [121.678083, 31.300298],
            [121.678093, 31.300165],
            [121.678211, 31.300161],
            [121.67819, 31.300197],
            [121.678249, 31.300284],
            [121.678362, 31.300312],
            [121.678619, 31.300243],
            [121.678646, 31.30017],
            [121.678737, 31.300275],
            [121.678689, 31.300344],
            [121.678233, 31.300527],
          ],
          [
            [121.678517, 31.300569],
            [121.678571, 31.300523],
            [121.678624, 31.300546],
            [121.678914, 31.300449],
            [121.678962, 31.300642],
            [121.678898, 31.300683],
            [121.678807, 31.300665],
            [121.678673, 31.300688],
            [121.678657, 31.300669],
            [121.678555, 31.300665],
            [121.678651, 31.30061],
            [121.678555, 31.300665],
            [121.678517, 31.300569],
          ],
        ];
// 控制显示不同的颜色
        // let boundColors = ['rgb(50,182,255)','rgb(50,182,255)','rgb(255,192,0)','rgb(50,182,255)','rgb(255,255,1)'];
//双重循环
        paths.forEach(function (path,index) {
          var bounds = path.map(function (p) {
            return new AMap.LngLat(p[0], p[1]);
          });
//插件 
          var prism = new AMap.Object3D.Prism({
            path: bounds,
            height: 400, //定义柱子有多高
            color: 'rgb(50,182,255)', // 支持 #RRGGBB、rgb()、rgba() 格式数据
          });

          // 开启透明度支持
          prism.transparent = true;

          // 添加至 3D 图层
          object3Dlayer.add(prism);
        });
        that.map.setFitView();
//添加到地图上
        that.map.add(object3Dlayer);

这个是绘制一个区域 和最上方是一致 的

          //我要开始hi画图了
        var path1 = [
          // new AMap.LngLat(121.680184,31.301315),
          [121.67702, 31.300161],
          [121.677578, 31.300307],
          [121.678581, 31.299941],
          [121.680582, 31.299083],
          [121.681328, 31.299313],
          [121.681736, 31.299941],
          [121.681822, 31.300468],
          [121.681779, 31.30088],
          [121.680497, 31.301334],
          [121.679815, 31.301339],
          [121.678839, 31.300954],
          [121.676967, 31.300225],
          [121.677235, 31.30033],
          [121.676967, 31.300225],
          [121.67702, 31.300161],
        ];
        console.log("11212");
//这个是线的插件 下方是属性
        var polyline = new AMap.Polyline({
          path: path1,
          isOutline: true,
          outlineColor: "#0ddbe5",
          borderWeight: 1,
          strokeColor: "#0ddbe5",
          strokeOpacity: 1,
          strokeWeight: 2,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });
        this.map.add(polyline);

这个是在地图上放置标记

       //  我是三个坐标的位置
          // 三个泵站点数据
          let  that=this
          let addressMarkers = [
            {
              name: "金海泵站",
              lng: 121.664746,
              lat: 31.255257,

              icon: that.imaglist1,
            },
            {
              name: "南汇北泵站",
              lng: 121.68,
              lat: 31.3,
              icon: that.imaglist2,
              id: 1,
            },
            {
              name: "临江泵站",
              lng: 121.469751,
              lat: 31.110018,
              icon: that.imaglist3,
            },
          ];

          // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
          var offset;
          addressMarkers.forEach(function (marker) {
            if (marker.id == "1") {
              offset = new AMap.Pixel(-13, -30);
            } else {
              offset = new AMap.Pixel(-250, -30);
            }
            let markers = new AMap.Marker({
              icon: marker.icon,
              position: [marker.lng, marker.lat],
              offset: offset,
              imageSize: new AMap.Size(400, 500),
            });
            that.map.add(markers);

            // that.map.on("zoomend", () => {
            //   // 获取地图的层级
            //   // let zoom = that.map.getZoom(); //获取当前地图级别
            //   // console.log(zoom);
            //   // if (zoom < 10) {
            //   //   that.map.remove(markers);
            //   // } else {
            //   //   that.map.add(markers);
            //   // }
            // });
          });
          // 自适应
          // 第一个参数为空，表明用图上所有覆盖物 setFitview
          // 第二个参数为false, 非立即执行
          // 第三个参数设置上左下右的空白
          that.map.setFitView(null, true, [250, 200, 250, 120]);

这个是卫星的地图

      let that=this
      let weixing = new AMap.TileLayer.Satellite({
             zIndex: 10,
           });
           this.map.add(weixing);
           that.map.setFitView();