leaflet-smap v1.0.2

更新日志

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

map.layer 图层

map.service 服务(天地图)

map.control 组件

map.measure 测量工具

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

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

options initialize 方法参数