vue中使用高德地图2.0(一)加载地图

安装Loader

npm i @amap/amap-jsapi-loader --save

创建地图容器
<template>
     <div id="map"></div>
</template>
引入Loader
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
</script>
设置地图容器样式
#map {
   padding: 0px;
   margin: 0px;
   width: 100%;
   height: 100%;
 }
初始化地图
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
	data() {
		return {
			map: null
		}
	},
	methods: {
		// 初始化地图
	    initAMap() {
	      AMapLoader.load({
	        key: '你的key', //key值
	        version: "2.0", // 版本
	        plugins: [], // 插件
	        AMapUI: { version: "1.1", plugins: [] },
	        Loca: { version: "2.0" },
	      }).then((AMap) => {
	        this.map = new AMap.Map("map", {
	          viewMode: "2D", // 2D or 3D
	          zoom: 10, // 缩放值
	          zooms: [2, 20], // 缩放范围
	          center: [120.10, 36.09], // 中心点坐标
	          // mapStyle: 'amap://styles/grey' // 地图样式
	        })
	        this.map.on('complete', () => {
	        	// 地图图块加载完成后执行
	        })
	      }).catch(e => {
	        console.log(e)
	      })
    	}
	}
}
</script>
Vue3中,可以通过以下步骤加载GeoServer瓦片地图: 1. 首先,在Vue项目中安装高德地图2.0和axios: ``` npm install vue-amap axios --save ``` 2. 在main.js中引入高德地图2.0和axios: ``` import VueAMap from &#39;vue-amap&#39;; import axios from &#39;axios&#39;; 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: &#39;http://localhost:8080/geoserver/gwc/service/tms/1.0.0/map:village@EPSG:3857@png/{z}/{x}/{y}.png&#39; } } } </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 &#39;axios&#39;; export default { data() { return { zoom: 10, center: [116.397428, 39.90923], url: &#39;&#39; } }, mounted() { axios.get(&#39;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}&#39;).then(res => { this.url = res.request.responseURL; }); } } </script> ``` 在上面的代码中,我们通过axios从GeoServer中获取瓦片地图的地址,并将其赋值给url。注意,上面的代码中的url为WMTS的地址,需要根据自己的情况修改。 这样,我们就成功地加载了GeoServer瓦片地图
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值