使用前

因为是基于 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

| 方法名 | 返回值 | 描述 | | :---------------------------- | :----- | :------------------------------------ | | createMap(options) | - | 创建地图实例 options 是地图配置参数 | | addPresetTileLayer(options) | - | 加载地图底图 options 是地图配置参数 | | setFixView 暂未实现 | - | 使地图缩放到适合大小 |

map.layer 图层

| 方法名 | 返回值 | 描述 | | :------------------------------- | :------------ | :-------------------------------------------------------------- | | getGeoJson(options) | Promise(json) | 获取 geosever 的 geojson 数据 | | createWFSLayer(options,data) | geoJsonLayer | 创建 WFS 图层 options是 L.geojson 参数 data 是 geojson 数据 | | createWMSLayer(options) | tileLayer | 创建 WMS 图层 options是 L.tileLayer.wms 参数 |

map.service 服务(天地图)

| 方法名 | 返回值 | 描述 | | :--------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- | | localSearch(map,options) | Promise(data) | POI 位置搜索（基于天地图地名搜索 2.0）map 是地图实例对象，options 是天地图该 api 的所需配置参数 | | getLocation(options) | - | 地理位置解析经纬度 基于地理位置解析查询 options 是天地图该 api 的所需配置参数 | | getPoint(options) | - | 逆地理位置解析 基于逆地理编码查询 options 是天地图该 api 的所需配置参数 | | getLocationByIp() | Promise(data) | 根据 IP 获取地理位置 |

map.control 组件

| 方法名 | 返回值 | 描述 | | :---------------------------- | :----- | :---------------------------------------------------- | | attributionControl(options) | - | 水印组件 options 与 Leaflet 对应 control 参数相同 | | zoomControl(options) | - | 缩放组件 options 与 Leaflet 对应 control 参数相同 | | scaleControl(options) | - | 比例尺组件 options 与 Leaflet 对应 control 参数相同 |

map.measure 测量工具

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

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

| 方法名 | 返回值 | 描述 | | :------------------------------- | :----- | :---------------------------------------------------- | | initialize(instance,options) | - | 初始化 instance是地图实例，options 配置参数见下方 | | enable() | - | 启动绘图 | | disable() | - | 关闭绘图 | | removeAll() | - | 移除当前地图上该类型所有绘制图形 |

options initialize 方法参数

| 参数名 | 默认值 | 描述 | | :--------- | :----- | :------------------- | | showMarker | false | 是否显示测量结果标记 |