ol-cs-libs
v1.0.0
Published
Enterprise WebGIS Core Library integrating OpenLayers and Cesium
Maintainers
stivennpmReadme
ol-cs-libs
Enterprise WebGIS Core Library integrating OpenLayers and Cesium.
Features
- Integrated Support: Seamlessly manage OpenLayers Maps and Cesium Viewers.
- Framework Agnostic: Core library is pure TypeScript/JavaScript, usable with any framework (Vue, React, Angular, Vanilla JS).
- TypeScript Ready: Full type definitions included.
- Build Formats: Supports ESM, UMD, and IIFE formats for maximum compatibility (Bundlers, CDN).
- Minified Output: Production-ready minified builds.
Installation
Using Package Manager
pnpm add ol-cs-libs
# or
npm install ol-cs-libs
# or
yarn add ol-cs-libsPeer Dependencies
Ensure you have the required peer dependencies installed:
pnpm add ol@^10.4.0 cesium@^1.138.0 ol-ext@^4.0.24 proj4@^2.10.0 lodash@^4.17.21 @turf/turf@^6.5.0CDN
You can use the library directly via CDN (e.g., unpkg or jsdelivr):
<script src="https://unpkg.com/ol-cs-libs/dist/ol-cs-libs.umd.min.js"></script>
<!-- Or for IIFE -->
<script src="https://unpkg.com/ol-cs-libs/dist/ol-cs-libs.iife.min.js"></script>Usage
ESM (Bundlers)
import { WebGISManager } from 'ol-cs-libs';
import Map from 'ol/Map';
import View from 'ol/View';
// Initialize Manager
const manager = new WebGISManager();
// Create OpenLayers Map
const map = new Map({
target: 'map',
view: new View({ center: [0, 0], zoom: 2 })
});
// Register Map with Manager
manager.setOlMap(map);
console.log(manager.getOlMap());CDN (Browser)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<script src="path/to/ol-cs-libs.iife.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
// Global variable 'OlCsLibs' is available
const manager = new OlCsLibs.WebGISManager();
const map = new ol.Map({
target: 'map',
view: new ol.View({ center: [0, 0], zoom: 2 })
});
manager.setOlMap(map);
</script>
</body>
</html>Development
Setup
pnpm installBuild
pnpm buildRun Examples
pnpm dev
访问地址：http://localhost:5173/examples/cdn/index.html
访问地址：http://localhost:5173/examples/vue3/index.htmlThis will start a dev server for the examples located in examples/ directory.
Run Tests
pnpm testGenerate Documentation
pnpm docs
访问地址：http://localhost:5173/apidoc/index.htmlLicense
ISC