ff-map

介绍

目前地图相关能力有：

1. 根据所属区域配置不同的地图引擎，对外输出统一API接口，以达到不同引擎相同API能力。
2. 提供丰富的API能力，涵盖：地图初始化加载、定位网格中心点、加载网格轮廓、更新轮廓样式、截取地图、搜索地点、撒点（支持gif）、汇聚、 地图缩放控制、图层管理控制、地图滤镜设置、地图蒙版设置、丰富多样的画图插件“圆、方、多边形、合并、拆分、交集、轮廓边界智能吸附等等”能力； 周边附属能力有：导入行政区划轮廓；提供多种默认或自定义配色方案选择；一键换肤；操作日志；
3. 地图配置中心分4大块配置：
   1. 基础配置：地图初始中心点、层级、缩略图、二维/三维场景模式、轮廓外观（线/立体墙）、最大最小层级配置等
   2. 图层配置：支持叠加WMTS/3DTITLES等主流服务；静态或动态权限认证；
   3. 网格配置：支持缩放自动显示网格轮廓配置；支持缩放自动显示网格名称配置、蒙版颜色；透明度配置、中心点字体、图标等配置；
   4. 层级配置：缩放层级控制配置

软件架构

目前模块依赖组件有：cesium、turf、lodash-es、axios、jquery

安装教程

1. npm install ff-map

使用说明

1. 引入地图样式

import 'cesium/Build/CesiumUnminified/Widgets/widgets.css';

2. 导入地图

import * as FM from "ff-map";

FM.MapFactory.build('', (mapGis: FM.MapGis) => {}, {});

import {MapFactory, MapGis} from "ff-map";

MapFactory.build('', (mapGis: MapGis) => {}, {});

3. 更多接口说明请参考声明文件：./src/map.d.ts

参与贡献

1. Fork 本仓库：https://gitee.com/yangchangqu/ff-map.git
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

代码示例

1. 撒点代码示例

// 撒点（方式1）
mapGis.renderPoints({
  clear: true,
  bizType: 'testPoint',
  points: [{...mapPoint, id: Date.now(), name: 'xxxx',}],
});
// 撒点（方式二）
mapGis.renderPoints({
  clear: false,
  bizType: 'testPoint',
  points: [{...mapPoint, id: Date.now(), name:  '测试名称-' + Date.now(),}],
}, {
  imgUrl: '/vue-assets/p/images/gis/location_point.png',
  cluster: {
    billboard: {
      image: '/vue-assets/p/images/gis/wglocal.png',
      width: 21,
      height: 32,
      horizontalOrigin: 0,
      verticalOrigin: 1,
    },
  },
});
// 添加点位点击监听事件
mapGis.addEventListener(MapEventType.CLICK_POINT, "测试点位点击事件", {
  caller: this,
  listener: (e: any) => {
    console.log(e);
  },
});
mapGis.addEventListener(MapEventType.CLICK_CLUSTER, "测试聚合点击事件", {
  caller: this,
  listener: (e: any) => {
    console.log(e);
    _mapGis.amplify();
  },
});

2. 加载轮廓示例

const loadGridOutline = (locateCenter: boolean, callBack?: (gridOutlines?: GridOutline[]) => void) => {
  if (locateCenter) mapGis.locateCenter(regionCode);
  mapGis.loadGridOutline({
    clear: true,
    query: {
      regionCode: regionCode,
      showType: 0,
    },
  }, undefined, callBack);
};

3. 自定义DIV代码示例

mapGis.addGeometry({
  type: 'div',// 'polygon' | 'rectangle' | 'circle' | 'square' | 'polyline' | 'div'
  div: {
    cfg: {
      contentFormat: (data: any) => {
        return '<div style="background-color: #3399ff;">' + data.name + '</div>';
      },
      click: (data: any) => {
        console.log(data);
      },
    },
    points: [{...mapPoint, name: '测试DIV',}]
  },
});

4. 轨迹播放API示例

// 播放器是单实例，一个页面只能实例化一个播放器
// 播放
const play = () => {
  let data: PlayPoint<MapPoint>[] = [
    {entity: {x: 116.405419, y: 39.918034}, datetime: '2023-12-13 17:05:00'},
    {entity: {x: 120.2821, y: 33.918145}, datetime: '2023-12-13 17:05:30'},
    {entity: {x: 115.497402, y: 39.344641}, datetime: '2023-12-13 17:06:00'},
    {entity: {x: 107.942392, y: 29.559967}, datetime: '2023-12-13 17:06:30'},
    {entity: {x: 106.549265, y: 29.559967}, datetime: '2023-12-13 17:07:00'},

    {entity: {x: 116.22058384464921, y: 26.37085585736221}, datetime: '2023-12-13 17:34:00'},
    {entity: {x: 117.85643488609652, y: 28.140748842953183}, datetime: '2023-12-13 17:34:30'},
    {entity: {x: 119.8593284019048, y: 27.751958758401493}, datetime: '2023-12-13 17:35:00'},
    {entity: {x: 119.2311014202869, y: 24.823838951496487}, datetime: '2023-12-13 17:35:30'},
  ];
  let player = mapGis.player();
  player.initPlayer(data);
  player.play();
}
// 暂停
const pause = () => {
  mapGis.player().pause();
}
// 回放
const replay = () => {
  mapGis.player().replay();
}
// 销毁
const destroy = () => {
  mapGis.player().destroy();
}
// 加速
const acceleration = () => {
  mapGis.player().acceleration();
}
// 减速
const deceleration = () => {
  mapGis.player().deceleration();
}

5. 自带轨迹播放器组件

<!-- 引入组件 -->
<cesium-player ref="mapPlayerRef" :map-gis="mapGis" />

mapPlayerRef.value.openPlayer([
  {entity: {x: 116.405419, y: 39.918034}, datetime: '2023-12-13 17:05:00'},
  {entity: {x: 120.2821, y: 33.918145}, datetime: '2023-12-13 17:05:30'},
  {entity: {x: 115.497402, y: 39.344641}, datetime: '2023-12-13 17:06:00'},
  {entity: {x: 107.942392, y: 29.559967}, datetime: '2023-12-13 17:06:30'},
  {entity: {x: 106.549265, y: 29.559967}, datetime: '2023-12-13 17:07:00'},

  {entity: {x: 116.22058384464921, y: 26.37085585736221}, datetime: '2023-12-13 17:34:00'},
  {entity: {x: 117.85643488609652, y: 28.140748842953183}, datetime: '2023-12-13 17:34:30'},
  {entity: {x: 119.8593284019048, y: 27.751958758401493}, datetime: '2023-12-13 17:35:00'},
  {entity: {x: 119.2311014202869, y: 24.823838951496487}, datetime: '2023-12-13 17:35:30'},
]);