th-vue-gis v1.1.1

GIS组件库

文档

• 项目引用

npm i th-vue-gis -S

安装th-vue-gis组件后需要执行后续几个步骤才能正常使用此组件 ##1.1 拷贝th-vue-gis 组件安装目录中拷贝public/thgis文件夹至使用者项目public目录中 ##1.2 使用者项目需要在public/index.html引入thgis文件夹中相应的js及css 具体如下:

    <link rel="stylesheet" href="./thgis/libs/egis/assets/css/egis.css">
    <script src="./thgis/libs/egis/assets/plugins/elesymbol2.0.0/elesymbol.js"></script>
    <script src="./thgis/libs/egis/egis.min-1.0.1.8.1.js"></script>
    <script src="./thgis/libs/proj4.js"></script>
    <script src="./thgis/libs/proj4leaflet.js"></script>
    <script src="./thgis/libs/leaflet.polylineDecorator.js.js"></script>
    <script src="./thgis/libs/leaflet.rotatedMarker.js.js"></script>
    <script src="./thgis/libs/Leaflet.Marker.SlideTo.js.js"></script>

##1.3 使用者项目中安装th-vue-gis 在使用者src/main.js中安装th-vue-gis,并引入th-vue-gis样式,如下

      import 'th-vue-gis/lib/th-vue-gis.css'
      import ThVueGis from 'th-vue-gis'
      Vue.use(ThVueGis)

至此th-vue-gis组件安装完成

一、指令说明

# 安装依赖
npm install

# 启动DEMO开发模式
npm run dev

# 打包DEMO
npm run build:demo

# 打包组件
npm run build

# 发布（npm adduser && npm login）
npm run deploy

二、组件说明

##组件列表

• th-map 底图
• ThgisEnum.js 枚举类,存储组件相关常量
• ThgisLocation.js 通过已有地理坐标位置定位组件
• ThgisLocationFromOid.js 根据GIS2.0的设备oid定位组件
• ThgisHeatLayer.js 根据相应的地理坐标进行热力图展示组件
• ThgisCoordinateTransform.js 坐标系转换工具类
• ThgisGeometryUtil.js 坐标与几何形状之间转换工具类
• ThgisPopup.js 地图上弹出窗口功能组件

##添加GIS2.0底图

<th-map
      maptype="egis" 
      gridurl="http://10.234.239.102:19001/baidumaps/roadmap/{z}/{x}/{-y}.png"
      :center="[13029527.499595884, 3278901.2881922796]"
      egispowerurl:'http://20.60.32.203:21030' 
      egisjsurl:'http://20.60.32.219/api/epgis-js-1.2.4.min.js' 
      egiscssurl:'http://20.60.32.219/api/epgis-1.2.4.css' 
      egiskey:'4b9985a37eef391f9ff32c696819f605' 
      egissn:'ee7b92c92455300896b732377a662077' 
      egisstyle:'aegis://sprites/aegis/Streets' 
      egisapiurl:'http://20.60.32.203:21100' 
      >
</th-map>

###参数介绍

• maptype : 加载gis底图类型, 百度:baidu;GIS2.0:egis
• gridurl : 如果使用百度底图才需要使用此配置百度离线服务地址
• center : 默认打开底图居中地理坐标数组
• egispowerurl : egis电网图地址(由各服务网省GIS2.0提供) 默认:江西已配置
• egisjsurl : jsurl(由各服务网省GIS2.0提供) 默认:江西已配置
• egiscssurl : cssurl(由各服务网省GIS2.0提供) 默认:江西已配置
• egiskey : key(由各服务网省GIS2.0提供) 默认:江西已配置
• egissn : sn(由各服务网省GIS2.0提供) 默认:江西已配置
• egisstyle : egis样式(由各服务网省GIS2.0提供) 默认:江西已配置
• egisapiurl : egisapi服务地址(由各服务网省GIS2.0提供) 默认:江西已配置

##ThgisLocationFromOid定位组件使用

  import { ThgisLocationFromOid, ThgisEnum } from 'th-vue-gis'
  
  let inputObjs = [{
            'oid': '12994',
            'systypeid': '100000'
          }, {
            'oid': '13010',
            'systypeid': '100000'
          }]
  ThgisLocationFromOid.locationFromOid(
        'layername', //图层名,用于后期清除,查找
         inputObjs,
         {
          click: (attribute,coor) => {
            //添加自己的事件
          }
        }, 
        { 
        location_type: ThgisEnum.LOCATION_TYPE_CLUSTERMARKER
         })

###参数介绍

locationFromOid(markername,options,mouseEvents,effect,location_type)