vue中使用高德地图,只加载出地图logo,地图没有加载出来

在使用vue开发的过程中,需要使用到高德地图,但按照高德地图的官方文档配置后,只显示高德地图的logo,但是始终加载不到地图。

如下图所示:

解决办法:

将全局引用的的mockjs注释掉就可以解决这个冲突问题。

 

 

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Vue3,可以通过以下步骤加载GeoServer瓦片地图: 1. 首先,在Vue项目安装高德地图2.0和axios: ``` npm install vue-amap axios --save ``` 2. 在main.js引入高德地图2.0和axios: ``` import VueAMap from 'vue-amap'; import axios from 'axios'; Vue.use(VueAMap); Vue.use(axios); ``` 3. 在Vue组件引入高德地图组件: ``` <template> <div> <amap :zoom="zoom" :center="center"> <tile-layer :url="url" /> </amap> </div> </template> <script> export default { data() { return { zoom: 10, center: [116.397428, 39.90923], url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/map:village@EPSG:3857@png/{z}/{x}/{y}.png' } } } </script> ``` 在上面的代码,我们加载了GeoServer瓦片地图,其url为GeoServer瓦片地图的地址。 4. 在Vue组件使用axios从GeoServer获取瓦片地图的地址,并将其赋值给url: ``` <template> <div> <amap :zoom="zoom" :center="center"> <tile-layer :url="url" /> </amap> </div> </template> <script> import axios from 'axios'; export default { data() { return { zoom: 10, center: [116.397428, 39.90923], url: '' } }, mounted() { axios.get('http://localhost:8080/geoserver/gwc/service/wmts?request=GetTile&version=1.0.0&service=WMTS&layer=map:village&tilematrixset=EPSG:3857&format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}').then(res => { this.url = res.request.responseURL; }); } } </script> ``` 在上面的代码,我们通过axios从GeoServer获取瓦片地图的地址,并将其赋值给url。注意,上面的代码的url为WMTS的地址,需要根据自己的情况修改。 这样,我们就成功地加载了GeoServer瓦片地图
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值