DataCenter-gis/src/utils/map/mapOperation.js

import { myBridge } from './map';
import test2 from './test2.json';
export function invokeParams(ActionName, params) {
  console.log(ActionName, params);
  myBridge.bridgeContent.Invoke({
    ActionName: ActionName,
    Parameters: {
      ...params
    }
  });
}
export function invokeParamsMap(mapId, ActionName, params) {
  console.log(ActionName, params);
  let map = mapId ? 'splitBridgeContent' + mapId : 'bridgeContent';

  myBridge[map].Invoke({
    ActionName: ActionName,
    Parameters: {
      ...params
    }
  });
}
export function addJuHePointSearchFun(mapId) {
  invokeParamsMap(mapId, 'MapClickAll', {
    status: true,
    is_draw: true,
    is_code: false
  });
}
export function addJuHePointSearch() {
  invokeParams('MapClickAll', {
    status: true,
    is_draw: true,
    is_code: false
  });
}

/**
 * 打点
 * @param {*} name 打点方法name，关闭时可做标识用
 * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
 * @param {*} param.url 数据源接口地址
 */
export function addJuHePoint(name, data, params) {
  invokeParams('ShowData', {
    name: name,
    data: {
      content: data,
      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
    },
    legendVisible: false,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      label: params?.label || '',
      visualVariables: [],
      symbol: {
        type: 'simple-marker',
        size: 15,
        color: params?.color || 'rgba(0,128,255,0.4)',
        outline: {
          width: 0.5,
          color: params?.borderColor || '#0080FF'
        }
        // type: 'picture-marker',
        // url: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
        // width: '64px',
        // height: '64px'
      }
    },
    featureReduction: {
      type: 'cluster',
      clusterRadius: '150px',
      popupTemplate: {
        title: 'Cluster summary',
        content: 'This cluster represents {cluster_count} earthquakes.',
        fieldInfos: [
          {
            fieldName: 'cluster_count',
            format: {
              places: 0,
              digitSeparator: true
            }
          }
        ]
      },
      clusterMinSize: '20px',
      clusterMaxSize: '50px',
      labelingInfo: [
        {
          deconflictionStrategy: 'none',
          labelExpressionInfo: {
            expression: "Text($feature.cluster_count, '#,###')"
          },
          symbol: {
            type: 'text',
            color: '#ffffff',
            font: {
              weight: 'bold',
              // family: 'Noto Sans',
              size: '16px'
            }
          },
          labelPlacement: 'center-center'
        }
      ]
    }
  });
}

// 简单打点
export function addPoint(data, name, params) {
  invokeParams('ShowData', {
    name: name,
    data: {
      content: data,
      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
    },
    legendVisible: false,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      label: '测试车辆',
      visualVariables: [],
      symbol: {
        type: 'simple-marker',
        size: 10,
        color: params?.color || 'rgba(0,128,255,0.4)',
        outline: {
          width: 0.5,
          color: params?.barderColor || 'rgba(0,128,255,0.8)'
        }
      }
    }
  });
}

// 简单打点
export function replacePoint(data, name) {
  invokeParams('ShowData', {
    name: name,
    mode: 'replace',
    data: {
      content: data,
      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
    },
    legendVisible: false,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      label: '测试车辆',
      visualVariables: [],
      symbol: {
        type: 'simple-marker',
        size: 10,
        color: 'rgba(0,128,255,0.4)',
        outline: {
          width: 0.5,
          color: '#0080FF'
        }
      }
    }
  });
}

/**
 * 带图标打点
 * @param {*} name 打点方法name，关闭时可做标识用
 * @param {*} param.imageUrl 打点图标，需要使用new URL(``, import.meta.url).href转为链接
 * @param {*} param.url 数据源接口地址
 */
export function addImagePoint(name, data, params) {
  invokeParams('ShowData', {
    name: name,
    data: {
      content: data,
      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
    },
    legendVisible: false,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      label: '测试车辆',
      visualVariables: [],
      symbol: {
        type: 'picture-marker',
        url: params.imageUrl,
        width: '36px',
        height: '36px'
      }
    },
    labels: [
      {
        fields: ['#.size'],
        color: [255, 255, 255, 1],
        size: 15,
        labelPlacement: 'center-center'
      }
    ]
  });
}

//点线面隐藏
export function closePoint(name) {
  invokeParams('ShowData', {
    name: name,
    mode: 'visible',
    visible: false
  });
}

//轨迹
export function addTrajectory(data, id) {
  invokeParams('ShowData', {
    name: 'car_layer' + id,
    type: 'track',
    isLocate: true,
    data: {
      isComputingRote: false,
      content: data,
      parsegeometry: 'function(item){return {x:Number(item.x),y:Number(item.y)}}'
    },
    legendVisible: true,
    popupEnabled: true,
    renderer: {
      type: 'unique-value',
      uniqueValueInfos: [
        {
          value: 'line',
          symbol: {
            type: 'line-3d',
            symbolLayers: [
              {
                type: 'line',
                size: 2,
                material: {
                  color: 'black'
                },
                cap: 'round',
                join: 'round'
              }
            ]
          }
        },
        {
          value: 'start',
          symbol: {
            type: 'simple-marker',
            size: 20,
            color: 'red',
            outline: {
              width: 0.5,
              color: 'white'
            }
          }
        },
        {
          value: 'end',
          symbol: {
            type: 'simple-marker',
            size: 20,
            color: 'orange',
            outline: {
              width: 0.5,
              color: 'white'
            }
          }
        }
      ]
    }
  });
}

//轨迹播放
export function playTrajectory(id) {
  invokeParams('ShowData', {
    name: 'car_layer' + id,
    mode: 'player',
    action: 'play',
    speed: 60,
    showline: true,
    renderer: {
      type: 'unique-value',
      uniqueValueInfos: [
        {
          value: 'line',
          symbol: {
            type: 'line-3d',
            symbolLayers: [
              {
                type: 'line',
                size: 2,
                material: {
                  color: 'green'
                },
                cap: 'round',
                join: 'round'
              }
            ]
          }
        },
        {
          value: 'flowlabel',
          symbol: {
            type: 'text',
            color: 'black',
            text: '{{date}}\r\n\r\n',
            font: {
              size: 10,
              weight: 'bold'
            }
          }
        },
        {
          value: 'marker',
          symbol: {
            type: 'simple-marker',
            size: 10,
            color: 'red',
            outline: {
              width: 0.5,
              color: 'white'
            }
          }
        }
      ]
    }
  });
}

export function stopTrajectory(id) {
  invokeParams('ShowData', {
    name: id,
    mode: 'player',
    action: 'stop'
  });
}

//标绘制线
export function startBidding(visible = true) {
  invokeParams('userSketch', {
    type: 'point', //'point',
    visible: visible,
    isTools: true,
    isLocate: true,
    position: 'top-right',
    activeSymbol: {
      type: 'simple-marker',
      size: 5,
      color: 'red',
      outline: {
        width: 0.5,
        color: 'white'
      }
    }
  });
}

//画线
export function addPolyLine(data, name) {
  invokeParams('ShowData', {
    name: name || 'layer1',
    type: 'polyline',
    data: {
      content: data,
      parsegeometry: "function(item){return [Number(item['x']), Number(item['y'])]}"
    },
    legendVisible: false,
    popupEnabled: false,
    renderer: {
      type: 'simple',
      label: '测试',
      visualVariables: [],
      symbol: {
        type: 'line-3d',
        symbolLayers: [
          {
            type: 'line',
            size: 2,
            material: {
              color: 'red'
            },
            cap: 'round',
            join: 'round'
          }
        ]
      }
    }
  });
}

export function juHe() {
  invokeParams('ShowData', {
    name: 'car_layer',
    // type: 'cluster',
    isLocate: true,
    data: {
      url: new URL(`@/utils/map/test2.json`, import.meta.url).href,
      parsegeometry: 'function(item){return {x:Number(item.X),y:Number(item.Y)}}'
    },
    popupEnabled: false,
    legendVisible: false,
    featureReduction: {
      type: 'cluster',
      clusterRadius: '200px',
      // maxClusterRadius: 200,
      labelingInfo: [
        {
          symbol: {
            type: 'text',
            color: '#004a5d',
            font: {
              size: '12px'
            }
          },
          labelPlacement: 'center-center'
        }
      ],
      labelsVisible: true,
      popupEnabled: false,
      minScale: 0,
      maxScale: 0
    },
    renderer: {
      type: 'unique-value',
      field: 'STATUSNAME',
      uniqueValueInfos: [
        {
          value: '已结案',
          label: '已结案',
          symbol: {
            type: 'simple-marker',
            size: 20,
            color: 'green',
            outline: {
              width: 0.5,
              color: 'white'
            }
          }
        }
      ]
    }
    // labels: [
    //   {
    //     fields: ['#.STATUSNAME'],
    //     color: [255, 255, 255, 1],
    //     size: 10,
    //     labelPlacement: 'center-center'
    //   }
    // ]
  });
}

//添加arcGisMap图层
export function addArcgisMap() {
  invokeParams('AddArcgisMap', {
    name: '疾控图层',
    url: 'https://zgscim.china-gis.com/server/rest/services/basemap/basemap_white/MapServer',
    type: 'wmts'
  });
}

//开始输出点坐标点
export function startOutputPoint() {
  invokeParams('outputClickPosition', {
    type: 'position',
    mode: 'start',
    popupEnabled: false,
    symbol: {
      type: 'simple-marker',
      size: 6,
      color: 'black',
      outline: {
        width: 0.5,
        color: 'white'
      }
    }
  });
}

//关闭输出点坐标
export function closeOutputPoint() {
  invokeParams('outputClickPosition', {
    type: 'position',
    mode: 'stop'
  });
}

//定位
export function gotoPosition(point, color) {
  invokeParams('goToPosition', {
    positon: point,
    heading: 0,
    tilt: 45,
    hasImg: true,
    marker: {
      size: 16,
      color: color || '#000fff'
    },
    zoom: 18,
    isRotation360: false
  });
}

//区边界
export function regionZone() {
  invokeParams('goToPosition', {
    name: 'car_layer',
    type: 'layer',
    isLocate: true,
    isHighlight: true,
    highLight: {
      color: 'blue'
    },
    camera: {
      tilt: 0,
      heading: 0
    },
    data: {
      layers: {
        name: '区县边界'
      }
    },
    labels: [
      {
        fields: ['#.名称', '#.序号'],
        color: [255, 255, 0, 0.5],
        size: 12
      }
    ],
    renderer: {
      type: 'simple',
      symbol: {
        type: 'line-3d',
        symbolLayers: [
          {
            type: 'line',
            size: 5,
            material: {
              color: 'red'
            }
          }
        ]
      }
    }
  });
}