Skip to content

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

License

Notifications You must be signed in to change notification settings

wewindy/vite2-gislib-demos

Folders and files

NameName
Last commit message
Last commit date
May 27, 2021
May 20, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 20, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 27, 2021
May 19, 2021
May 19, 2021
May 27, 2021

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

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