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

于 2024-01-04 10:40:22 发布
阅读量1.1k 收藏 20
点赞数 20
分类专栏： 高德地图 文章标签： vue.js 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/135377325
版权

文章目录


vue-amap中文文档： https://www.wenjiangs.com/doc/mdxkhhtr
在这里插入图片描述

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

1. 安装

npm install vue-amap --save

2. 在vue项目中使用

1. 在main.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显示高德地图

<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>

效果如图：
在这里插入图片描述

二、显示区域

效果如图：
在这里插入图片描述
代码如下：

<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>

三、只显示某个区域

效果如图：
在这里插入图片描述
代码如下：

<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棱柱区域

效果如图：
在这里插入图片描述
代码如下：

<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>

五、添加卫星图层

效果如图：
在这里插入图片描述

代码如下：

<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>
jieyucx
关注
  • 20
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 使用高德地图vue-amap组件过程解析
10-16
主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue-amap-dev.zip
12-31
vue整合高德地图的官网教程，打开压缩文件，install然后运行npm run dev即可，具体阅读readme文件。
vue-mindmap：VueMindmap是mindnode贴图的vue组件
02-06
Vue思维导图 VueMindmap是用于mindnode贴图的vue组件，其灵感来自 。 在真棒之上构建的。 安装 npm install --save vue-mindmap 用法 捆绑器（Webpack，汇总） import Vue from 'vue' import VueMindmap from 'vue-mindmap' // You need a specific loader for CSS files like https://github.com/webpack/css-loader import 'vue-mindmap/dist/vue-mindmap.css'
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
01-19
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下： import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap) Vue.use(ElementUI) VueAMap.i
Vue-高德地图-立体多边形绘制
站在巨人的肩膀上前行
04-27 2265
使用 @amap/amap-jsapi-loader 可以方便地在 Vue2 中使用高德地图，同时也可以根据自己的需求添加相应的插件。希望本篇文章能够帮助大家快速上手使用高德地图。
高德地图上画图!和3D绘制区域
qq_44161703的博客
09-30 1304
封装了一些方法 前提是引入 高德api 才能使用这个办法。
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
_小郑有点困了的博客
07-21 3499
vue使用高德地图小demo（标记点，画线，3D） 这个模式是3D的，可以看到地图是带有一定的倾角的。 注意：3D模式下，是不能够将进行画线的，不能使用PathSimplifier，改成2D可以正常使用。 代码复制即可用！ 效果图： 代码实现： main.js是需要引入amap的： import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 高德key key: '6b8d48xxxxxxx
vue3使用高德地图实现3d地图
weixin_71893790的博客
11-20 1073
vue3实现高德地图
JavaScript使用高德地图可视化3D地图区域上添加自定义的图标及工具的使用
mentalitys的博客
09-03 3846
如果开发者账号包括Key已经有了，请忽略此步骤 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 记住这个Key，引入地图API时使用。 效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
最新发布
baidu_33164415的博客
12-22 1013
vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
Vue组件之高德地图地址选择功能的实例代码
01-21
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图 二、组件要实现的功能 1. 如果有传入坐标点，则定位到坐标点 2. 如果没有传入坐标点，则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后，右侧要显示拖动后的经纬度和地址 6. 点击确定按钮，返回最后的坐标点和地名给父组件 三、 组件实现具体代码 <template> <div class=map-box :style={ width: width, height: height
AMap3D(功能极其丰富的地图应用源码).zip
12-25
AMap3D(功能极其丰富的地图应用源码).zip
高德地图JS API，数据可视化，地图3D效果
shsyzhzhgn的博客
08-13 749
vue3高德地图JS API,数据可视化，地图3D效果
Vue 中使用高德地图api
Tongyao
01-04 3456
代码比较简洁好用的原生高德地图api 1、在根目录 public 文件夹下的 index.html 中加入 2、在 vue.config.js 文件中配置 externals 注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。 3、实际使用 注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到
Vue+高德地图api
qq_42155347的博客
05-11 2325
Vue+高德地图api
学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）
bsegebr的博客
03-02 1537
高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API****结合 Vue 展开介绍。 一、案例效果 二、开发准备 需要注意想要使用 JS API 必须注册账号并获取 key 值。 1. 注册高德开放平台账号 正常输入个人信息注册即可。 2. 创建应用添加 key 值 注册成功之后，进入控制台，然后点击创建新应用； 填写名称应用名称和类型之后就可以看到已创建的应用了； 接下来点击“添加”为应用添加 key 值
Vue + 高德地图 + 三维模型
Bom_Dom的博客
12-13 1702
Vue + 高德地图 + 三维模型的报错Uncaught SyntaxError: Unexpected token '
在vue种使用高德地图
qq_36813076的博客
06-22 986
cnpm下载amap-jsapi-loader之后在你所需要渲染地图的页面引入相应的依赖 2，开始加载地图，切记你需要申请高德地图开发者模式的key，怎么申请就不赘述了，自己百度一大堆，废话不多说，直接上代码 备注：plugins这个数组里边是地图的插件，比如你需要在地图上加载区县或者乡镇边界，那就将AMap.GeoJSON，AMap.Polygon这两个插件写进去，可以按需写入，记住他有很多插件可供使用...
vue-cli3.0引入高德3d动画效果方法一：
浩星
11-08 5013
前言： 因为两个方法代码量都特别大，这里分2个页面详细说一下，这个页面是方法一，包括vue-cli3.0中使用和html中使用两种示例 ***注意：这里有想看另一种方法的童鞋请点入口： https://blog.csdn.net/qq_41619796/article/details/102968469 好了。我们回到主题，分两部分来说一下项目中直接使用高德地图...
vue-amap 不显示定位按钮
06-03
如果你使用的是 vue-amap SDK，那么可以通过以下步骤添加定位按钮： 1. 在 Vue 组件的 `mounted` 钩子函数中，调用 `this.$amap.service('AMap.Geolocation')` 创建定位服务对象。 2. 调用定位服务对象的 `getCurrentPosition` 方法获取当前位置，并将 `showButton` 参数设置为 `true` 打开定位按钮。 下面是一个示例代码： ```javascript mounted() { // 创建定位服务对象 this.geolocation = this.$amap.service('AMap.Geolocation', {}); // 获取当前位置，并打开定位按钮 this.geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { this.$amap.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认为 true showButton: true, // 是否显示定位按钮，默认为 false buttonPosition: 'LB', // 定位按钮的位置，可以设置 'LT'、'LB'、'RT'、'RB'，默认为 'LB' buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离地图边缘的偏移量，默认为 AMap.Pixel(10, 20) zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点，默认为 true }); this.$map.addControl(geolocation); }); } }); }, ``` 在上面的代码中，我们首先创建了定位服务对象 `this.geolocation`，然后在 `getCurrentPosition` 方法中获取当前位置，并调用 `this.$amap.plugin` 方法添加定位控件，并将 `showButton` 参数设置为 `true` 打开定位按钮。 注意：为了使用 `this.$amap.plugin` 方法添加定位控件，需要先在 Vue 组件的 `mounted` 钩子函数中调用 `this.$amap.plugin('AMap.Geolocation')` 加载定位插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值