区块链技术博客
www.b2bchain.cn

三维 WebGIS 新玩具:OpenGlobus求职学习资料

本文介绍了三维 WebGIS 新玩具:OpenGlobus求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

代码仓库地址:https://github.com/openglobus/openglobus

  • 1 简介
  • 2 HelloGlobus
  • 3 在 Vite 中与 vue3 集成
  • 4 在 Vite 中与 react 集成
  • 5 示例代码
  • 6 API风格

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 可输出全局对象。

出图大概是这样的效果:

三维 WebGIS 新玩具:OpenGlobus

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

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 图层来说:

“`js
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’ // 声明之类的字符串
});

代码仓库地址:https://github.com/openglobus/openglobus

  • 1 简介
  • 2 HelloGlobus
  • 3 在 Vite 中与 vue3 集成
  • 4 在 Vite 中与 react 集成
  • 5 示例代码
  • 6 API风格

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 可输出全局对象。

出图大概是这样的效果:

三维 WebGIS 新玩具:OpenGlobus

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

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 图层来说:

“`js
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’ // 声明之类的字符串
});

代码仓库地址:https://github.com/openglobus/openglobus

  • 1 简介
  • 2 HelloGlobus
  • 3 在 Vite 中与 vue3 集成
  • 4 在 Vite 中与 react 集成
  • 5 示例代码
  • 6 API风格

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 可输出全局对象。

出图大概是这样的效果:

三维 WebGIS 新玩具:OpenGlobus

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

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 图层来说:

“`js
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’ // 声明之类的字符串
});

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 三维 WebGIS 新玩具:OpenGlobus求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们