th-gis

th-gis组件库

帮助文档

• 项目引用

npm i th-gis -S

安装th-gis组件后需要执行后续几个步骤才能正常使用此组件

1.1 拷贝th-gis 组件安装目录中拷贝public/cdn 文件夹至使用者项目public目录中

1.2 使用者项目需要在public/index.html引入cdn文件夹中相应的js及css

具体如下:

      <link rel="stylesheet" href="cdn/gis/egis/assets/css/egis.css">
      <script src="cdn/gis/egis/egis.min-1.5.0.js"></script>
      <script>
        egis.libPath.symbolLib='cdn/gis/egis/assets/symbols/elesymbol-sym.js'
        egis.libPath.symbolData='cdn/gis/egis/assets/symbols/allSymbol.sym'
      </script>
      <script src="cdn/axios/axios-0.21.1.min.js"></script>
      <script src="cdn/gis/egis/assets/js/jquery.min.js"></script>
      <script src="cdn/gis/proj4.js"></script>
      <script src="cdn/gis/proj4leaflet.js"></script>
      <script src="cdn/gis/leaflet.polylineDecorator.js"></script>
      <script src="cdn/gis/Leaflet.Marker.SlideTo.js"></script>
      <script src="cdn/gis/leaflet-omnivore.min.js"></script>

1.3 使用者项目中安装th-gis

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

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

至此th-gis组件安装完成

一、指令说明

# 安装依赖
npm install

# 启动DEMO开发模式
npm run dev

# 打包DEMO
npm run build:demo

# 打包组件
npm run build

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

更新日志

1.0.4

1.0.5

1.1.5

1.1.6

1.1.9

1.2.3

1.2.4

1.2.6

1.2.8

1.2.9

1.2.10

1.2.11

1.2.12

1.2.13

1.2.14

1.3.1

1.3.2

1.3.4

1.3.5

1.3.6

1.3.7

1.3.8

1.4.0

1.4.1

1.4.3

1.4.4

1.4.5

1.4.6

1.4.7

2.0.0

2.0.3

2.1.1

2.1.2

2.1.3

2.1.5

2.1.6

2.1.9

2.1.11

2.1.12

2.2.1

2.2.2

2.2.3

2.2.4

2.2.6

2.2.7

2.2.8

2.2.11

2.2.13

2.2.14

2.2.15

2.2.16

2.2.17

2.2.18

2.2.19

2.2.20

2.2.22

2.3.1

查看实例

      const datas = []
      datas.push({
        iconsrc: '/assets/img/marker.png',
        shape: 'LINESTRING (115.97085569612683 28.60867310408503,115.90164187923075 28.483428862877194,115.61709596402945 28.53506469726563,115.58523559570314 28.66909790877253)'
      })
      const effect = {
        flickering: true,//是否闪烁
        updateRate: 300, //闪烁频率
        opacity: 0.3//闪烁时透明度
      }
      const events_ = {
        click: () => {
          console.log('dianji')
        }
      }
    const rs = ThgisLocation.locationGraphics('th-sansuo', datas, events_, effect)
    this.flickerLayer = rs.layer
    //停止闪烁
    this.flickerLayer.setFlickering(false)
    //开始闪烁 
    this.flickerLayer.setFlickering(true)

2.3.2

2.3.201

//如果定位时要显示简单标记文字时,可设置这些参数显示标记文字
    //这些是默认标记属性
    const labelOptions = {
    color: '#000000',//文字颜色
    outline: { color: 'rgb(255,255,255)', linewidth: 1 },//边框线路设置
    opacity: 0,//透明度
    fill: false,//是否填充
    backgroundColor: 'rgba(255,255,255,0)',//背景颜色
    isChangeByScale: false,//是否更具地图变化而改变大小
    font: '14px sans-serif',//字体样式
    offset: [0, 0]//标记内容偏移量
    }

    //设置 showLabel=1 就会开启显示 datas中label的内容
    //labelOptions是设置标签样式,可不设置此参数,采用默认样式
    const datas = {
    shape:'115.45454,28.212121',
    label:'标记内容'
    }
    ThgisLocation.locationGraphics(
          'layerid',
          datas,
          null
          { showLabel: 1, 
            labelOptions: { color: '#ff0001', offset: [0, -20] }})

2.3.203

2.3.206

2.3.207

2.3.208

2.3.209

2.3.210

2.3.211

2.3.212

2.3.300

2.3.302

2.4.2

2.4.3

2.4.4

2.4.6

2.4.7

/**
 *
 *  判断点是否包含在缓存区内,返回包含在内的坐标
 * @param shape{geoJSON} 图形
 * @param point{Array} 判断包含的点
 * @param buffer{Number} 缓冲区范围 单位米
 * @return {{bufferGeometry: *, points: *}} bufferGeometry:缓冲区图形,points:包含的坐标点
 */
ThgisGeometryUtil.geometryBufferContainsPoints(shape,points,buffer)
//例子如下
const shape = 'LINESTRING (114.437642813235 28.1187262679723, 114.448068424207 28.1187211129174)'
const rs = ThgisGeometryUtil.geometryBufferContainsPoints(shape, [114.45243345256166,28.133568238076496], 100)
//rs: {bufferGeometry: {type: 'Polygon',coordinates:[[]]}, points: [[114.45243345256166,28.133568238076496]]}
//rs返回在缓冲区内的点,如果一个都未匹配上则返回undefined
注意: shape与points坐标系必须一致

2.5.0

2.5.1

2.5.2

2.5.4

2.5.5

2.5.6

2.5.8

const points = [{
            shape: [13012341.136015514, 3372674.9827213986],
            name: '1'
          }, {
            shape: [13012341.136015514, 3372674.9827213986],
            name: '2'
          }]
const containsPlus = ThgisGeometryUtil.geometryBufferContainsPointsPlus([13012341.136015514, 3372674.9827213986], points, 100, 'WebMercator')
返回格式: {
    bufferGeometry: buffGeometry,//缓冲区图形
    points: [{}] //包含点的数据集合
  }

2.5.9

2.6.0

2.6.1

2.6.2

2.6.4

2.6.5

2.6.7

2.7.2

2.7.3

2.7.4

2.7.5

2.7.6

2.7.7

//返回匹配的内容数组
ThgisDatasUtils.findAttribute('参数值', '字段名,可多个字段匹配是用逗号隔开,默认*,匹配所有字段', '图层id')
ThgisDatasUtils.findAttribute('参数值', 'name,id', 'th-layer')

2.7.8

2.7.9

2.8.0

2.8.1

2.8.2

2.8.3