112 lines
3.1 KiB
Markdown
112 lines
3.1 KiB
Markdown
|
|
|
|
## 前端运行
|
|
|
|
```bash
|
|
# 克隆项目
|
|
git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git
|
|
|
|
# 进入项目目录
|
|
cd RuoYi-Vue3
|
|
|
|
# 安装依赖
|
|
yarn --registry=https://registry.npmmirror.com
|
|
|
|
# 启动服务
|
|
yarn dev
|
|
|
|
# 构建测试环境 yarn build:stage
|
|
# 构建生产环境 yarn build:prod
|
|
# 前端访问地址 http://localhost:80
|
|
```
|
|
|
|
未完成任务：
|
|
1.左侧菜单栏：刷新状态不保存
|
|
2.左侧二级菜单选中的时候 一级菜单无背景色
|
|
超图地图开发使用基础
|
|
1、前期准备工作熟悉超图地图服务以及基本的操作。
|
|
2、熟悉Openlayers以及Leaflet相关操作
|
|
具体代码操作：
|
|
1、定义一个地图渲染承载框<div id="replay_map" />
|
|
2、定义一个地图实例 map: null, 定义一个渲染位置图层 layer: null
|
|
3、初始化地图
|
|
// 初始化地图
|
|
initMap() {
|
|
ol.proj.setProj4(proj4);
|
|
proj4.defs("EPSG:4528","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
|
|
var projection = new ol.proj.Projection({
|
|
code: 'EPSG:4528',// 地图坐标系
|
|
});
|
|
this.map = new ol.Map({
|
|
target: 'replay_map',//第一步设置的地图承载框
|
|
controls: ol.control.defaults({
|
|
attribution: false,
|
|
rotate: false
|
|
}),
|
|
view: new ol.View({
|
|
center: [40507885.133754 , 4025694.476392],//地图中心点
|
|
zoom: 12,//初始时的缩放比例
|
|
projection: projection,//坐标系等的设置
|
|
rotation: 0.3
|
|
}),
|
|
//图层，这个是后期所有自定义的展示层
|
|
layers: [
|
|
new ol.layer.Tile({
|
|
source: new ol.source.TileSuperMapRest({
|
|
crossOrigin: 'anonymous',
|
|
url: this.$map_url,
|
|
extent: [40347872.25,2703739.74,40599933.05,5912395.20]
|
|
}),
|
|
projection: projection,
|
|
})
|
|
]
|
|
});
|
|
// 添加位置图层
|
|
this.layer = new ol.layer.Vector({
|
|
source: new ol.source.Vector(),
|
|
zIndex: 2,
|
|
});
|
|
//把自定义展示的图层放到地图中
|
|
this.map.addLayer(this.layer);
|
|
},
|
|
3、图层自定义内容
|
|
//创建一个Feature
|
|
const feature = new ol.Feature({
|
|
//以一个点作为示例，可以是点、线、面
|
|
geometry: new ol.geom.Point([item.longitude, item.latitude]),
|
|
});
|
|
//定义样式
|
|
feature.setStyle(() => {
|
|
//自定义样式
|
|
const style = [];
|
|
style.push(this.getStyle(type, item));
|
|
return style;
|
|
}
|
|
//这个layer就是已开始定义的渲染图层
|
|
this.layer.getSource().addFeature(feature);
|
|
|
|
// 得到style实例
|
|
getStyle(type, item, status) {
|
|
return new ol.style.Style({
|
|
image: new ol.style.Icon({
|
|
src: getImage(type, item, status),
|
|
rotateWithView: true,
|
|
scale: this.getScale(type),
|
|
rotation: 0,
|
|
}),
|
|
zIndex: 3,
|
|
text: new ol.style.Text({
|
|
font: '12px 微软雅黑',
|
|
text: this.getText(type, item),
|
|
offsetY: -15,
|
|
fill: new ol.style.Fill({
|
|
color: '#515a71',
|
|
}),
|
|
}),
|
|
});
|
|
},
|
|
|
|
|
|
|
|
|
|
# 模拟数据版本 |