leaflet-map-extend v1.0.0

使用前

因为是基于 Leaflet 的二次封装，必须先熟练掌握 Leaflet 的使用,文档地址

安装

npm i leaflet-map-extend

开始使用

导入包文件

import { map as drawMap, utils } from "leaflet-map-extend";

drawMap 是地图核心模块，提供了地图初始化加载，以及其他一些地图相关的方法

创建地图容器

<div id="map"></div>

id的命名按照html规范即可，可以设置为其他名称，例如：osd-map,map-instance 内置默认的容器 id 是map

创建好地图容器之后，需要给地图容器赋予样式，定宽定高，例如

#map {
  width: 800px;
  height: 800px;
}

创建配置文件

const mapConfig = {
  map: {
    container: "map", // 地图容器id
    type: "GaoDe.Normal.Map", // 地图类型
    center: [31.820591, 117.227219], // 默认中心坐标点
    zoom: 12, // 默认缩放
    preferCanvas: true, // 是否使用canvas加载
    minZoom: 6, // 最小缩放级别
    maxZoom: 18, // 最大缩放级别
    key: "6cb11577e3ac27bbe015669e413f6cc4", // 天地图秘钥
  },
};

加载地图

这里以Vue3项目为例，地图实例需要在onMounted生命周期之后创建

import { onMounted } from "vue";
let gisMap = null;

onMounted(() => {
  // 创建地图实例
  gisMap = drawMap.createMap(mapConfig); // 内部读取的是"map"键名下的配置
  // 加载地图底图
  drawMap.addPresetTileLayer(mapConfig); // 内部读取的是"map"键名下的配置
});

至此，地图的初始化加载已经完成

配置说明

底图

地图使用了leaflet.ChineseTmsProviders插件，所以配置是继承了该插件的使用，项目地址

其中providers 对应的就是上面地图配置的type 文档地址

在该插件的基础上，还新增了一些底图：

• GaoDe.Brief.Map 高德一种简化要素的类型地图
• BaiduV3.Normal.Map 百度高清底图 使用百度地图需要手动设置 crs 参数：crs:L.CRS.Baidu

配置文件

mapConfig.map 这里可以传入除自身配置之外,Leaflet Map所提供的所有配置参数，内部对参数传递做了一个合并

API

map

map.layer 图层

map.service 服务(天地图)

map.control 组件

map.measure 测量工具

提供了基础的测量工具，也可当做简单的绘制工具来使用

• map.measure.polyline 测距
• map.measure.polygon 测面
• map.measure.circle 测圆
• map.measure.rectangle 测方

options initialize 方法参数