spacetime-mapservice

介绍

时空大数据平台地图服务客户端，可通过地图服务 id 和令牌直接访问地图服务，并可以通过句柄调用相关接口。

提供两个组件，一个是单图层预览组件 LayerView，没有权限限制，根据配置生成单个图层数据源的预览效果， 另一个是地图服务组件 MapService，有权限限制，通过时空大数据平台中的地图编辑器编辑地图数据，同时生成一个平台令牌 token。

软件架构

vue mapboxgl axios turf

约定

奇数版本为开发调试版本，会允许存在一定量的 bug，且会存在频繁的删除或更新，不建议在最终项目中部署，如 0.0.3 偶数版本为经过开发验证且已经在实际项目中部署的稳定版本，如 0.0.2

安装教程

// 如有同版本旧库可以先卸载
npm uninstall spacetime-mapservice
// 需要指定仓库
npm --registry http://10.0.0.60:4873 install [email protected]
// 版本升级
npm update [email protected]

图层预览组件使用说明

// type支持point、line、polygon
<layer-view
    width="800px"
    height="600px"
    server-path="http://10.0.0.60:9090/geoserver"
    workspace="GaoXinYW"
    layer-name="poi"
    type="point"
    :bounds=[108.822860717773,34.1635856628418,108.914772033691,34.2441596984863]
></layer-view>

import { LayerView } from 'spacetime-mapservice'

export default {
  name: 'Your Component Name',
  components:{
    LayerView
  }
}

地图选点组件使用说明

<point-selecter
    width="800px"
    height="600px"
    @onSelect="getPosition"
    enableSelecter=true
    service-url="https://www.sxbych.com/st-cloud"
    access-token="">
</point-selecter>
import { PointSelecter } from 'spacetime-mapservice'

export default {
  name: 'Your Component Name',
  components:{
    PointSelecter
  },
  methods:{
    getPosition(position){
      console.log(position[0], position[1])
    }
  }
}
// 释义
// 必填参数: serviceUrl(服务地址) accessToken
// 选填参数: width(地图宽度) height(地图高度)
//          ele(自定义的marker,可以自定义样式,dom元素) color(当未指定ele时,marker的颜色,默认浅蓝色'#3FB1CE')
//          enableSelecter(是否能进行选点,即点击设置marker,Boolean类型,默认为true)
// onSelect: 点击地图或者移动marker的回调,返回点击(移动)的坐标
// 设置marker 方法调用: 父组件调用 this.refs.xxx.setMarker(lngLat)
//styleCall 样式加载回调 内部可以使用this.$nextTick() 保证地图加载完成

地图服务组件使用说明

// onMapLoaded 地图初始化完成回调方法，返回地图服务句柄
// service-url 地图服务地址或配置文件json，使用配置文件时可不提供token
// access-token 时空大数据平台提供的地图服务令牌
<map-service
    width="800px"
    height="600px"
    @onMapLoaded="getMap"
    service-url="https://www.sxbych.com/st-cloud"
    access-token="">
</map-service>
import { MapService } from 'spacetime-mapservice'

export default {
  name: 'Your Component Name',
  components:{
    MapService
  },
  methods:{
    getMap(service){
      console.log(service)
      // 通过调用service.XXXX开发高级业务功能
    }
  }
}

双屏对比组件使用说明

  <map-comparison
    width="100%"
    height="800px"
    serverUrl='https://www.sxbych.com/st-cloud'
    :accessToken='token'
    @onMapLoaded='getMap'
    @onMapAppend='onMapAppend'
    :mapData='{mode:1,layerIds_before:[],layerIds_after:[]}'
  >
  </map-comparison>

  import { MapComparison } from 'spacetime-mapservice'

接口说明

概念：
    geojson要素，标准geojson中的Feature
    mapbox要素，从图层数据源中读取的要素或交互读取的要素，区别于geojson要素

// 根据条件查询要素，OGC规范WFS接口，该查询方法将访问服务器，layer为工作空间:图层数据源形式，
// 返回标准geojson数据，条件遵循CQL语法
// layer在Geoserver中的图层名称含工作空间；condition
// 参考https://docs.geoserver.org/latest/en/user/filter/ecql_reference.html
// startIndex从第几个要素开始，maxFeatures返回多少要素，这两个参数用来分页，返回geojson里的totalFeatures为匹配的总数
// sortby按字段排序，默认升序，字段后加空格A升序, D为降序
// featureID为指定要素的id，propertyName指定只返回的属性值
// 注意condition中的逗号要用斜杠转义
service.query({layer:"GaoXinYW:ys_line",
               condition:"road_name='太白南路' AND material='砼' AND (del_flag is NULL OR del_flag <> '1')",
               startIndex:0,
               maxFeatures:10,
               featureID: 5248,
               propertyName: 'd_type,caliber,build_year'
               sortby:"build_year D"})
.then((data)=>{
    console.log(data)
})

// 根据条件查询要素，该查询为本机查询，layer为图层id，返回mapbox要素，条件遵循Mapbox表达式语法
// 参考https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
// 注意：离当前视角太远有可能找不到，该方法内部实现使用querySourceFeatures，
// 视口之外的数据无法查询到，该方法仅在交互当前要素时使用
let data = service.queryLocalData("ys_line",["==","pshmc","比亚迪汽车有限公司-2"])
let data1 = service.queryLocalData("ws_line",["==","pshmc","比亚迪汽车有限公司-2"])
service.highlightLayerFeatures(data.concat(data1),"#BF93E4")

// 定位并高亮查询到的geojson要素或geojson要素集
service.query({layer:"GaoXinYW:xzdl",condition:"dlmc='丈八北路'"})
.then((data)=>{
    // 不传颜色值时，只定位，底层调用flyBounds，高亮时只支持标准geojson格式
    service.flyToFeatures(data, "#BF93E4")
})

// 高亮geojson要素集或geojson要素
service.query({layer:"GaoXinYW:xzdl",condition:"dlmc='丈八北路'"})
.then((data)=>{
    service.highlightGeoJSONFeature(data, "#BF93E4")
})

// 定位到具体点坐标
service.flyTo({
    center:[108.89692, 34.23067],
    bearing:0,
    pitch:0
})

// 定位到geojson要素集或mapbox要素集
service.flyBounds(features)

// 定位到某图层的某要素，参数为layerId,featureId，底层调用flyBounds
// 注意：离当前视角太远有可能找不到，该方法内部实现使用querySourceFeatures，
// 视口之外的数据无法查询到，可能将在某个版本修改内部实现或删除
service.flytoFeature("ys_line", 1837)

// 点击图层（在地图服务编辑器中配置可交互图层及返回属性）后返回属性的回调方法
service.inspectCall((result) =>{
    console.log(result)
})

// 当地图加载或切换某个样式时触发回调，回调结果是当前地图样式
// 目前因为内置了手动增加天空图层（待编辑器增加天空的功能），所以切换时会触发两次
service.switchCall((style)=>{
    console.log(style)
})

// 搜索框搜索后结果回调，返回结果为卡农格式的geojson
service.searchCall((result) => {
    console.log(result)
})

// 取消高亮，只能清除内部高亮图层
service.cancelHighlight()

// 根据geojson高亮本地图层，需指定本地图层id，原理是根据geojson获取featureid，在本地图层中加id过滤器
// 该方法暂时未实现完全，仅实现了符号图标图层的高亮
service.query({ layer: 'JingKai:gxpoint', condition: "expno='YSE051015211'" })
  .then((data) => {
    service.flyToFeatures(data);
    service.highlightFeatureByGeoJSON(data, '雨水井')
  })

// 绘制一根线，返回要素数据，进行下一步操作，目前常用于横断面分析、扯旗等功能
0.0.8（包含）之前版本
service.drawLine("wkt").then((wkt) => {
  console.log("queryDataByDistance -> wkt", wkt)
});
service.drawLine("geojson").then((geojson) => {
  console.log("queryDataByDistance -> geojson", geojson)
});
0.0.9（包含）之后版本，增加了autoClear参数，默认清除，如果想保留之前的绘制设置false，wkt形式增加了featureId方便自由删除
service.drawLine("wkt", false).then((wkt) => {
  console.log("queryDataByDistance -> wkt", wkt.featureId, wkt.wkt)
});
service.drawLine("geojson", false).then((geojson) => {
  console.log("queryDataByDistance -> geojson", geojson)
});

// 绘制区域查询数据，版本变化同drawLine一致
service.drawArea('wkt').then((wkt)=>{
  service.query({layer:"GaoXinYW:ys_line", condition:`INTERSECTS(geom,${wkt.wkt})`})
    .then((data)=>{
      console.log(JSON.stringify(data))
    })
})

// 清除测量
service.clearMeasure()

// 清除绘制
service.clearDraw()

// 添加markers
this.service.setMarker([{
  lngLat:[108.9319642280256, 34.2449680831439],
  popup:{
    html:"<h1>我是一个弹窗</h1>",
    closeOnClick: true,
    closeButton:false,
    offset:25
  }
}],(markers)=>{
  console.log(markers)
})

更新日志

-----------------------0.0.2-------------------------

|-2021-01-28
--------------------------------
1、回调方法统一增加Call后缀区分普通接口
2、Search组件增加定位高亮后是否触发鼠标模拟点击事件开关
3、Inspect组件增加高亮颜色配置
--------------------------------
|-2021-01-29
--------------------------------
1、Inspect组件返回结果增加type类型
2、Inspect组件重写图层高亮算法，原先是高亮渲染要素，现在是拷贝高亮图层通过过滤器高亮
--------------------------------
|-2021-01-30
--------------------------------
1、Inspect组件增加点击误差参数
2、service.flyToFeatures方法增加高亮颜色参数
3、增加service.highlightLayerFeatures接口
--------------------------------
|-2021-02-01
--------------------------------
1、service.highlightLayerFeatures可以接收多图层要素
--------------------------------
|-2021-02-02
--------------------------------
1、暴露flyBounds(features)接口，定位要素集，可以接收geojson要素集或mapbox要素集
2、修改flyToFeatures(features, color)接口，当不传颜色值时，只定位要素集
3、增加flytoFeature(layerId, featureId)接口，根据图层id，要素id定位
--------------------------------
|-2021-02-03
--------------------------------
1、删除高亮方法中的取消高亮逻辑，（但仍然使用过滤器高亮逻辑），现在由外部逻辑主动调用处理
2、注释queryLocalData(layerId, filter)、flytoFeature(layerId, featureId)接口，
该接口有局限性，待后续升级该接口
3、修改flyBounds(features)接口，解决无法定位要素的bug
4、恢复searchCall回调接口，现在可以监听搜索结果回调事件了
--------------------------------
|-2021-02-08
--------------------------------
1、添加preSearchCallback接口,在搜索之前调用
2、highlightGeoJSONFeature()接口高亮id,后缀添加时间戳
3、取消高亮,对应卸载highlightGeoJSONFeature()的高亮层
4、仓库地址更换为60
5、监听数据源变化事件，将手动添加天空盒图层挪到该监听事件中，解决切换样式没有天空盒的问题
--------------------------------
|-2021-02-18
--------------------------------
1、添加switchCall回调接口,详见接口说明
--------------------------------
|-2021-02-23
--------------------------------
1、修改LayerView组件，将图层load事件改为地图load事件后定位到图层
2、集成cesium
--------------------------------
|-2021-02-24
--------------------------------
1、发布时提示“request entity too large”，修改私服最大请求body为1000M
--------------------------------
|-2021-02-25
--------------------------------
1、mapservice组件新加属性maxBounds,默认为null,当需要限制地图范围时添加.[[左下],[右上]]
--------------------------------
|-2021-02-26
--------------------------------
1、修复highlightGeoJSONFeature()高亮层,用set存储
2、修复取消高亮层,遍历清空set
--------------------------------
|-2021-02-27
--------------------------------
1、添加点击切换切换图层样式的
2、取消高亮中,添加还原切换层的样式
3、影像高亮层及点击层添加
4、切换地图style时加锁
5、修复取消高亮不会清空切换层的漏洞
--------------------------------
|-2021-03-04
--------------------------------
1、根据layer.id ,高亮根据json配置走
--------------------------------
|-2021-03-10
--------------------------------
1、之前的点击样式锁初始化写死了,现在根据配置走
--------------------------------
|-2021-04-27
--------------------------------
1、删除geoControl组件获取方法,新增getGeoLocate(),直接获取位置信息position
--------------------------------
|-2021-05-14
--------------------------------
1、拆分flyBounds(),独立getBoundsByGeo()方法
--------------------------------

-----------------------0.0.3-------------------------

|-2021-03-13
--------------------------------
1、修复点击建筑高亮时图层写死的问题
2、引入cesium，现在支持3d样式图层包含影像、地形、倾斜模型
3、内部改动较大，定义0.3版本，请谨慎升级
--------------------------------
|-2021-03-18
--------------------------------
1、cesium由1.78降级为1.66，为支持单体化模型平台
--------------------------------
|-2021-03-20
--------------------------------
1、添加3dtile单体点击事件，并返回属性
--------------------------------
|-2021-04-02
--------------------------------
1、发现npm高版本不兼容无法下载,请使用低版本npm,目前测试6.14.8可下载
--------------------------------
|-2021-04-10
--------------------------------
1、修复未知原因导致组件加载后报错无法正常加载地图的问题
Cannot assign to read only property 'undefined' of object '#<Window>'
2、Inspect组件的"properties"属性数据结构改变成数组，升级时需修改数据，这样做属性将会按顺序排列
如
    "图层id": [
        {
            "en": "英文属性",
            "cn": "中文属性"
        },...
3、现在测量组件"Measure"可以正常使用了，但是存有一些bug
--------------------------------
|-2021-04-13
--------------------------------
0.0.2版本新增:
1、增加定位组件获取getGeoControl()
--------------------------------
|-2021-04-21
--------------------------------
1、可能因draw版本问题，手机端无法正确触发touch事件，绘制组件在移动端暂不可用，后续解决
2、优化单击要素逻辑，现在使用改变要素状态属性来区别是否选中，而不需要添加高亮图层了，可能会提高渲染性能，如时可能会解决
单击要素卡顿、闪烁等问题，建议新增一个约定，本地要素样式变化使用要素状态改变，如果是服务器请求获取的要素可以创建新表现图层
3、引入Threebox代替three,具体功能开发待研究
4、应他方要求默认屏蔽经纬度坐标显示，无意义
5、修改版权声明信息
--------------------------------
|-2021-04-23
--------------------------------
1、修复测量和绘制线面导致的一系列逻辑bug，现在绘制前均会清除之前的绘制元素
--------------------------------
|-2021-05-15
--------------------------------
1、修改mapbox到cesium的切换方式
--------------------------------
|-2021-05-17
--------------------------------
1、Inspect组件增加了字段解析功能，如配置[{"fixed":2},{"unit":"平方米"}]可以直接格式化字段，配置[{"case":[1,"A",2,"B","C"]}]可以对字段进行判断显示
--------------------------------
|-2021-05-19
--------------------------------
1、目前打包时指定cesium的地形库路径为根路径，因不确定外部环境暂时定义了一级路径，所以如果想Cesium组件的地形展示功能，务必使地图组件使用一级path，或在项目首页全局指定CESIUM_BASE_URL（未测试）
2、Inspect组件字段解析增加了加(add)减(minus)乘(multiply)除(divide)，如乘以100{"multiply": 100},同时支持按规则先后顺序组合返回值
--------------------------------
|-2021-05-21
--------------------------------
1、query方法增加startIndex参数，用于分页使用
2、修改switchCall逻辑，使单样式地图也触发该事件，同时多样式每次切换都触发
--------------------------------
|-2021-06-11
--------------------------------
1、将mapbox更新到2.3，增加了雾效功能和获取高程功能
2、增加了showLonlat get/set，这样可以通过接口控制显示坐标和高程
3、增加了时间轴插件，可以按时间轴过滤对应图层
--------------------------------
|-2021-07-19
--------------------------------
1、增加符号切换功能，在地图配置中设定"highlightIcon":{"WS一般管线点":"HL一般管线点"},即可实现点击切换符号
2、增加圆圈类circle图层的交互实现
--------------------------------
|-2021-07-22
--------------------------------
1、修复不定义switchstyle回调会造成每次雪碧图资源调用都触发取消高亮，导致带图标的符号层无法被点击高亮
--------------------------------
|-2021-08-10
--------------------------------
1、修复使用geojson数据源无法使用feature.id过滤选中图标导致的错误，当使用geojson数据源时使用feature.properties.id过滤图标
--------------------------------
|-2021-08-19
--------------------------------
1、修复了每个样式只初始化了一次交互事件，导致切换一次来回后再次未初始化事件点击不高亮的问题
--------------------------------
|-2021-09-14
--------------------------------
1、点击事件缓冲区设置了6个像素的默认值（原先是0），同时会根据设备的像素比乘以6，即适配移动端
2、点击获取属性增加日期格式化，现在可以通过配置"parser":[{"date":"yyyy年M月d日"}]格式化时间字段
3、增加了addTripLayer、removeTripLayer、removeAllTripLayer接口，待公开调用示例
--------------------------------
|-2021-11-8
--------------------------------
1、选点组件增加设置marker,即传递坐标,显示marker
2、选点组件增加参数enableSelecter,即是否开启选点功能,true为默认
--------------------------------
|-2021-11-23
1、增加双屏对比组件
2、增加导出png\pdf组件，类似于截图功能
3、将绘制组件内置，方便后续扩展或修改，并汉化显示提示文字
4、发布0.06版本
--------------------------------
|-2021-12-11
1、增加marker添加功能 支持多个marker 返回此次生成的marker,可附带弹窗
--------------------------------
|-2021-12-15
1、增加中国地图测试入口，测试整体表达性能
2、所有公开组件销毁时调用map的清理方法，释放内存，防止多次调用导致内存堆积
--------------------------------
|-2022-2-17
1、樊工买了个二合一平板，需要同时兼容要素click和touch事件，增加touch监听，使二合一触屏设备上可以触摸触发事件，不完善暂未启用生效
--------------------------------
|-2022-02-25
1、增加logo
2、调整比例尺样式
--------------------------------
|-2022-02-25
1、选点器增加定位信息的发送@getGeoLocate=""
--------------------------------
|-2022-05-05
1、增加内置的sdf综合管线符号资源加载，后续优化加载策略
2、使用sdf后可以通过设置符号颜色，与之前的图标点击置换逻辑增加分支判断
--------------------------------
|-2022-05-07
1、修正了右下角logo指向错误官网的bug
--------------------------------
|-2022-05-10 niuxiaojing
1、彻底移除右下角logo的指向，因为平板或移动端官网未做适配，跳转后无法返回应用
2、修复sdf符号无法通过geojson触发高亮的bug
--------------------------------
|-2022-05-11 niuxiaojing
1、修复导出截图时，地图中测量线也被截取但是测量截图无法被截取的问题，现在截取前将测量线移除了，但是绘制线不受影响
2、修复测量状态时某些左键偶然操作或右键可进入编辑模式的bug
--------------------------------
|-2022-05-13 niuxiaojing
1、因高陵项目扯旗功能需要，改动绘制接口的Promise返回对象格式，库升级为0.0.9，需谨慎升级
2、drawLine和drawArea现在增加了是否自动清除参数autoClear，默认清除，如果传入false，则不会将之前的绘制类清除
3、drawLine和drawArea修改了resolve返回对象，原先是wkt字符串，现在是{"featureId":"", "wkt":""}，为避免造成其他项目引发问题，版本号进行了升级
4、增加了removeDraw接口，调用service.removeDraw(featureId)可删除期望的绘制线段或区域
5、增加了clearDraw接口，调用service.clearDraw()可删除所有的绘制线段或区域
6、现在measure和draw进行了内存区分，意思即clearMeasure只会清除测量的形状，clearDraw只会清除绘制的形状，垃圾桶不受该限制
--------------------------------
|-2022-05-13 qinlei
1、因高新2.1需要,有效值属性isvalid=1搜索过滤, 在时空新增search字段 filter:"isvalid = 1"; 倘若有其他过滤条件可后拼 ,如: filter:"isvalid = 1 and ss = 2"
|-2022-05-19 qinlei 0.0.9
1、因高新2.1移动端图层切换需要,service新增方法getStyleConfs(),获取当前配置json的style数组.调用方式: this.service.getStyleConfs()