springBoot 静态模板导出地图
1.首先要在yml文件中配置
freemarker:
allow-request-override: false
cache: true
check-template-location: true
charset: UTF-8
content-type: text/html; charset=utf-8
expose-request-attributes: false
expose-session-attributes: false
expose-spring-macro-helpers: false
suffix: .ftl
template-loader-path: classpath:/ftl
2.然后我们建立文件夹为ftl的文件夹
3.前段发出异步请求(有前段的可以不用看,这里我穿的一个对象过去,对象里面有集合,有变量)
exportMap () {
if (this.tableData.aaData.length === 0) {
return this.$notify({
title: '消息',
message: '请先去筛选项目'
})
}
this.exportMaps.projects = this.tableData.aaData
this.exportMaps.city = this.$route.query.city
axios({
url: process.env.BASE_API + '/exprotMap' + '?access_token=' + getToken(),
method: 'post',
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
data: this.exportMaps,
responseType: 'blob'
}).then(response => {
const blob = new Blob([response.data])
const fileName = this.schemeName + '--方案调度地图' + '.html'
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
this.exportLoad = false
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
this.exportLoad = false
}
})
}
4.接下来再后端接受处理
@Controller
public class FreemakerController {
@RequestMapping("/exprotMap")
public void exportMap(Map<String,Object> map, @RequestBody ExportMapViews params){
map.put("city",params.getCity());
map.put("projects",params.getProjects());
}
}
5.然后写静态模板(页面我是用vue写的)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='百度密钥'" ></script>
</head>
<body>
<div id="app">
<!--<div style="height: 100%;" id="allmap"></div>-->
<div :style="mapstyle" id="allmap"></div>
<div :style="upmapstyle" @click="left">
<i :class="arrow"></i>
</div>
<el-card shadow="never" :style="{width: leftWidht,float:'right'}">
<div slot="header">
<span class="title-font">项目列表</span>
</div>
<div style="height: 20px"></div>
<div>
<el-alert type="info" :show-icon="true" title="" class="info_alert" :closable="false">
<span class="text">
<slot>
项目数量： <b>{{this.tableData.length}}个</b> | 媒体位调度总量： <b style="color: red">{{this.mediaCount}}个</b>
</slot>
</span>
</el-alert>
</div>
<div style="height: 20px"></div>
<span>
<el-input size="small" v-model="selectCondition">
<el-button icon="el-icon-search" size="small" slot="append"></el-button>
</el-input>
</span>
<div style="height: 20px"></div>
<el-table
:data="conditions"
:height="1022"
border
style="width: 100%">
<el-table-column label="序号" prop="workId"></el-table-column>
<el-table-column :show-overflow-tooltip="true" label="项目名称" prop="projectName"></el-table-column>
<el-table-column :show-overflow-tooltip="true" label="项目类型">
<template slot-scope="scope">
<span v-if="scope.row.projectType == 1">商住楼</span>
<span v-if="scope.row.projectType == 3">写字楼</span>
<span v-if="scope.row.projectType == 4">住宅</span>
<span v-if="scope.row.projectType == 6">综合体</span>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="项目级别" prop="projectLevel"></el-table-column>
<el-table-column :show-overflow-tooltip="true" label="调度数量" prop="fcount"></el-table-column>
</el-table>
</el-card>
</div>
</body>
<script type="text/javascript">
// 获得数组长度
var projectsSize = '${projects?size}';
var BASEDATA= [];
//遍历集合
<#list projects as project>
BASEDATA.push({'workId':"${project.workId}",'projectName':"${project.projectName}",'longitude': "${project.longitude?string('0.000000')}",'latitude': "${project.latitude?string('0.000000')}",'fcount':"${project.fcount}",'projectLevel':"${project.projectLevel}",'projectType':"${project.projectType}"});
</#list>
//获得城市
var city = "${city}";
function newMap() {
map = new BMap.Map("allmap");
map.centerAndZoom(city, 12);
initMap();
}
function initMap() {
var point = new BMap.Point();
// map.centerAndZoom(new BMap.Point(104.073767, 30.655267), 12);
map.centerAndZoom(city, 12);
// map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity("成都"); // 设置3D地图显示的城市 此项是必须设置的
// map.enableScrollWheelZoom(); //启用滚轮缩放
// map.enableKeyboard(); //开启键盘操作功
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.enableScrollWheelZoom(true);
map.addEventListener('rightclick', function(e) {
// vm.formData.coordinateName = e.point.lng + ',' + e.point.lat
});
// 创建多标注点
function markerFun(points, label, infoWindows) {
var markers = new BMap.Marker(points);
map.addOverlay(markers);
markers.setLabel(label);
markers.addEventListener('click', function(event) {
map.openInfoWindow(infoWindows, points);
});
}
if (BASEDATA.length === 0) {
return this.$notify.info({
title: '消息',
message: '未找到楼盘数据'
})
}
if (BASEDATA.length > 0) {
for (var i = 0; i < BASEDATA.length; i++) {
var points = new BMap.Point(BASEDATA[i].longitude, BASEDATA[i].latitude);
var opts = {
width: 300,
height: 100,
title: '<span style=\'font-size:15px;color:#61bd0c\'>' + BASEDATA[i].projectName + '</span>'
};
// 显示在外面内容
var label = new BMap.Label(BASEDATA[i].projectName + '(' + BASEDATA[i].fcount + ')', {
offset: new BMap.Size(25, 5)
});
// 卡片里面内容
var infoWindows = new BMap.InfoWindow('<b>' + BASEDATA[i].projectName + ',经纬度为:' + '</b>' + BASEDATA[i].longitude + ',' + BASEDATA[i].latitude, opts);
// var infoWindows = new BMap.InfoWindow('<b>' + '社区类型:' + '</b> ' + this.mapPoints[i].projectType + '<b><br>' + '业主收入水平:' + '</br></b> ' + this.mapPoints[i].yzsrsp + '<b><br>' + '入住率:' + '</br></b> ' + this.mapPoints[i].rzl + '<b><br>' + '所属城区:' + '</br></b> ' + this.mapPoints[i].city + '<b><br>' + '项目地址:' + '</br></b> ' + this.mapPoints[i].projectAdds, opts)
markerFun(points, label, infoWindows);
}
}
}
new Vue({
el: '#app',
data () {
return {
leftWidht: '30%',
tableData: [],
mediaCount: 0,
selectCondition: '',
arrow: 'el-icon-d-arrow-right',
clickDouble: 0,
upmapstyle: {
lineHeight: '50px',
textAlign: 'center',
width: '30px',
height: '50px',
right: '30%',
top: '200px',
position: 'absolute',
zIndex: '9999',
backgroundColor: '#FFFFFF',
borderTop: '1px solid #ededed',
borderLeft: '1px solid #ededed',
borderBottom: '1px solid #ededed',
cursor: 'pointer'
},
mapstyle: {
width: '69%',
height: '1260px',
float: 'left',
fontFamily: '宋体'
}
};
},
created () {
this.tableData = BASEDATA
this.mediaCount = 0
if ( this.tableData.length > 0) {
for (var i = 0; i < this.tableData.length; i++) {
this.mediaCount += parseInt(this.tableData[i].fcount)
}
} else {
this.mediaCount = 0
this.tableData = []
}
},
methods: {
left () {
this.clickDouble++;
if (this.clickDouble % 2 === 0) {
this.arrow = 'el-icon-d-arrow-right';
this.leftWidht = '30%';
this.mapstyle.width = '69%';
this.upmapstyle.right = '30%';
} else {
this.arrow = 'el-icon-d-arrow-left';
this.leftWidht = '0px';
this.mapstyle.width = '100%';
this.upmapstyle.right = '0px';
}
}
},
computed: {
conditions () {
var selectCondition = this.selectCondition
if (selectCondition) {
return this.tableData.filter(data => {
return Object.keys(data).some(key => {
return String(data[key]).toLowerCase().indexOf(selectCondition) > -1
})
})
}
return this.tableData
}
}
});
var map;
newMap();
</script>
<style type="text/css">
.info_alert{
background-color: #e6f7ff;
color: #32b0ff;
.text{
color: #646464
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</html>
6.地图如图
