1、在public/index.html中增加js引用
记得放到head中
-
<!-- 引入高德地图API -->
-
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=1edb3d323fb05a961b3321111111ddff145"></script>
2、vue.config.js 增加配置内容
-
externals: {
-
'AMap':
'AMap',
-
'AMapUI':
'AMapUI'
-
}
3、要引用地图的页面
要显示地图的div
-
<!-- 显示地图的div -->
-
<div id="mapDiv" ref="mapDiv" class="mapDiv">
-
loading...
-
</div>
引用AMap
import AMap from 'AMap'初始化地图
-
// 初始化地图
-
initMap() {
-
const map =
new AMap.Map(
'mapDiv', {
-
center: [
120.56587,
36.20366],
-
resizeEnable:
true,
-
zoom:
12
-
// lang: 'en'
-
})
-
this.map = map
-
-
// 地图添加各种控件
-
AMap.plugin([
'AMap.ToolBar',
'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代码
-
<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.ToolBar',
'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>
-
最终显示效果
转载：https://blog.csdn.net/u010299411/article/details/109831592
查看评论