# vue3Openlayers

**Repository Path**: zhou_double_jade/v3openlayers

## Basic Information

- **Project Name**: vue3Openlayers
- **Description**: vue3 + openlayers + elementPlus
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-10-09
- **Last Updated**: 2024-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description: vue3 + elementPlus + openlayers
 * @Autor: liuqiang
 * @Date: 2022-03-17
 * @LastEditors: liuqiang
 * @LastEditTime: 2022-03-17
-->

**坚持不易，如果觉得项目还不错的话可以今日头条搜索 Web 前端进阶指南 加个关注吧，也是对我一直更新代码的一种鼓励啦，谢谢各位的支持。**

***未经正式授权严禁转载本文或者分享代码,侵权必究***

[Openlayers API整理](./Openlayers%20API整理.md)

## 安装

```
$ npm install
```

# 运行

```
$ npm run serve
```

# 打包

```
$ npm run build
```

# 页面配置

## *openlayers 介绍 - home*
## *制作第一个地图 - firstMap*
## *弹窗 - popup*
## *标记 - marker*
## *地图缩放级别 - zoom*
## *单击激活地图 - tabindex*
## *切换地图容器 - tabContainer*
## *同步两个地图 - SynMaps*
## *预加载 - preload*
## *矢量图 JSON - vectorgraphJson*
## *矢量图高亮 - vectorHigh*
## *旋转 - rotationMap*
## *鼠标拖拽旋转/缩放 - mouseZoom*
## *动画 - animate*
## *网格 - Graticule*
## *热力图 - Heatmap*
## *比例尺控件 - ScaleLine*
## *全屏控件 - FullScreen*
## *导览控件 - ZoomToExtent*
## *总览控件 - OverviewMap*
## *鼠标位置控件 - MousePosition*
## *缩放滑块控件 - ZoomSlider*
## *图层组 - Group*
## *控制图层层叠关系 - setZIndex*
## *限制分辨率 - limitResolution*
## *按限制范围加载图层 - setExtent*
## *图层遮罩效果 - layerCover*
## *设置图层的源 - setSource*
## *简单的标记 - easyMark*
## *定义标记颜色 - markColor*
## *聚合数据 - aggregatedData*
## *绘制点、线、面 - basicDraw*
## *绘制图形 - drawGraph*
## *自由绘制图形 - freeDrawing*
## *带箭头的线段 - arrowLine*
## *修改自由绘制的图形 - snapGraph*

使用了以下框架和库。

- [Vue 文档](https://cn.vuejs.org/)
- [Vue-Router 文档](https://router.vuejs.org/zh/)
- [openlayers 官网](https://openlayers.org/)

# 联系作者

- 我的邮箱：1425412062@qq.com
- 或者今日头条关注我私信留言

# 更多推荐

**openlayers 在 Vue3 里应用**

geoserver 安装部署步骤 (https://www.cnblogs.com/giserhome/p/7749676.html)
geoserver 发布地图服务 WMS (https://www.cnblogs.com/giserhome/p/7751172.html)
geoserver 发布地图服务 WMTS (https://www.cnblogs.com/giserhome/p/7774548.html)
geoserver 集成以及部署 arcgis server 瓦片数据 (https://www.cnblogs.com/giserhome/p/7795060.html)