更新日志

1.0.0

• 初始版本发布

1.0.1

• 修复一些问题

1.0.2

• 增加天地图行政区划服务查询

使用前

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

安装

npm i leaflet-smap  

开始使用

导入包文件

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

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 | 是否显示测量结果标记 |