工作记录
echarts地图:
默认安装了echarts和引入四川的地图json
getShowMan为地图数据返回接口，数据格式：[{name:" “,value:” "}]
<template>
<div class="app-container">
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import sichuan from '@/utils/map/510000.json'
import {getShowMan} from "xxxxxxxx.js";
let oldMenList = []
export default {
name: "elderlymap",
data() {
return {
};
},
methods: {
init() {
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
myChart.hideLoading();
echarts.registerMap("四川", sichuan);
myChart.setOption(
(option = {
tooltip: {
trigger: "item",
formatter: function (parmas) {
return `${parmas.data.name}</br>${parmas.data.value} (人)`
},
},
series: [
{
name: "老人分布地图",
type: "map",
map: "四川",
label: {
show: true,
},
itemStyle: {
normal: {
borderWidth: 2,//边际线大小
borderColor: '#E04747',//边界线颜色
areaColor: '#FCF9F2'//默认区域颜色
}
},
selectedMode: 'single',
data: oldMenList,
// 自定义名称映射
},
],
})
);
if (option && typeof option === "object") {
myChart.setOption(option);
}
myChart.on("click", (params) => {
//传参城市名
let datas = {name: params.data.name}
this.$router.push({
path: '/leadersys/overviewoftheelderly/oldManSize',
query: {
...datas
}
})
})
},
handleChange(value) {
this.regionCode = value[value.length - 1];
},
},
mounted() {
//初始化地图事件
getShowMan({regionCode: '510000000000'}).then(res => {
oldMenList = res.map(ele => {
return {name: ele.cityName, value: ele.number}
})
this.init()
})
},
};
</script>
<style scoped>
#main {
height: calc(100vh - 122px);
background-color: #e1eef4;
}
.amap-wrapper {
width: 75%;
height: 70vh;
}
</style>
成品：
点击echarts地图某市，高德地图跳转到对应位置，并且显示海量点标志和信息窗体
默认安装了vue-amap，vue-amap用于引入高德地图， lazyAMapApiLoaderInstance.load()定制化地图（即不用vue-amap的api，用高德的api）
<template>
<div class="app-container">
<div style="display: flex; margin-top: 0px">
<div class="amap-wrapper">
<!-- 引入高德地图 -->
<el-amap vid="amapContainer"></el-amap>
</div>
<div class="querys">
<p>当前位置：<span class="font_color">{{ mapAdress }}</span></p>
<p>当前城市有: <span class="font_color">{{ total }} 人</span></p>
<el-form :model="form">
<el-form-item label="性别：" v-model="form.sex">
<el-radio-group v-model="form.sex">
<el-radio label="0">全部</el-radio>
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄段：">
<el-input-number v-model="form.startAge"></el-input-number>
至
<el-input-number v-model="form.endAge"></el-input-number>
</el-form-item>
<el-form-item label="老人类型：" prop="oldManType">
<el-select v-model="form.oldManType" placeholder="请选择">
<el-option
v-for="item in region"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div style="width: 20%;margin: 0 auto;">
<el-button type="primary" icon="el-icon-search" size="mini" @click.native="query">查询</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import {lazyAMapApiLoaderInstance} from "vue-amap";
//引入地图数据接口
import {getOldMapList} from "xxxxxxx";
let map = null;
export default {
name: "elderlymap",
data() {
return {
// rules: {
// selectValue: [
// { required: true, message: '请输入活动名称', trigger: 'blur' },
// ],
// },
form: {
sex: '0',
startAge: "",
endAge: "100",
oldManType: '',
},
region: [
{
label: '能力完好',
value: '01'
},
{
label: '完全失能',
value: '02'
},
{
label: '部分失能',
value: '03'
},
{
label: '残疾',
value: '05'
},
{
label: '优抚',
value: '06'
},
{
label: '其他',
value: '99'
},
],
latlng: [],
total: 0,
mapAdress: '',
InfoWindows: null,
};
},
methods: {
//查询框查询参数
query() {
let [value,values]=[this.form,{...this.form}]
if (value.sex == '0') {
delete values.sex
}
this.clearMarker();
this.getLists(values)
},
getLists(values) {
let [_this, lists] = [this, []]
let params = Object.assign({city: this.mapAdress}, values)
getOldMapList(params).then(res => {
this.total = res.data.count
//数据为空时结束方法
let condition = JSON.stringify(res.data.pages)
if (condition == "[]") {
return
}
//lists包括海星点的经纬度和该点的信息
res.data.pages.forEach(element => {
if (element.longitude == null && element.latitude == null) {
return
} else {
lists.push({
lnglat: [element.longitude, element.latitude],
oldManId: element.oldManId,
name: element.name,
phoneNumber: element.phoneNumber,
sex: element.sex,
age: element.age,
liveAddress: element.liveAddress,
})
}
})
_this.logins(lists)
})
},
logins(list) {
//海星点
this.mass = new AMap.MassMarks(list, {
opacity: 0.8,
zIndex: 111,
cursor: "pointer",
style: {
url: require("@/assets/images/img/rjzl.png"), // 图标地址
size: new AMap.Size(22, 22), // 图标大小
anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
}
});
//鼠标移到海星点显示信息窗体
this.mass.on("mouseover", e => {
//向信息窗体传参
this.infoWindow.setContent(
this.createInfoWindow(
e.data.name,
e.data.phoneNumber,
e.data.sex == '1' ? '男' : '女',
e.data.age,
e.data.liveAddress,
)
);
this.infoWindow.open(map, e.data.lnglat);
});
//鼠标离开海星点清除信息窗体
this.mass.on("mouseout", e => {
map.clearInfoWindow();
});
this.mass.setMap(map);
},
//自定义信息窗体，这里的图片只能用网络地址
createInfoWindow(name, phone, sex, age, adders, url) {
let info = `<div class="king-message-boxs">
<div class="king-message-box__header" style="display:none;">
<button type="button" class="king-message-box__headerbtn">
<span class="king-message-box__close king-icon-close" ></span>
</button>
</div>
<div class="king-message-box__content">
<div class="king-left">
<img src="${url}" alt="">
</div>
<div class="king-right">
<p><span class="king-text">名字：</span><span>${name}</span></p>
<p><span class="king-text">电话：</span><span>${phone}</span></p>
<p><span class="king-text">性别：</span><span>${sex}</span></p>
<p><span class="king-text">年龄：</span><span>${age}</span></p>
<p><span class="king-text">地址：</span><span>${adders}</span></p>
</div>
</div>
</div>
<div style="text-align:center"><img src="https://webapi.amap.com/images/sharp.png";> </div>
`;
return info;
},
//清楚海星点和信息窗体
clearMarker() {
if (this.mass) {
map.remove(this.mass);
map.clearInfoWindow();
}
}
},
mounted()
this.mapAdress = this.$route.query.name
let adress=this.mapAdress
//lazyAMapApiLoaderInstance定制地图参数
lazyAMapApiLoaderInstance.load().then(() => {
map = new AMap.Map("amapContainer");
//坐标系转换
map.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: adress,
})
//根据城市的经纬度显示地图
geocoder.getLocation( adress, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
map.setCenter([result.geocodes[0].location.lng, result.geocodes[0].location.lat],true)
map.setZoom(10)
}
})
})
//创建自定义窗体
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(),
offset: new AMap.Pixel(20, 0)
});
});
this.query()
},
};
</script>
<style scoped>
.amap-wrapper {
width: 75%;
height: 90vh;
}
.font_color {
color: #fc011a;
font-size: 1.1rem;
}
.dotclass {
width: 100px;
height: 100px;
background: #0b66d4;
}
</style>
<style>
.king-message-boxs {
margin: 0;
padding: 10px 5px;
box-sizing: border-box;
width: 420px;
min-height: 60px;
position: relative;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
text-align: left;
backface-visibility: hidden;
}
.king-message-box__header {
position: relative;
padding: 5px 10px;
box-sizing: border-box;
}
.king-message-box__headerbtn {
position: absolute;
top: 3px;
right: 15px;
padding: 0;
border: none;
outline: none;
background: transparent;
cursor: pointer;
}
.king-icon-close {
color: #909399;
line-height: 1;
vertical-align: baseline;
display: inline-block;
font-size: 20px;
}
.king-message-box__content {
padding: 10px;
box-sizing: border-box;
color: #606266;
font-size: 1rem;
display: flex;
align-items: center;
}
.king-left {
width: 40%;
}
.king-left p {
margin: 5px 0;
}
.king-left p .king-text {
min-width: 80px;
display: inline-block;
}
.king-right {
width: 70%;
text-align: left;
}
.king-right img {
width: 60px;
height: 60px;
}
.king-btn {
margin-top: 10px;
}
.querys {
width: 20%;
height: 95%;
margin: 0 auto;
}
</style>
成品：
