码迷,mamicode.com
首页 > Web开发 > 详细

三维 WebGIS 新玩具:OpenGlobus

时间:2021-04-30 12:44:29      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:导入   base   cti   图形绘制   lod   完全   设置   source   mic   

代码仓库地址:https://github.com/openglobus/openglobus
原创。@秋意正寒

1 简介

OpenGlobus 是一个设计用于显示可交互性三维地图、影像瓦片、矢量数据、标注、三维对象的 JavaScript 库。它所用的技术是纯 WebGL,完全开源免费。

它的目标是:让三维地图要素更快、更好看,用户友好度拉满并且在有关项目中容易编码实现。

笔者注:OpenGlobus 的起名,颇有三维界的 OpenLayers 的意味

2 HelloGlobus

很容易能通过 npm scripts 中的 build 命令打包到一个生产模式的 umd 包,包括两个文件,一个 js 文件,一个 css 文件,写这篇文章时,库版本是 0.8.5,所以上最简单的示例代码:

<link rel="stylesheet" href="og-0.8.5.css">
<script src="og-0.8.5.js"></script>

<div id="viewport"></div>
<script>
  const globus = new og.Globe({
    target: ‘viewport‘
  })
</script>

在控制台,键入 og 可输出全局对象。

出图大概是这样的效果:

技术图片

观察控制台的网络请求,不难发现在不添加任何图层、高程数据的时候,它不会发生任何网络图层的请求,也就是说,这个夜光图和背景完全是内置在代码中的静态资源。

3 在 Vite 中与 vue3 集成

经测试,Globe 对象暂不支持直接传入 HTMLDivElement,只能传递一个 id 字符串,所以绑定 DOM ref 的方法行不通。

习惯性把属性作为 vue 组件的 props 的开发者请注意,下列写法虽然可以正确出现地球,但是这样会增加监听负载,一旦将来 globe 上的东西越来越多,WebGL 的帧率将不能保证:

<template>
  <div id="viewport"></div>
</template>

<script setup>
import * as og from ‘@openglobus/og‘ // 发文时,还没有类型定义库 `*.d.ts`,所以暂时只能整体导入,而不能用解构语法
import { onMounted, defineProps, ref } from ‘vue‘
import ‘/node_modules/@openglobus/og/css/og.css‘

let globe = ref()
onMounted(() => {
  globe = new og.Globe({
    target: ‘viewport‘
  })
})

defineProps([
  ‘globe‘
])
</script>

所以,我建议改成这样:

<template>
  <div id="viewport"></div>
</template>

<script setup>
import * as og from ‘@openglobus/og‘ // 发文时,还没有类型定义库 `*.d.ts`,所以暂时只能整体导入,而不能用解构语法
import { onMounted } from ‘vue‘
import ‘/node_modules/@openglobus/og/css/og.css‘

let globe = null
onMounted(() => {
  globe = new og.Globe({
    target: ‘viewport‘
  })
})
</script>

4 在 Vite 中与 react 集成

这个就简单了:

import React, { useEffect } from ‘react‘
import * as og from ‘@openglobus/og‘ // 发文时,还没有类型定义库 `*.d.ts`,所以暂时只能整体导入,而不能用解构语法
import ‘/node_modules/@openglobus/og/css/og.css‘

function App() {
  useEffect(() => {
    const globe = new og.Globe({
      target: ‘viewport‘
    })
  }, [])
  return <div id="viewport"></div>
}

export default App

5 示例代码

官网(www.openglobus.org)提供了一些示例代码,足够学习使用,只要知道入口对象是 Globe 类即可。

6 API风格

不仅库的名字类似 OpenLayers,它还在很多 API 命名上“暂时”接近 ol。拿创建 XYZ 图层来说:

const osm = new og.layer.XYZ("OpenStreetMap", {
  isBaseLayer: true, // 是否是底图
  url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", // url
  visibility: true, // 可见性
  attribution: ‘Data @ OpenStreetMap contributors, ODbL‘ // 声明之类的字符串
});

OpenLayers 的比较:

const xyzSource = new ol.source.XYZ({
  url: `https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here`,
})

以及 Vector 图层:

const markerLayer = new og.layer.Vector("Markers", {
  clampToGround: true
})

在 ol 也有类似的 API 名称。

更有趣的是,当前的示例代码页面和 ol 6.5 的示例代码页面极为相似:

og ol
技术图片 技术图片

更别提 API 帮助文档了,我怀疑是用的同一个母模板。

7 目前已完成的功能(截至发文时)

基本数据加载功能

  • GeoJson 数据加载
  • 静态图片加载(并支持拖拽调整其四个角的位置)
  • 地形服务加载(Mapbox的地形服务、GeoServer的Bil格式地形服务等),支持垂直夸大
  • GeoServer WMS 加载
  • Canvas瓦片加载(Canvas作为一层直接贴到地球表面)
  • 广告牌加载(类似于精灵?),支持贴地
  • 视频纹理
  • 基本矢量图形绘制(polylines、marker、circle、ray等),marker支持交互式拖拽移动

界面定制与交互功能

  • 支持自定义控件(类继承形式实现,且暂时只能用原生 DOM)
  • 支持 Popup(弹窗),弹窗样式比较丑,虽然支持背面剔除,但是它的更新坐标的机制感觉和 Cesium 自定义气泡差不多... 都是监听事件改变 DOM 的坐标
  • 支持图层切换控件(尽管现在还很丑)
  • 支持鼠标滑过(mousemove)、左键单击(lclick)等基本事件,也支持禁用事件
  • 支持相机飞行动画

渲染器及渲染效果相关功能

  • 提供时钟(儒略日期、UTC等均支持)
  • 内置简单的数学库
  • 图层透明度设置
  • 支持简易太阳光
  • 支持假性半透明颜色覆盖

复杂的需求肯定达不到(例如将视频完整地贴合复杂模型等),毕竟才发布不久。

8 提供原生 WebGL 接口

GeoTexture2d 例子中,就出现了与底层 WebGL 几乎完全一致的代码,例如 fbo、program、uniforms、attributes 等,也支持自定义的着色器代码,意味着应该是有底层的能力的。

9 展望未来

它创建于 2018 年,但是在 GitHub 上是今年 3 月才活跃起来的,官网列举此库的特点如下:

图层支持

  • WMS、WMTS
  • 标签和广告牌
  • 矢量图层:线与面类型
  • 静态覆盖图层:支持静态图片、视频、WebGL FBO
  • 自定义 canvas 瓦片图层
  • GeoJSON图层
  • 其他

默认控件

  • 缩放按钮
  • 经纬度坐标提示
  • 图层切换
  • 太阳位置控件
  • 指北针
  • 交互式导航(即鼠标键盘控制)

引擎的性能表现

  • 纯 WebGL 实现渲染器
  • 支持多地球实例
  • 单 WebGlProgram(不太确定)
  • 内置时钟,即时渲染
  • 支持事件:draw、click、mouseenter等
  • 支持图层、对象的拾取
  • LOD控制
  • 舒适的交互体验
  • 无依赖!

三维可视化

  • 支持多种高程数据源
  • 柔和的灯光
  • 自定义天空盒
  • 图层外观支持自定义:光参数、高度调整、透明度、可见范围等
  • 轴对齐的广告牌和标签
  • 即将支持:3dTiles、大气散射效果、glTF模型

若再迭代十几个版本,那是非常值得期待的,毕竟它的 API 更接近 GIS 风格。

但是,现在国内的需求更接近局部展示而不是全球范围展示,能不能被国内的piao客们青睐,还要再等等。

三维 WebGIS 新玩具:OpenGlobus

标签:导入   base   cti   图形绘制   lod   完全   设置   source   mic   

原文地址:https://www.cnblogs.com/onsummer/p/14721391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!