vue-amap区域显示,3d棱柱效果

文章目录

vue-amap中文文档: https://www.wenjiangs.com/doc/mdxkhhtr

一、在vue项目中安装和基本使用

1. 安装

npm install vue-amap --save

2. 在vue项目中使用

1. 在main.js中引入

js 复制代码
import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "你的key",
  plugin: [
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.DistrictSearch",
  ],
  v: "1.4.4",
});
window._AMapSecurityConfig = {
  securityJsCode: "你的安全密钥",
};

2. demo显示高德地图

html 复制代码
<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: (o) => {
          console.log(o.getCenter());
          console.log(this.$refs.map.$$getInstance());
          o.getCity((result) => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          alert("map clicked");
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.amap-page-container {
  width: 100%;
  height: 900px;
  position: relative;

  .amap-demo {
    width: 100%;
    height: 100%;
  }
}
</style>

效果如图:

二、显示区域

效果如图:

代码如下:

html 复制代码
<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: this.initMap,
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          alert("map clicked");
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  methods: {
    initMap(map) {
        setTimeout(() => {
            this.drawBounds(map)
        }, 200)
    },
     drawBounds(map) {
            let opts = {
                subdistrict: 0,
                extensions: 'all',
                level: 'city'
            }
            let district = new AMap.DistrictSearch(opts)
            let polygons = []
            district.setLevel('上海市')
            district.search("上海市", (status, result) => {
                map.remove(polygons)
                polygons = [];
                let bounds = result.districtList[0].boundaries;
                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        let polygon = new AMap.Polygon({
                            strokeWeight: 3,
                            path: bounds[i],
                            fillOpacity: 0.4,
                            fillColor: '#111e4b',
                            strokeColor: '#ffffff',
                            height: 100,
                            extrusionHeight: 100
                        });
                        polygons.push(polygon);
                    }
                }
                map.add(polygons)
                map.setFitView(polygons);
            })
        },
  }
};
</script>

<style lang="less" scoped>
.amap-page-container {
  width: 100%;
  height: 900px;
  position: relative;

  .amap-demo {
    width: 100%;
    height: 100%;
  }
}
</style>

三、只显示某个区域

效果如图:

代码如下:

html 复制代码
<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: this.initMap,
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          alert("map clicked");
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  methods: {
    initMap(map) {
        setTimeout(() => {
            this.drawBounds(map)
        }, 200)
    },
     drawBounds(map) {
            let opts = {
                subdistrict: 0,
                extensions: 'all',
                level: 'city'
            }
            let district = new AMap.DistrictSearch(opts)
            let polygons = []
            district.setLevel('上海市')
            district.search("上海市", (status, result) => {
                map.remove(polygons)
                polygons = [];
                let bounds = result.districtList[0].boundaries;

                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        let polygon = new AMap.Polygon({
                            strokeWeight: 3,
                            path: bounds[i],
                            fillOpacity: 0.4,
                            fillColor: '#ffffff',
                            strokeColor: '#ffffff',
                        });
                        polygons.push(polygon);
                    }
                }
                map.add(polygons)
                map.setFitView(polygons);

                let outer = [
                    new AMap.LngLat(-360, 90, true),
                    new AMap.LngLat(-360, -90, true),
                    new AMap.LngLat(360, -90, true),
                    new AMap.LngLat(360, 90, true),
                ]
                let holes = result.districtList[0].boundaries
                console.log('holes', holes)
                let pathArray = [
                    outer
                ]
                pathArray.push.apply(pathArray, holes)
                let polygon = new AMap.Polygon({
                    pathL: pathArray,
                    strokeColor: "#ffffff",
                    strokeWeight: 3,
                    strokeOpacity: 1,
                    fillColor: '#031f52',
                    fillOpacity: 1,
                });
                polygon.setPath(pathArray)
                map.add(polygon)
            })
        },
  }
};
</script>

<style lang="less" scoped>
.amap-page-container {
  width: 100%;
  height: 900px;
  position: relative;

  .amap-demo {
    width: 100%;
    height: 100%;
  }
}
</style>

四、3D棱柱区域

效果如图:

代码如下:

html 复制代码
<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        :pitch="pitch"
        viewMode="3D"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pitch: 60,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: this.initMap,
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          alert("map clicked");
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  methods: {
    initMap(map) {
      setTimeout(() => {
        this.drawBounds(map);
      }, 200);
    },
    drawBounds(map) {
      map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
      map.DirectionLight = new AMap.Lights.DirectionLight(
        [0, 0, 1],
        [1, 1, 1],
        1
      );
      let object3Dlayer = new AMap.Object3DLayer();
      map.add(object3Dlayer);

      let opts = {
        subdistrict: 0,
        extensions: "all",
        level: "city",
      };
      let district = new AMap.DistrictSearch(opts);
      let polygons = [];
      district.setLevel("上海市");
      district.search("上海市", (status, result) => {
        map.remove(polygons);
        polygons = [];
        let bounds = result.districtList[0].boundaries;

        let height = 50000;
        let color = "#0088ffcc"; // #0088ffcc; #111e4bcc
        let prism = new AMap.Object3D.Prism({
          path: bounds,
          height: height,
          color: color,
        });
        prism.transparent = true;
        object3Dlayer.add(prism);

        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            let polygon = new AMap.Polygon({
              strokeWeight: 3,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#ffffff",
              strokeColor: "#ffffff",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons);

        
      });
    },
  },
};
</script>

<style lang="less" scoped>
.amap-page-container {
  width: 100%;
  height: 900px;
  position: relative;

  .amap-demo {
    width: 100%;
    height: 100%;
  }
}
</style>

五、添加卫星图层

效果如图:

代码如下:

html 复制代码
<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        :pitch="pitch"
        viewMode="3D"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pitch: 0,
      zoom: 6,
      center: [121.59996, 31.197646],
      events: {
        init: this.initMap,
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          alert("map clicked");
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  methods: {
    initMap(map) {
      setTimeout(() => {
        this.setSatelliteLayer();
      }, 200);
    },
    setSatelliteLayer() {
      const tileLayer = new AMap.TileLayer.Satellite({
        map: this.$refs.map.$$getInstance(),
      });
      tileLayer.show();
    },
  },
};
</script>

<style lang="less" scoped>
.amap-page-container {
  width: 100%;
  height: 900px;
  position: relative;

  .amap-demo {
    width: 100%;
    height: 100%;
  }
}
</style>
相关推荐
渲染101专业云渲染19 分钟前
川翔云电脑优势总结
服务器·3d·电脑·blender·maya
quitv27 分钟前
react脚手架配置别名
前端·javascript·react.js
化作繁星37 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js