Gisviewer-vue-ftest NPM

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
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,
}