gisviewer-vue

地图容器

安装

npm install gisviewer-vue -S

使用

main.js

import Vue from 'vue';
import App from './App.vue';
import GisViewer from 'gisviewer-vue';
import 'gisviewer-vue/lib/gis-viewer.css';

Vue.config.productionTip = false;
Vue.use(GisViewer);

new Vue({
  render: (h) => h(App)
}).$mount('#app');

App.vue

<template>
  <div id="app">
    <gis-viewer />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
#app {
  height: 100vh;
}
</style>

配置

Props

| name | description | type | defalt | values | | ---------- | ----------- | ------ | -------- | --------------------------------------------------------------------------------------- | | platform | 地图平台 | String | arcgis3D | arcgis2Darcgis3Ddugis(百度内网)mapabc(高德内网)bmap(百度)amap(高德) | | map-config | 地图配置 | object | | 依据 platform 不同有不同的配置内容 |

arcgis 地图配置

| name | description | type | required | default | values | | ---------- | ----------------------- | ------ | -------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | arcgis_api | 本地 arcgis js api 地址 | String | false | arcgis online 上的最新 api 地址 | | theme | 地图主题样式 | String | false | light | lightdarklight-bluedark-bluelight-greendark-greenlight-purpledark-purplelight-reddark-red | | baseLayers | 底图 | Array | true |

Events

| name | description | parameters | | ----------------- | ------------ | ---------- | | map-loaded | 地图创建完成 | | showGisDeviceInfo | 撒点点击事件 |

接口说明

addoverlays 地图撒点接口

| name | description | type | default | | ------------------- | --------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | defaultType | 默认类型 | string | | defaultSymbol | 默认符号 | string | | overlays | 覆盖物属性 | object[] | | id | 覆盖物编号, 用于按编号删除 | string | | type | 覆盖物类型, 用于按类型删除 | string | | symbol | 覆盖物符号 | object | | type | 覆盖物符号类型 2d 或 3d | string | point-2d/point-3d | | url | 覆盖物符号地址 | string | | primitive | 覆盖物的图元类型 | string | 2D 图元："circle"，"square"， "cross"， "x"，"kite" ，"triangle"3D 图元："sphere"，"cylinder"， "cube"，"cone"，"inverted-cone"，"diamond"，"tetrahedron" | | color | 图元颜色 | number/string/number[] | | outline | 图元边框 | object | | size | 图元边框大小 | number | | color | 图元边框颜色 | number/string | | size | 覆盖物大小 | Array<number/string>/ number/string; | | anchor | 覆盖物锚点 | string | "center"，"left"，"right"，"top"，"bottom"，"top-left"，"top-right"，"bottom-left"，"bottom-right" | | rotation | 旋转角度 | number[] | 在 point-3d 时可用，[x 轴角度, y 轴角度, z 轴角度] | | geometry | 覆盖物几何属性 | object | | x | x 坐标 | number | | y | y 坐标 | number | | z | z 坐标 | number | | fields | 覆盖物业务属性 | object | | buttons | 覆盖物弹出框的默认按钮，会覆盖 defaultButtons | object[] | | autoPopup | 是否自动显示弹出框, 只添加一个覆盖物时有效 | boolean | false | | showPopup | 点击后是否显示弹出框 | boolean | false | | defaultInfoTemplate | 配置 infoTemplate 需要显示的内容 | object | | title | 标题 | string | | content | 内容 | string | | defaultButtons | 弹出框的默认按钮 | object[] | | label | 按钮文本 | string | | type | js 函数 mapFeatureClicked 的 type 参数 | string | | showToolTip | 是否显示飞行提示 | boolean | false | | toolTipContent | 飞行提示内容 | string |

deleteOverlays 删除撒点接口

deleteAllOverlays 删除全部撒点接口

addOverlaysCluster 点聚合接口

| name | description | type | default | | ------------- | ---------------------- | -------- | ------- | | type | 图层类型 | string | | defaultSymbol | 点图片样式 | object | | overlays | 聚合点位集合 | object[] | | showPopup | 是否点击显示弹窗 | boolean | | custom | 非聚合点位上方显示文本 | object | | textStyle | 聚合数字样式 | object | | zoom | 在该层级取消聚合 | number |

deleteOverlaysCluster 删除点聚合接口

deleteAllOverlaysCluster 删除全部点聚合接口

addHeatMap 热力图接口

| name | description | type | default | | ------- | -------------- | ------ | ------- | | points | 热力图点位集合 | string | | options | 热力图配置 | object |

deleteHeatMap 删除热力图接口

showLayer 显示图层

| name | description | type | default | | ----- | ----------- | ------ | ------- | | label | 图层名称 | string | | type | 图层类型 | string |

hideLayer 隐藏图层

| name | description | type | default | | ----- | ----------- | ------ | ------- | | label | 图层名称 | string | | type | 图层类型 | string |

findFeature 查找定位

setMapCenter 定位坐标

setMapCenterAndLevel 定位坐标层级

showJurisdiction()显示辖区

hideJurisdiction()隐藏辖区

showDistrictMask() 显示边界蒙层

| name | description | type | default | | -------- | ---------------- | ------- | ------- | | name | 区县名称 | string | | showMask | 是否显示外部蒙层 | boolean |

hideDistrictMask() 显示边界蒙层

setMapStyle()高德设置地图样式

routeSearch()高德路径规划

clearRouteSearch()清除路径规划

showCustomTip()显示自定义弹窗

stopPlaySelectedRoute ()

startDrawOverlays ()手动画区域

| name | description | type | default | | -------- | -------------- | -------- | -------- | | drawType | 绘制类型 | string | | id | 绘制图形id | string | | symbol | 绘制样式 | object | | model | 编辑/新增 | string | add,edit | | callback | 完成绘制后回调 | function |

stopDrawOverlays ()清除区域

getDrawOverlays ()得到手画区域

startGeometrySearch()区域搜索

| name | description | type | default | | ------------ | ---------------- | -------- | -------------------------- | | drawType | 搜索图形类型 | string | point;polygon,需要自己手绘 | | types | 搜索图层类型 | string[] | | radius | 搜素半径 | string | | showResult | 是否显示搜索结果 | object | | showGeometry | 是否显示搜素范围 | string | add,edit | | center | 搜索中心点 | function | | repeat | 是否重复搜素 | function | | clickHandle | 搜索结果回调 | function |

clearGeometrySearch ()清除区域搜索

showMigrateChart()显示迁徙图

hideMigrateChart ()隐藏迁徙图

获取覆盖物点位信息

//方法： 
getOverlays(IQueryParams):IResult
//传参: 
IQueryParams{
  types:Array<string>
}
//返回：
IResult{
  message:string;
  status:number;
  result:{
    overlays:[
      {
        uniData:{
          id?:string,
          name?:string,
          type?:string,
        },
        geometry:{
          x:number,
          y:number
        }
      }
    ]
  }
}

查找要素

//方法
findFeature(params: IFindParameter):IResult
//传参
IFindParameter {
  layerName: string,
  ids: Array<string>,
  level?: number,//地图缩放到level
  centerResult?: boolean,//是否将查询结果显示到地图中心
  showPopUp?: boolean,
  xoffset?: number,
  yoffset?: number,
  layerids?: Array<string>,
  fields?: any,
  animation?: boolean,
  style?: string,
  factor?: number,
  color?: string | Array<number>,
  callback?: boolean,
  repeatCount?: number,
}
//返回
IResult{
  status: number,
  message: string,
}