# leaflet-renderjs

**Repository Path**: stylekong/leaflet-renderjs

## Basic Information

- **Project Name**: leaflet-renderjs
- **Description**: uniapp的renderjs中使用leaflet
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

为兼容app，使用renderjs实现地图组件
## 思路
* 通过prop传递参数，通过change:prop派发方法
* 在renderjs中监听change:prop，执行对应方法
* 每次调用渲染层方法时，都生成一个id，给地图绑定事件，地图方法回调，查找图层
* 关于图层，在逻辑层中派发创建方法时带入一个id，在渲染层中创建图层时按[id]:layer || layer[]的方式将图层保存,可能图层中包含多个子图层，所以有子图层的用数组保存，注意使用方式
* 关于事件绑定，使用onEvent方法，接收一个图层id，将事件回调按[id]:callback的方式保存，
## 使用方法
* @ready:地图初始化完成，返回地图vue组件实例,地图实例id
* options: 地图配置参数,同leaflet配置参数，crs需传对象；crs格式为{
          srsCode: "EPSG:4326",defs: "+proj=longlat +datum=WGS84 +no_defs",options: {origin: [-180.0, 90.0],resolutions: TDT_RESOLUTIONS,},}
```vue
<template>
  <map-view @ready="mapReady" :options="mapOption"></map-view>
</template>
<script>
export default {
  data() {
    return {
      mapOption: {},
      map: null,
      mapId: null
    }
  }
  methods: {
    mapReady(map,mapId) {
      this.map = map
      this.mapId = mapId
    }
  }
}
</script>
```
* emitMethod: 派发方法，对地图操作都会调用这个方法，属于基础方法,一般清空下不用
```js
  this.map.emitMethod(method,options)
```

* init: 初始化地图，返回地图实例id，内部调用，无需使用
* tile: 添加瓦片图层，返回图层实例id,接受三个参数，
  * url:瓦片地址
  * method:请求方法，规则：L.tile => tile, L.supermap.ImageMapLayer => supermap.imageMapLayer，以此类推
  * options:瓦片配置参数，对应方法的参数
```js
  this.map.tile(url, method, options)
```
* control: 添加控件，返回控件实例id, 接受三个参数，
  * options:控件配置参数
```js
  this.map.control(options)
```
* marker: 添加标记，返回标记实例id, 接受二个参数，
  * latlng: 标记位置
  * options:标记配置参数
```js
  this.map.marker(latlng,options)
```
* geoJSON: 添加geoJSON图层，返回图层实例id, 接受二个参数，
  * geoJSON: geoJSON数据
  * options: geoJSON配置参数,可选
```js
  this.map.geoJSON(geoJSON,options)
```
* featureGroup: 添加featureGroup图层，返回图层实例id, 接受一个参数
  * layers: 图层实例id数组,可选
```js
  this.map.featureGroup(layers)
```
* layerGroup: 添加layerGroup图层，返回图层实例id, 接受一个参数
  * layers: 图层实例id数组,可选
```js
  this.map.layerGroup(layers)
```
* layerControl: 添加layerControl图层，返回图层实例id, 接受三个参数
  * baselayers: 基础图层id,可选
  * overlays: 覆盖图层id,可选
  * options: control.layer配置参数,可选
```js
  this.map.layerControl(baselayers, overlays, options)
```
* getLayers: 获取子图层, 接受二个参数
  * layer: 图层实例id
  * callback: 回调函数，接受子图层实例id数组
```js
  this.map.getLayers(layer, callback)
```
* layerMethod: 调用图层方法
  * layer: 图层实例id
  * method: 图层方法
  * callback: 回调函数，接受子图层实例id数组，可选，不传的情况下args自动添加callback对应位置的参数
  * ...args: 图层方法参数
```js
  this.map.layerMethod(layer, method, callback, ...args)
```
* lMethod: 调用leaflet方法,例如icon，lnglat等
  * method: leaflet方法
  * ...args: leaflet方法参数
```js
  this.map.lMethod(method, ...args)
```
* addControl: 添加控件
  * map: 地图实例id
  * control: 控件实例id
```js
  this.map.addControl(map,control)
```
* addBaseLayer: 添加基础图层, 接受三个参数
  * control: 控件实例id
  * layer: 图层实例id
  * name: 图层名称
```js
  this.map.addBaseLayer(control,layer, name)
```
* addOverlay: 添加覆盖图层, 接受三个参数
  * control: 控件实例id
  * layer: 图层实例id
  * name: 图层名称
```js
  this.map.addOverlay(control,layer, name)
```
* addLayer: 添加图层, 将layer图层添加到layerGroup图层中
  * layerGroup: 图层组实例id
  * layer: 图层实例id
```js
  this.map.addLayer(control,layer)
```
* removeLayer: 删除图层, 接受一个参数;**注意: 删除图层组时，不会彻底删除内存中的子图层**
```js
  this.map.removeLayer(layer)
```
* clearLayers: 清空图层, 接受一个参数; **注意: 会彻底删除内存中的子图层**
```js
  this.map.clearLayers(layer)
```
* onEvent: 绑定事件, 接受三个参数
  * layer: 图层实例id
  * type: 事件类型名称
  * callback: 回调函数
```js
  this.map.onEvent(layer, event, callback)
```
* offEvent: 解绑事件, 接受三个参数
  * layer: 图层实例id
  * type: 事件类型名称
  * callback: 回调函数
```js
  this.map.offEvent(layer, event, callback)
```