地图存放数据与工具类,提高性能,单例模式

138 阅读6分钟
  static instance = null
  _even = new Map()

  constructor() {
    if (PointProperty.instance != null) {
      return PointProperty.instance
    }
    PointProperty.instance = this
  }

  set(type, property) {
    if (type == null) throw new Error('type is required')
    if (property.id == null) throw new Error('id is required')
    this.getValue(type).set(property.id, property)
  }

  get(type, id) {
    if (type == null) throw new Error('type is required')
    if (id == null) throw new Error('id is required')
    return this.getValue(type).get(id)
  }

  clear(type, id) {
    if (id != null) {
      return this.getValue(type).delete(id)
    }
    if (type != null) {
      return this.getValue(type).clear()
    }

    this._even.clear()
  }

  getValue(type) {
    if (this._even.has(type)) {
      return this._even.get(type)
    }
    const result = new Map()
    this._even.set(type, result)
    return result
  }
} 

类的主要功能

  1. 单例模式:

    • 确保类的实例唯一,任何地方创建的 PointProperty 对象都是同一个实例。
  2. 数据存储和管理:

    • 每种 type 类型对应一个 Map,用于存储对应 id 的属性数据。
  3. 方法说明:

    • set(type, property):设置或更新某个类型中的属性数据。
    • get(type, id):获取指定类型和 ID 的属性数据。
    • clear(type, id):清除指定类型或 ID 的数据。
    • getValue(type):内部方法,获取指定类型的 Map 数据,如果不存在则创建一个新的。

使用方式

假设要在百度地图上进行撒点和绘制色块,可以使用该类存储点数据或色块数据并快速管理它们。

1. 初始化和存储数据

import PointProperty from './PointProperty';

// 初始化单例
const pointProperty = new PointProperty();

// 存储点数据
pointProperty.set('marker', { id: 'point1', lng: 116.404, lat: 39.915, color: 'red' });
pointProperty.set('marker', { id: 'point2', lng: 116.414, lat: 39.925, color: 'blue' });

// 存储色块数据
pointProperty.set('polygon', { id: 'polygon1', points: [{ lng: 116.394, lat: 39.905 }, { lng: 116.404, lat: 39.915 }], color: 'green' });

2. 获取数据

// 获取某个点的数据
const point1 = pointProperty.get('marker', 'point1');
console.log(point1); // { id: 'point1', lng: 116.404, lat: 39.915, color: 'red' }

// 获取某个色块的数据
const polygon1 = pointProperty.get('polygon', 'polygon1');
console.log(polygon1); // { id: 'polygon1', points: [...], color: 'green' }

3. 清除数据

// 清除某个点
pointProperty.clear('marker', 'point1');

// 清除所有点数据
pointProperty.clear('marker');

// 清除所有数据
pointProperty.clear();

结合百度地图的使用示例

假设你使用百度地图的 JavaScript API,可以通过 PointProperty 存储和管理地图上的点和色块。

撒点示例

const map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

// 添加点标记
function addMarker(lng, lat, id, color) {
  const point = new BMap.Point(lng, lat);
  const marker = new BMap.Marker(point, {
    icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
      scale: 1.5,
      fillColor: color,
      fillOpacity: 0.8,
    }),
  });
  map.addOverlay(marker);

  // 存储点数据
  pointProperty.set('marker', { id, lng, lat, color });
}

// 添加一些点
addMarker(116.404, 39.915, 'point1', 'red');
addMarker(116.414, 39.925, 'point2', 'blue');

绘制色块示例

// 添加色块
function addPolygon(points, id, color) {
  const polygon = new BMap.Polygon(
    points.map(p => new BMap.Point(p.lng, p.lat)),
    { strokeColor: color, fillColor: color, fillOpacity: 0.5 }
  );
  map.addOverlay(polygon);

  // 存储色块数据
  pointProperty.set('polygon', { id, points, color });
}

// 添加一个绿色的色块
addPolygon(
  [{ lng: 116.394, lat: 39.905 }, { lng: 116.404, lat: 39.915 }, { lng: 116.414, lat: 39.905 }],
  'polygon1',
  'green'
);

管理点或色块

// 获取点数据并更新
const marker = pointProperty.get('marker', 'point1');
if (marker) {
  console.log(`点位信息:经度=${marker.lng}, 纬度=${marker.lat}, 颜色=${marker.color}`);
}

// 清除某个点
pointProperty.clear('marker', 'point2');

// 清除所有色块
pointProperty.clear('polygon');

优点

  1. 使用 PointProperty 类可以将数据与地图对象分离,便于数据管理。
  2. 支持快速查询和更新点或色块的属性。
  3. 单例模式避免了多次实例化造成的数据混乱。

这种方式非常适合在地图开发中处理大量点或图形对象的数据存储和管理场景。

1. 单例模式

  • 好处:使用单例模式确保全局只有一个 PointProperty 实例,这样在多个模块中都可以安全地访问和操作同一份数据。避免了重复创建对象所带来的资源浪费以及数据管理上的混乱。
  • 作用:在百度地图的业务中,比如地图撒点、色块绘制等,通常需要维护全局的绘制数据状态,单例模式让这些数据集中管理,便于一致性和同步性。

2. 数据的分类型存储

  • 好处_even 使用 Map 来管理不同类型的数据。通过 type 将数据分类存储,使得不同种类的点数据或色块数据互不干扰,方便进行分类操作。

  • 作用:在地图应用中,可能有很多类型的绘制需求,比如:

    • 地图上的普通点标记(撒点)。
    • 不同区域的色块渲染。
    • 热力图。
    • 自定义绘制图层。 使用 type 分类,可以很方便地根据需求操作某一类数据,而不会影响其他类型的数据。

3. 灵活的数据存取

  • 好处:提供了 set(type, property)get(type, id) 方法,能灵活地添加和获取特定类型及 ID 的数据。

  • 作用:通过这两种方法,可以快速对特定点、区域或者绘制内容进行查找和操作。例如:

    • 在撒点时,按 id 找到特定的点对象。
    • 在绘制色块时,能快速清除或者更新某一区域的数据。
  • 避免了全局数据冗杂而难以定位具体内容的问题。

4. 高效的清理机制

  • 好处clear(type, id) 方法支持按类型、按 ID 或全部清理数据。

  • 作用:在地图使用场景中,用户可能需要:

    • 删除某一个点。
    • 清空某一类数据(例如清空所有的色块)。
    • 或者完全重置绘制内容。 清理机制的灵活性和高效性,能提高地图绘制的性能,尤其是在需要频繁更新和操作数据的情况下。

5. 惰性初始化

  • 好处:通过 getValue(type) 方法的逻辑,如果某个 type 的数据还不存在,就会自动创建一个新的 Map 存储结构。这种方式避免了初始化时一次性创建所有类型的存储空间。
  • 作用:在百度地图中,不同的类型可能在某些场景下并不会被用到。惰性初始化能节约内存和计算资源,提升程序的运行效率。

6. 与百度地图功能的结合

  • 场景一地图撒点

    • PointProperty 可用来存储每个点的属性,比如 ID、坐标、样式等,方便对点的管理和更新。
    • 可以根据 type 区分普通撒点、聚合点、热点标记等不同用途。
  • 场景二绘制色块

    • 每个 type 对应一种渲染类别,比如行政区划色块、业务覆盖区域色块、风险区域等。
    • property 可以保存色块的坐标范围、颜色、透明度等信息,方便根据业务逻辑动态更新。
  • 场景三性能优化

    • 使用 Map 和分类管理,可以高效查询、删除或更新绘制对象,减少对地图渲染的重复计算。

7. 代码简洁性和可扩展性

  • 好处:代码结构简洁,使用 Map 和方法封装,职责清晰,易于理解和维护。

  • 扩展性

    • 如果后续需要增加新的功能(比如自动同步数据、批量操作等),可以很方便地扩展 PointProperty 类。
    • 还能与百度地图的 API(如覆盖物管理、事件绑定等)深度结合,形成一套完整的地图绘制管理工具。

总结

PointProperty 类的设计适用于复杂地图业务场景,主要优势在于:

  1. 数据管理集中化。
  2. 分类存储提高了操作的灵活性和可维护性。
  3. 高效的清理和存取机制适合频繁动态更新的数据操作。
  4. 代码简洁、易扩展,与百度地图功能契合度高。

对于百度地图的场景,这种设计可以显著提升开发效率、代码质量和运行性能。