# openlayersUI
**Repository Path**: Y965652131/openlayersUI
## Basic Information
- **Project Name**: openlayersUI
- **Description**: 个人openlayers示例
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-03
- **Last Updated**: 2026-03-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# OpenLayers
OpenLayers 是一个用于在网页中显示地图数据的开源 JavaScript 库。它提供了丰富的地图功能，支持多种地图图层、交互操作和地理数据可视化。
## 特性
- **多地图源支持**：支持 OpenStreetMap、Bing Maps、Google Maps 等多种地图服务
- **丰富的交互功能**：缩放、平移、旋转、标注、绘制等
- **矢量数据可视化**：支持 GeoJSON、KML、GPX 等矢量格式
- **投影转换**：支持多种地图投影系统
- **移动端适配**：支持触摸操作，响应式设计
## 安装
### 通过 npm 安装
```bash
npm install openlayers
```
### 通过 CDN 引入
```html
```
## 快速开始
```html
OpenLayers 地图示例
```
## 基本用法
### 添加标记
```javascript
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { fromLonLat } from 'ol/proj';
// 创建标记要素
const marker = new Feature({
geometry: new Point(fromLonLat([116.4, 39.9])) // 北京坐标
});
// 创建矢量图层
const vectorLayer = new VectorLayer({
source: new VectorSource({
features: [marker]
})
});
// 创建地图
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
view: new ol.View({
center: fromLonLat([116.4, 39.9]),
zoom: 10
})
});
```
### 加载 GeoJSON 数据
```javascript
import GeoJSON from 'ol/format/GeoJSON';
const vectorLayer = new VectorLayer({
source: new VectorSource({
url: 'data/geojson.json',
format: new GeoJSON()
}),
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.5)'
}),
stroke: new Stroke({
color: '#319FD3',
width: 2
})
})
});
```
## 文档
更多详细文档请访问 [OpenLayers 官方文档](https://openlayers.org/doc/)
## 许可证
本项目基于 BSD-2-Clause 许可证开源。详情请参阅 LICENSE 文件。
## 贡献
欢迎提交 Issue 和 Pull Request！