RuoYi vue-element-admin 增长原生高德地图并显示海量点
一、在public/index.html中增长js引用
记得放到head中javascript
<!-- 引入高德地图API --> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=1edb3d323fb05a961b3321111111ddff145"></script>
二、vue.config.js 增长配置内容
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
}
三、要引用地图的页面
要显示地图的divcss
<!-- 显示地图的div -->
<div id="mapDiv" ref="mapDiv" class="mapDiv">
loading...
</div>
引用AMaphtml
import AMap from 'AMap'
初始化地图 vue
// 初始化地图
initMap() {
const map = new AMap.Map('mapDiv', {
center: [120.56587, 36.20366],
resizeEnable: true,
zoom: 12
// lang: 'en'
})
this.map = map
// 地图添加各类控件
AMap.plugin(['AMap.ControlBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar())
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType())
// 在图面添加定位控件，用来获取和展现用户主机所在的经纬度位置
// map.addControl(new AMap.Geolocation())
// 在图面添加比例尺控件，展现地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale())
})
// 海量点的样式
var style = [{
// 必填参数,图标的地址
url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
// 必填参数，图标显示位置偏移量，以图标的左上角为基准点（0,0）点，例如：anchor:new AMap.Pixel(5,5)
anchor: new AMap.Pixel(6, 6),
// 必填参数，图标的尺寸；例如：size:new AMap.Size(11,11)
size: new AMap.Size(11, 11)
},
// 红色 未除治
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
},
// 绿色 已经除治
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
},
// 灰色之前的数据
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
}]
this.mass = new AMap.MassMarks(null, {
// 图层的透明度，取值范围[0,1]，1表明彻底不透明，0表明彻底透明
opacity: 0.6,
// 图层叠加的顺序值，0表示最底层。默认zIndex：5
zIndex: 111,
// 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
cursor: 'pointer',
style: style,
// 表示是否在拖拽缩放过程当中实时重绘，默认true，建议超过10000的时候设置false
alwaysRender: false
})
// 鼠标悬浮 弹出窗口
var marker = new AMap.Marker({ content: ' ', map: map })
this.mass.on('mouseover', function(e) {
marker.setPosition(e.data.lnglat)
marker.setLabel({ content: e.data.name })
})
// 海量点绑定到地图上
this.mass.setMap(map)
},
附：整个vue代码 java
<template>
<div class="app-container">
<!-- 搜索工具栏 -->
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
<el-form-item label="" prop="deptId">
<!-- <treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择归属部门" /> -->
<treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="归属区域" clearable size="small" style="width: 180px" />
</el-form-item>
<el-form-item label="" prop="compart">
<el-input
v-model="queryParams.compart"
placeholder="请输入小班编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="markSn">
<el-input
v-model="queryParams.markSn"
placeholder="请输入疫木编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="" prop="deptId">
<el-input
v-model="queryParams.deptId"
placeholder="请输入部门ID"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="" prop="treeStatus">
<el-select v-model="queryParams.treeStatus" placeholder="疫木除治状态" clearable size="small">
<el-option
v-for="dict in treeStatusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="markOperate">
<el-input
v-model="queryParams.markOperate"
placeholder="请输入定标操做人"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="markTime">
<el-date-picker
v-model="queryParams.beginTime"
clearable
size="small"
style="width: 200px"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
</el-form-item>
<el-form-item label="" prop="markTime">
<el-date-picker
v-model="queryParams.endTime"
clearable
size="small"
style="width: 200px"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束时间"
/>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 显示地图的div -->
<div id="mapDiv" ref="mapDiv" class="mapDiv">
loading...
</div>
</div>
</template>
<script>
import AMap from 'AMap'
import { listMarkAll } from '@/api/tree/mark'
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import tdtmap from '@/utils/tdt-map'
export default {
name: 'Mark',
components: { Treeselect },
data() {
return {
baseURL: process.env.VUE_APP_BASE_API,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 定标信息表格数据
markList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 部门树选项
deptOptions: undefined,
// 疫木状态字典
treeStatusOptions: [],
// 定标标志字典
markFlagOptions: [],
// 除治标志字典
sealedFlagOptions: [],
// 定标类型字典
markTypeOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
markSn: null,
deptId: null,
treeStatus: null,
compart: null,
diam: null,
markPic1: null,
markPic2: null,
markPic3: null,
markPic4: null,
markOperate: null,
markTime: null,
markUploadTime: null,
markFlag: null,
markRemark: null,
operate: null
},
// 表单参数
form: {},
// 地图对象
map: '',
mass: '',
infowindowL: null // 信息窗体
}
},
created() {
this.getList()
this.getTreeselect()
this.getDicts('tree_status').then(response => {
this.treeStatusOptions = response.data
})
this.getDicts('work_flag').then(response => {
this.markFlagOptions = response.data
this.sealedFlagOptions = response.data
})
this.getDicts('mark_type').then(response => {
this.markTypeOptions = response.data
})
},
mounted() {
this.initMap()
},
methods: {
/** 查询疫木位置列表 */
getList() {
this.loading = true
listMarkAll(this.queryParams).then(response => {
// 查询到的列表
this.markList = response.rows
// 查询到的总数
this.total = response.total
this.loading = false
// 处理接收到的数据
this.markPoint(this.markList)
})
},
// 疫木状态字典翻译
treeStatusFormat(row, column) {
return this.selectDictLabel(this.treeStatusOptions, row.treeStatus)
},
// 定标类型字典翻译
markTypeFormat(row, column) {
return this.selectDictLabel(this.markTypeOptions, row.markSelf)
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
this.deptOptions = response.data
})
},
// 定标标志字典翻译
markFlagFormat(row, column) {
return this.selectDictLabel(this.markFlagOptions, row.markFlag)
},
// 除治标志字典翻译
sealedFlagFormat(row, column) {
return this.selectDictLabel(this.sealedFlagOptions, row.sealedFlag)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
/** 搜索按钮操做 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操做 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 初始化地图
initMap() {
const map = new AMap.Map('mapDiv', {
center: [120.56587, 36.20366],
resizeEnable: true,
zoom: 12
// lang: 'en'
})
this.map = map
// 地图添加各类控件
AMap.plugin(['AMap.ControlBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar())
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType())
// 在图面添加定位控件，用来获取和展现用户主机所在的经纬度位置
// map.addControl(new AMap.Geolocation())
// 在图面添加比例尺控件，展现地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale())
})
// 海量点的样式
var style = [{
// 必填参数,图标的地址
url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
// 必填参数，图标显示位置偏移量，以图标的左上角为基准点（0,0）点，例如：anchor:new AMap.Pixel(5,5)
anchor: new AMap.Pixel(6, 6),
// 必填参数，图标的尺寸；例如：size:new AMap.Size(11,11)
size: new AMap.Size(11, 11)
},
// 红色 未除治
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
},
// 绿色 已经除治
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
},
// 灰色之前的数据
{
url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
}]
this.mass = new AMap.MassMarks(null, {
// 图层的透明度，取值范围[0,1]，1表明彻底不透明，0表明彻底透明
opacity: 0.6,
// 图层叠加的顺序值，0表示最底层。默认zIndex：5
zIndex: 111,
// 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
cursor: 'pointer',
style: style,
// 表示是否在拖拽缩放过程当中实时重绘，默认true，建议超过10000的时候设置false
alwaysRender: false
})
// 鼠标悬浮 弹出窗口
var marker = new AMap.Marker({ content: ' ', map: map })
this.mass.on('mouseover', function(e) {
marker.setPosition(e.data.lnglat)
marker.setLabel({ content: e.data.name })
})
// 海量点绑定到地图上
this.mass.setMap(map)
},
markPoint(pointData) {
// this.initMap()
var len = pointData.length
console.log('收到数据，开始处理数据，树木信息数量 ：' + len)
var lnglat1 = []
// {"lnglat":[116.258446,37.686622],"name":"景县","style":2}
for (var i = 0; i < len; i++) {
var tree1 = { 'lnglat': [pointData[i].lng, pointData[i].lat], 'name': pointData[i].markSn, 'style': pointData[i].treeStatus }
// 坐标转换
// AMap.convertFrom(tree1.lnglat, 'gps', function(status, result) {
// if (result.info === 'ok') {
// var resLnglat = result.locations[0]
// tree1.lnglat = resLnglat
// }
// })
lnglat1.push(tree1)
}
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
console.log('数据处理完毕，进入绘制')
// 清理位置信息
this.mass.clear()
// 绑定新的位置信息
this.mass.setData(lnglat1)
console.log('数据绘制完毕')
} else {
alert('此示例目前只有在IE9及以上浏览器打开')
}
}
}
}
</script>
<style scoped>
.mapDiv{
width: 100%;
height: 80vh;
}
</style>
最终显示效果node