Skip to content

使用 Vite2 创建一些 gis 或 类 gis 库的初始示例代码

License

Notifications You must be signed in to change notification settings

onsummer/vite2-gislib-demos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

1 简介

使用 Vite2 创建 React17Vue3Svelte 项目。

每个前端框架提供下列 gis 或类 gis 库的 Hello World 代码。

  • openlayers@6.5
  • cesium.js@1.81
  • leaflet@1.7.1
  • mapboxgl@1.13.1
  • openglobus@0.8.10
  • arcgis jsapi@4.19

① Cesium 项目额外注意

要配置 window 下的全局属性 CESIUM_BASE_URL,你可以看到我在 index.html 中写多了一个 <script> 标签。

亦可在 index.html 中直接引用 /cesium_base_url.js,然后用写文件的方式将此 URL 提前写入到 public/cesium_base_url.js 中。

cesium_base_url.js 的内容如下:

window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`

本例不使用 vite-cesium-plugin,即不将 cesium 依赖中的额外资源拷贝到 public 目录下,仅适用于开发环境,生产环境需要自己配置 cesium api 的 cdn.

② mapboxgl 注意

  • 替换你的访问令牌方可使用
  • 推荐使用社区分支 maplibre-gl,是 mapbox-gl 在 2.0 版本开始修改开源协议之后的一个不错的分支

③ openglobus 注意

因为 openglobus 在我初次写时还没有类型定义库,所以用的是 JavaScript 来写。初始视角用的是官方默认的。

④ arcgis 注意

详细的文档写在子目录中了,主要是 assets 目录的预复制操作,这点和 Cesium 的操作略像。读者可以自己手动试试将 esriConfig.assetsPath 配为部署好的地址,也可以像我 Cesium 例子一样设置开发时的目录,即 esriConfig.assetsPath = "http://localhost:3000/node_modules/@arcgis/core/assets/" (我没测试过,留给读者自己试吧)。

2 Future

  • 使用原生 js+css+html 试写一次

3 为什么不用封装好的组件库

例如,openlayers 可以使用 rlayers,leaflet 可以使用 react-leafletvue2-leaflet

是因为我希望原汁原味,无它。