3.2 KiB
3.2 KiB
前端运行
# 克隆项目
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、定义一个地图渲染承载框
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', }), }), }); },
模拟数据版本
1.使用mock数据 2.打包npm run build:test 3.打包前隐藏