问题

1.期望 实现 实时显示经纬度、高度,做电子围栏报警判断
2.第一步就是要,获取实时运行的经纬度信息、高度信息,然后通过算法做电子围栏判断
3.使用了参数getOverPositions,发现返回的不是经纬度

相关链接

http://mars3d.cn//editor-vue.html?id=graphic/roam/dynamicRoamLine

代码

  1. import * as mars3d from "mars3d"
  2. export let map // mars3d.Map三维地图对象
  3. export let graphicLayer // 矢量图层对象
  4. // 需要覆盖config.json中地图属性参数(当前示例框架中自动处理合并)
  5. export const mapOptions = {
  6. scene: {
  7. center: { lat: 31.773622, lng: 117.077444, alt: 5441, heading: 359, pitch: -57 }
  8. }
  9. }
  10. export const eventTarget = new mars3d.BaseClass()
  11. /**
  12. * 初始化地图业务,生命周期钩子函数(必须)
  13. * 框架在地图初始化完成后自动调用该函数
  14. * @param {mars3d.Map} mapInstance 地图对象
  15. * @returns {void} 无
  16. */
  17. export function onMounted(mapInstance) {
  18. map = mapInstance // 记录map
  19. // 演示数据的时间
  20. map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2020-11-25 10:10:00"))
  21. // 加载车辆
  22. mars3d.Util.fetchJson({
  23. url: "//data.mars3d.cn/file/apidemo/car-list.json"
  24. })
  25. .then(function (res) {
  26. const tableData = res.data
  27. eventTarget.fire("carList", { tableData })
  28. showCarList(tableData)
  29. })
  30. .catch(function () {
  31. globalMsg("查询信息失败")
  32. })
  33. }
  34. /**
  35. * 释放当前地图业务的生命周期函数
  36. * @returns {void} 无
  37. */
  38. export function onUnmounted() {
  39. map = null
  40. }
  41. const colors = [
  42. "rgb(40, 40, 255)",
  43. "rgb(0, 88, 176)",
  44. "rgb(0, 128, 255)",
  45. "rgb(0, 217, 0)",
  46. "rgb(0, 151, 0)",
  47. "rgb(255, 199, 83)",
  48. "rgb(255, 144, 30)",
  49. "rgb(202, 101, 0)",
  50. "rgb(255, 0, 0)"
  51. ]
  52. function showCarList(arr) {
  53. console.log("加载" + arr.length + "条")
  54. // 创建矢量数据图层
  55. graphicLayer = new mars3d.layer.GraphicLayer()
  56. map.addLayer(graphicLayer)
  57. // 鼠标移入提示信息
  58. graphicLayer.bindTooltip(function (event) {
  59. const data = event.graphic.options
  60. return "车辆编号:" + data.id + "<br />车牌号码:" + data.name
  61. })
  62. // 单击地图空白处
  63. map.on(mars3d.EventType.clickMap, function (event) {
  64. if (lastClickCar) {
  65. lastClickCar.removeShading("circle")
  66. lastClickCar = null
  67. }
  68. })
  69. // 绑定点击事件
  70. graphicLayer.on(mars3d.EventType.click, (event, position) => {
  71. const car = event.graphic
  72. console.log("单击了车辆", car)
  73. if (lastClickCar) {
  74. if (lastClickCar === car) {
  75. return
  76. } // 重复单击,跳出
  77. lastClickCar.removeShading("circle")
  78. lastClickCar = null
  79. }
  80. car.addShading({
  81. type: "circle",
  82. materialType: mars3d.MaterialType.CircleWave,
  83. speed: 10,
  84. count: 3,
  85. gradient: 0.1,
  86. radius: 50,
  87. color: "#ffff00",
  88. opacity: 0.3,
  89. show: true
  90. })
  91. lastClickCar = car
  92. // 视角定位下
  93. // car.flyToPoint({ radius: 1000 })
  94. })
  95. let lastClickCar
  96. for (let i = 0; i < arr.length; i++) {
  97. const item = arr[i]
  98. item.show = true
  99. let modelParam
  100. switch (item.type) {
  101. case 1:
  102. modelParam = {
  103. scale: 2,
  104. url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb"
  105. }
  106. break
  107. case 2:
  108. modelParam = {
  109. scale: 1,
  110. url: "//data.mars3d.cn/gltf/mars/car/wajueji.glb"
  111. }
  112. break
  113. default:
  114. }
  115. const car = new mars3d.graphic.DynamicRoamLine({
  116. id: item.id,
  117. name: item.name,
  118. model: {
  119. clampToGround: true,
  120. show: true,
  121. ...modelParam
  122. },
  123. shadow: [
  124. {
  125. type: "polyline",
  126. color: colors[i],
  127. width: 2,
  128. clampToGround: true,
  129. maxDistance: 500,
  130. show: true
  131. }
  132. ]
  133. })
  134. car.on(mars3d.EventType.change, (event) => {
  135. console.log(event);
  136. })
  137. graphicLayer.addGraphic(car)
  138. }
  139. // 定时获取卡车和铲车的列表数据
  140. createPath()
  141. }
  142. // 取轨迹数据的时间间隔(单位:秒)
  143. const timeStep = 10
  144. let lastTime
  145. // 首次获取并创建轨迹
  146. function createPath() {
  147. // 取数据的时间范围,结束时间
  148. const date = Cesium.JulianDate.toDate(map.clock.currentTime)
  149. const endTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
  150. // 修改当前时间回退一分钟,因为数据永远是当前时间之前的。
  151. date.setSeconds(date.getSeconds() - 60)
  152. map.clock.currentTime = window.Cesium.JulianDate.fromDate(date)
  153. // 取数据的时间范围,开始时间
  154. date.setMinutes(date.getMinutes() - 10) // 初次取一定时间内的数据
  155. const beginTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
  156. // 记录最后一次读取数据的时间
  157. lastTime = endTime
  158. // 取数据
  159. getPathList(beginTime, endTime)
  160. // 定时更新
  161. setInterval(() => {
  162. updatePath()
  163. }, timeStep * 1000)
  164. }
  165. // 后续更新轨迹
  166. function updatePath() {
  167. const beginTime = lastTime
  168. const date = new Date(beginTime)
  169. date.setSeconds(date.getSeconds() + timeStep)
  170. const endTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
  171. lastTime = endTime
  172. // 取数据
  173. getPathList(beginTime, endTime)
  174. }
  175. // 读取车辆gps坐标路径的接口
  176. function getPathList(beginTime, endTime) {
  177. mars3d.Util.fetchJson({
  178. url: "//data.mars3d.cn/file/apidemo/car-path.json"
  179. })
  180. .then((res) => {
  181. const listALL = res.data || []
  182. // 因为读取静态json,为了演示动态,筛选数据内符合时间范围内的数据。
  183. // 真实接口中可以注释下面代码。
  184. const d_beginTime = new Date(beginTime)
  185. const d_endTime = new Date(endTime)
  186. const list = listALL.filter((item) => {
  187. const thistime = new Date(item.time)
  188. return thistime >= d_beginTime && thistime <= d_endTime
  189. })
  190. const path = `${endTime} 获取到 ${list.length} 条GPS坐标记录`
  191. eventTarget.fire("showPath", { path })
  192. // 循环车辆
  193. graphicLayer.eachGraphic((car) => {
  194. // 取出对应车辆的轨迹列表
  195. const path = list.filter((item) => {
  196. return item.id === car.id
  197. })
  198. if (path && path.length > 0) {
  199. // 更新车辆的轨迹
  200. car.updatePath(path, {
  201. timeColumn: "time",
  202. getPosition: function (item) {
  203. return Cesium.Cartesian3.fromDegrees(parseFloat(item.lon), parseFloat(item.lat), 0)
  204. }
  205. })
  206. }
  207. })
  208. })
  209. .catch(() => {
  210. globalMsg("实时查询车辆路径信息失败,请稍候再试")
  211. })
  212. }
  213. export function onSelect(id, selected) {
  214. const car = graphicLayer.getGraphicById(id)
  215. if (!car) {
  216. return
  217. }
  218. if (selected) {
  219. car.show = true
  220. car.flyToPoint({ radius: 900 })
  221. } else {
  222. car.show = false
  223. }
  224. }
  225. export function onChange(data) {
  226. data.forEach((item) => {
  227. const car = graphicLayer.getGraphicById(item)
  228. if (car) {
  229. car.flyToPoint({ radius: 900 })
  230. }
  231. })
  232. }
  233. // 点击行
  234. export function flyToModel(id) {
  235. const car = graphicLayer.getGraphicById(id)
  236. if (car) {
  237. car.flyToPoint({ radius: 900 })
  238. }
  239. }

解决方案: change事件中可以拿到position属性
issue: https://gitee.com/marsgis/mars3d/issues/I5CCL8?from=project-issue