Demo

http://demo-gis-picc-jssdk.hanso.tech/

SDK

引用

import { useMapFun } from '@supjt/suw-wsir-picc-jssdk'

初始化

const map = /* Mapbox 实例*/

const { setMap } = useMapFun();


setMap({map, backend, draw});

/**
 * 初始化
 * @param {object} option - 选项
 * @param {mapboxgl.Map} option.map - 地图实例
 * @param {string} option.backend - 瓦片服务端地址
 * @param {MapboxDraw} option.draw - MapboxDraw绘图实例
 */
setMap({map : mapboxgl.Map, backend:string, draw: MapboxDraw}){}

加载矢量数据

const { addVectorLayer } = useMapFun()

  /**
   * 添加地块图层
   * @param {'underwrite' | 'compensate'} type - 加载类型，承保或者理赔
   * @param {string} path - 矢量地块路径
   * @param {object} style - 地块样式
   * @param {{paint: mapboxgl.FillPaint, layout: mapboxgl.FillLayout}} style.fill - 地块填充样式
   * @param {{paint: mapboxgl.LinePaint, layout: mapboxgl.LineLayout}} style.line - 地块轮廓样式
   * @param {(fs: GeoJSON.Feature) => void} callback - 地块点击的回调事件
   * @return {{ fill: string;  line:string}} ids - 填充和轮廓图层id
   * @example
   * addVectorLayer(
   * 'underwrite',
   * 'vector/insure:2022:5101',
   * {fill: { paint: { 'fill-color': '#c00', 'fill-opacity': .5 } },},
   * (feature: {properties}) => {console.log(properties)})
   */
  function addVectorLayer(
    type: "underwrite" | "compensate",
    path: string,
    style: VectorStyle | null = {},
    callback: (fs: GeoJSON.Feature) => void
  ): { fill: string; line: string } {}

卸载矢量数据

const { removeVectorLayer } = useMapFun()

  /**
   * 移除地块图层
   * @param {'underwrite' | 'compensate'} type - 加载类型，承保或者理赔
   * @param {string} path - 矢量路径
   */
  function removeVectorLayer(type: "underwrite" | "compensate", path: string) {}

过滤矢量数据

const { setVectorFilter } = useMapFun()

  /**
   * 对矢量地块进行过滤
   * @param {'underwrite' | 'compensate'} type - 加载类型，承保或者理赔
   * @param {string} path - 矢量路径
   * @param {{ [prop: string]: Array<string | number> | string | number } } filter - 过滤条件对象，key为需要过滤的属性字符串，value为满足过滤属性的枚举值，或者单个字符串/数值类型，字符串以%结尾可进行头部匹配，可组合过滤
   * @example
   * setVectorFilter('underwrite', {QX: ['绵阳市', '江油市']})
   * setVectorFilter('underwrite', {szqk: '开%'})
   */
  function setVectorFilter(
    type: "underwrite" | "compensate",
    path: string,
    filter: { [prop: string]: Array<string | number> | string | number }
  ) {}

绘制/框选

const { drawPolygon } = useMapFun()

  /**
   * 框选/绘制多边形，注意，请在使用此函数未取消时，禁用与此无关的绘图操作，避免冲突。
   * @param {string} path - 理赔的矢量路径
   * @param {(geometry: GeoJSON.Geometry, list: { [prop: string]: any }[]) => void} callback - 绘制好之后得回调，返回绘制的几何、与理赔相交的土块要素，面积字段存在properties里面，字段key为'_area'，注意：返回要素会有重复元素，需要自行根据唯一值合并并累加面积值
   */
  function drawPolygon(
    path: string,
    callback: (
      geometry: GeoJSON.Geometry,
      list: { [prop: string]: any }[]
    ) => void
  ) {}

取消/重置/移除框选

const { cancelDraw } = useMapFun()

  /**
   * 取消/重置/移除绘图
   */
  function cancelDraw() {}

添加栅格图层

const { addRasterLayer } = useMapFun()

  /**
   *
   * @param {'underwrite' | 'compensate'} type - 加载类型，承保或者理赔
   * @param { 'image' | 'aerial'} layer - 图层类型，高精度影像，或者航拍图
   * @param { string } area - 表示加载某个市区的卫星图
   * @return { string } id - 图层id
   * @example
   * addRasterLayer('underwrite', 'image', 'raster/sat2022:z5101')
   */
  function addRasterLayer(
    type: "underwrite" | "compensate",
    layer: "image" | "aerial",
    area: string
  ): string {}

移除栅格图层

const { removeRasterLayer } = useMapFun()

  /**
   *
   * @param type  {'underwrite' | 'compensate'} type - 加载类型，承保或者理赔
   * @param { 'image' | 'aerial'} layer - 图层类型，全球谷歌底图，高精度影像，或者航拍图
   * @param { string } area - 表示加载某个市区的卫星图
   */
  function removeRasterLayer(
    type: "underwrite" | "compensate",
    layer: "image" | "aerial",
    area: string
  ) {}

外部函数-手动设置地块样式

利用地图实例，根据mapboxgl官方文档，通过加载地块函数返回的id，自行设置样式即可

  map.setPaintProperty(vectorCompensateFillId, 'fill-color', '#00c')
  map.setPaintProperty(vectorCompensateLineId, 'line-color', '#cc0')

外部函数-回显框选图层

利用地图实例，根据mapboxgl官方文档，通过绘制函数返回的几何，自行加载图层即可

  map.addLayer({
    id: 'renderPolygon',
    type: 'fill',
    paint: {
      "fill-color": '#c6c',
      'fill-opacity': .7
    },
    source: {
      type: 'geojson',
      data: currentDrawFeature
    }
  })