vue+ts实现离线高德地图 内网离线高德地图

1、下载瓦片

我是用最简单的软件下载——MapDownloader
链接:https://pan.baidu.com/s/1Hz__HcA5QhtGmjLNezC_pQ
提取码:6lek

来源:https://blog.csdn.net/fuhanghang/article/details/131330034

2、部署私有化瓦片资源

这里也是用最简单的方式把第一步下载的瓦片通过nginx部署,后续访问瓦片资源时转到本地。这是关键点。nginx.conf 配置如下:

server{
		listen 18082;
		server_name	localhost;
		location / {
			root D:/GisMap/_alllayers;
			#try_files $uri $uri/ /index.html;
			#index index.html;
        }
}

3、下载map.js

1、先在高德官网申请key,https://console.amap.com/dev/key/app,申请好后会得到一个Key和一个安全密钥

注意:本文内的key和安全密钥皆为随机数,使用时要替换为自己的key

key:2236528b03e3dfb83051e93412341234

安全密钥:02069dade051826154e3c08a12341234

在这里插入图片描述

2、下载js,并引入

下载好的map.js放到项目根目录与index.html并列(位置不固定,看个人需求)

https://webapi.amap.com/maps?v=2.0&key=你的key
例:https://webapi.amap.com/maps?v=2.0&key=2236528b03e3dfb83051e93412341234

在index.html中引入

<script type="text/javascript" src="./maps.js"></script>
3、下载一些其它地图资源
https://vdata.amap.com/style_icon/2.0/icon-biz-big.png

https://vdata.amap.com/style_icon/2.0/icon-normal-big.png

https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png

跟瓦片放一起

在这里插入图片描述

4、更改map.js

1、打开下载的map.js,把最后一行的https://webapi.amap.com,替换成本地瓦片地址http://127.0.0.1:18082
在这里插入图片描述
全局搜索icon-biz-bigicon-normal-big,共6处地方都换成本地地址
在这里插入图片描述

5、页面代码

<template>
  <div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';

export default defineComponent({
  name: 'AMap',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
  },
  setup() {
    const wrapRef = ref<HTMLDivElement | null>(null);
    let AMapSelf = (window as any).AMap;
    const Icon = new AMap.Icon({
      size: new AMap.Size(26, 35),
      image: 'gaodemap/poi-marker-default.png',
      imageSize: new AMap.Size(26, 35),
    });

    async function initMap() {
      const wrapEl = unref(wrapRef);
      if (!wrapEl) return;
      AMapSelf = new AMap.Map(wrapEl, {
        resizeEnable: true,
        zoom: 15, // 初始化缩放级别
        viewMode: '3D',
        center: [119.28, 26.08], // 初始化中心点
        // 指定离线地图路径
        layers: [
          new AMap.TileLayer({
            visible: true,
            zIndex: 99,
            opacity: 1,
            getTileUrl: (a, b, c) => {
              //经纬度转换成本地瓦片所在路径
              let flag = '00000000';
              let zz = c;
              let z = 'L' + zz;
              let xx = a.toString(16);
              let x = 'C' + flag.substring(0, 8 - xx.length) + xx;
              let yy = b.toString(16);
              let y = 'R' + flag.substring(0, 8 - yy.length) + yy;
              return 'gaodemap/' + z + '/' + y + '/' + x + '.png';
            },
          }),
        ],
      });

      AMapSelf.setDefaultCursor('pointer');

      AMapSelf.on('click', (e) => {
        AMapSelf.clearMap();
        var marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
          icon: Icon,
          offset: new AMap.Pixel(-13, -30),
        });
        AMapSelf.add(marker);
        var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图';
        alert(text);
      });
    }

    onMounted(() => {
      initMap();
    });

    return { wrapRef };
  },
});
</script>

6、别忘了配置项目的转发

在这里插入图片描述

7、效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Vue3和TypeScript都是现代化前端开发技术,相结合可以大大提高开发效率和代码质量。高德地图是目前应用广泛的地图API之一,在Vue3中使用TypeScript实现高德地图展示,可以借助高德地图JavaScript API实现。 首先需要在项目中安装高德地图JavaScript API:npm install @amap/amap-jsapi-loader 接着在组件中引入AMapJSAPILoader,代码如下: ```typescript import { defineComponent, onMounted } from 'vue'; import { AMapJSAPILoader } from '@amap/amap-jsapi-loader'; export default defineComponent({ setup() { const initMap = () => { AMapJSAPILoader.load({ key: '你的高德地图key', version: '2.0', plugins: [], }).then((AMap: any) => { // 在这里可以使用高德地图API进行相关操作 }); }; onMounted(() => { initMap(); }); return {}; }, }); ``` 其中,key为高德地图的开发者key,version为API的版本号,plugins为需要引入的插件。 使用AMapJSAPILoader.load方法加载API之后,就可以通过AMap对象操作地图了,例如: ```typescript AMap.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位,默认:true timeout: 10000, // 超过10秒后停止定位,默认:无穷大 maximumAge: 0, // 定位结果缓存0毫秒,默认:0 convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true showCircle: true, // 定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围可见,默认:false }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete); AMap.event.addListener(geolocation, 'error', onError); function onComplete(data: any) { // data中包含定位结果 } function onError(error: any) { // 定位出错 } }); ``` 以上代码使用高德地图的定位插件获取当前位置,通过添加事件监听器,可以获取获取定位结果。通过类似的方式,可以实现地图的缩放、平移、标注、路径规划等功能。 总之,在Vue3中使用TypeScript实现高德地图的展示,可以借助高德地图JavaScript API,通过类似上述的方法进行相关操作,实现地图的各种功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值