vue3 react使用高德离线地图

下载离线资源

下载地址 https://download.csdn.net/download/u010843503/90234612

2、部署私有化瓦片资源

ngxin中配置如下

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

下载map.js

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

下载其他资源

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

图片放在一起

更改map.js

https://webapi.amap.com更换成自己服务器或者本地127.0.0.1也就是下图allayers的地址

https://webapi.amap.com/maps?v=2.0&key=你的key
打开后保存maps.js 放到index.html根目录下
并引入进去
<script type="text/javascript" src="./maps.js"></script>


<template>
   <div id="container" style="width: 100%;height: 800px;">

   </div>
</template>
<script setup lang="ts">
import { dicApi } from '/@/api/system/dic/index';
import { ref,  unref, onMounted } from "vue";
let map = null;
const diApi = dicApi()
onMounted(()=>{
  const wrapRef = ref<HTMLDivElement | null>(null);

		let AMapSelf = (window as any).AMap;
		
		const Icon = new AMap.Icon({
			size: new AMap.Size(26, 35),
			image: 'https:/XXX.com/gaode/poi-marker-default.png',
			imageSize: new AMap.Size(26, 35),
		});

		async function initMap() {
			const wrapEl = unref(wrapRef);
			// console.log("进来了？",!wrapEl,unref(wrapRef))
			// if (!wrapEl) return;
			AMapSelf = new AMap.Map("container", {
				resizeEnable: true,
				zoom: 16.5, // 初始化缩放级别
				viewMode: '3D',
				center: [119.696603, 25.478395], // 初始化中心点
				// 指定离线地图路径
				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;
							// console.log('gaodemap/' + z + '/' + y + '/' + x + '.png')
							return 'https://XXX/gaode/' + z + '/' + y + '/' + x + '.png';
						},
					}),
				],
			});

			AMapSelf.setDefaultCursor('pointer');
		
      let parar={
        page:1,
        include:" region;road;intersection;location",
search: "location_id:;intersection_id:;name::like;region_id:;road_id:;pole_type:"
      }
      //获取需要marker标记点的经纬度 数组
			let res = await diApi.getDicList(parar)
			
      let data=[]
      if(res.isSuccess){
        data=res.returnData
      }
			 let markData=[]
			data.map((item,index)=>{
			    const marker = new AMap.Marker({
			      position: new AMap.LngLat(item.lng, item.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
			      title: item.name,
			      offset: new AMap.Pixel(0, 0),
			    
			      icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
			      anchor:'bottom-center',
			      
			    });
			    marker.setLabel({
              direction:'right',
              offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
              content: "<div class='info' onclick='clearMarker()'>"+item.name+"</div>", //设置文本标注内容
          });
          marker.on('mouseover', function (e) {
            // 显示这个marker点详细信息的浮窗，这个要放单独方法调用才能显示，暂时不明白为什么，直接把方法内的东西写在下面浮窗并不显示
             console.log(e,"一如")
          })
            // 鼠标移出marker点位触发
          marker.on('mouseout', function (e) {
              console.log(e,"移除")// 关闭详细信息的浮窗，地图方法
          })
            // 鼠标点击marker触发
          marker.on('click', function (e,index) {
              console.log(e,"点击事件---",index) //
              clearMarker() 
          })


			    markData.push(marker)
			  })
			  AMapSelf.add(markData)
        // 标记点添加事件
        // AMapSelf.on('click', (e)=>{
        //   console.log("点击了地图",e)
        // })
      
		}
		
		initMap()
})
const clearMarker = () => {
          console.log("清除了")
        
        }


</script>
<style lang="scss">
.map-img{
    width:600px;
    /* height: 400px; */
    height: 480px;
}
.poserMap{
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    .listData-item{
        position: absolute;

        .map_detalMark{
            width: 100%;
            height: 100%;
            position: relative;
            .margImg{
                width: 50px;
            }
            .namert_sert{
                position: absolute;
                left: 52px;
                top: 30px;
                display: block;
                min-width: 52px;
                padding: 4px 6px;
                border: 1px #0000FF solid;
                background-color: #fff;
                font-size: 12px;
            }
        }
    }
}
</style>

效果

这样即使在内网环境也能这场访问，