更新记录

1.0.0（2026-01-04） 下载此版本

实现基本功能且可自由扩展

平台兼容性

uni-app(3.6.15)

dq-leaflet

为兼容app，使用renderjs实现地图组件

思路

• 通过prop传递参数，通过change:prop派发方法

• 在renderjs中监听change:prop，执行对应方法

• 每次调用渲染层方法时，都生成一个id，给地图绑定事件，地图方法回调，查找图层

• 关于图层，在逻辑层中派发创建方法时带入一个id，在渲染层中创建图层时按[id]:layer || layer[]的方式将图层保存,可能图层中包含多个子图层，所以有子图层的用数组保存，注意使用方式

• 关于事件绑定，使用onEvent方法，接收一个图层id，将事件回调按[id]:callback的方式保存，

  使用方法

• scripts: 使用的脚本地址，已默认加载leaflet.js,注意脚本加载顺序，例如同时使用supermap和proj4时，先加载supermap再加载proj4

• links: 使用的样式地址，已默认加载leaflet.css

• options: 地图配置参数,同leaflet配置参数，crs需传对象；crs格式为{ srsCode: "EPSG:4326",defs: "+proj=longlat +datum=WGS84 +no_defs",options: {origin: [-180.0, 90.0],resolutions: TDT_RESOLUTIONS,},}

  <template>
  <dq-leaflet :scripts="scripts" :links="links" @onReady="mapReady" :options="mapOptions"></dq-leaflet>
  </template>
  <script>
  export default {
  data() {
  return {
    scripts: ['/static/iclient-leaflet.js', '/static/proj4.js','/static/proj4leaflet.js'],
    links: ['/static/leaflet-geoman.css'],
    map: null,
    mapId: null,
          mapOptions: {
              // leaflet的 Map options
              center: [51.505, -0.09],
              zoom: 13
          }
  }
  }
  mounted() {
      this.$nextTick(() => { // 确保能拿到dom
          this.init()
      })
  },
  methods: {
  mapReady(mapId) {
          this.map = this.$refs.map
          this.mapId = mapId
  }
  }
  }
  </script>

• emitMethod: 派发方法，对地图操作都会调用这个方法，属于基础方法,一般情况下不用

  this.map.emitMethod(method,options)

• init: 初始化地图，返回地图实例id，接受一个参数,内部以调用，不要使用

  • options: 地图配置参数,同leaflet配置参数，crs需传对象；crs格式为{ srsCode: "EPSG:4326",defs: "+proj=longlat +datum=WGS84 +no_defs",options: {origin: [-180.0, 90.0],resolutions: TDT_RESOLUTIONS,},}

    var mapId = this.map.init(options)

• tile: 添加瓦片图层，返回图层实例id,接受三个参数，

  • url:瓦片地址
  • method:请求方法，规则：L.tile => tile, L.supermap.ImageMapLayer => supermap.imageMapLayer，以此类推
  • options:瓦片配置参数，对应方法的参数

    var tileId = this.map.tile(url, method, options)

• control: 添加控件，返回控件实例id, 接受三个参数，

  • options:控件配置参数

    var controlId = this.map.control(options)

• marker: 添加标记，返回标记实例id, 接受二个参数，

  • latlng: 标记位置
  • options:标记配置参数

    var markerId = this.map.marker(latlng,options)

• geoJSON: 添加geoJSON图层，返回图层实例id, 接受二个参数，

  • geoJSON: geoJSON数据
  • options: geoJSON配置参数,可选

    var geoJSONId = this.map.geoJSON(geoJSON,options)

• featureGroup: 添加featureGroup图层，返回图层实例id, 接受一个参数

  • layers: 图层实例id数组,可选

    var featureGroupId = this.map.featureGroup(layers)

• layerGroup: 添加layerGroup图层，返回图层实例id, 接受一个参数

  • layers: 图层实例id数组,可选

    var layerGroupId = this.map.layerGroup(layers)

• layerControl: 添加layerControl图层，返回图层实例id, 接受三个参数

  • baselayers: 基础图层id,可选
  • overlays: 覆盖图层id,可选
  • options: control.layer配置参数,可选

    var layerControlId = this.map.layerControl(baselayers, overlays, options)

• getLayers: 获取子图层, 接受二个参数

  • layer: 图层实例id
  • callback: 回调函数，接受子图层实例id数组

    this.map.getLayers(layer, callback)

• layerMethod: 调用图层方法,layer可以是map，layerGroup，marker，popup，polyline等各个类型的实例

  • layer: 图层实例id
  • method: 图层方法
  • callback: 回调函数，接受子图层实例id数组，可选，不传的情况下args自动添加callback对应位置的参数
  • ...args: 图层方法参数

    this.map.layerMethod(layer, method, callback, ...args)

• lMethod: 调用leaflet方法,例如icon，lnglat等

  • method: leaflet方法
  • ...args: leaflet方法参数

    this.map.lMethod(method, ...args)

• addControl: 添加控件

  • map: 地图实例id
  • control: 控件实例id

    this.map.addControl(map,control)

• addBaseLayer: 添加基础图层, 接受三个参数

  • control: 控件实例id
  • layer: 图层实例id
  • name: 图层名称

    this.map.addBaseLayer(control,layer, name)

• addOverlay: 添加覆盖图层, 接受三个参数

  • control: 控件实例id
  • layer: 图层实例id
  • name: 图层名称

    this.map.addOverlay(control,layer, name)

• addLayer: 添加图层, 将layer图层添加到layerGroup图层中

  • layerGroup: 图层组实例id
  • layer: 图层实例id

    this.map.addLayer(control,layer)

• removeLayer: 删除图层, 接受一个参数;注意: 删除图层组时，不会彻底删除内存中的子图层

  this.map.removeLayer(layer)

• clearLayers: 清空图层, 接受一个参数; 注意: 会彻底删除内存中的子图层

  this.map.clearLayers(layer)

• onEvent: 绑定事件, 接受三个参数

  • layer: 图层实例id
  • type: 事件类型名称
  • callback: 回调函数

    this.map.onEvent(layer, event, callback)

• offEvent: 解绑事件, 接受三个参数

  • layer: 图层实例id
  • type: 事件类型名称
  • callback: 回调函数

    this.map.offEvent(layer, event, callback)