可视化开发(2)——leaflet引入天地图瓦片

原创

已于 2024-09-05 09:09:46 修改 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-09-04 15:51:21 首次发布

1.自己练习使用,首先需要去国家地理信息公共服务平台注册账号,在平台注册登录进入地图服务页面申请使用密钥

2.初始化地图容器

<template>
<div id='map'></div>
</template>

<script setup lang="ts">
//...省略中间的

const centerPoint=[lat,lng]//经纬度 定中心点的
const key='' //密钥

let map = L.map('map', {
    //参考坐标系  crs (坐标参考系) EPSG 43626，默认是 EPSG 3857。
    crs: L.CRS.EPSG4326,
    // 中心点
    center: centerPoint,
    //最小显示等级
    minZoom: 1,
    //最大显示等级
    maxZoom: 18,
    //当前显示等级
    zoom: 7,
    //不添加属性说明控件
    attributionControl: false,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
  })


//方法里面添加天地图,该方法在onMounted里