前端地图【Map】的基本使⽤【echarts、百度API、geoJson格式和echarts】前端中地图的基本使⽤
1、 geoJSON 格式⽣成地图【后端返回的坐标数据】
实现步骤：
1、引⼊Echarts
2、使⽤地图数据
3、注册地图数据
4、初始化Echarts并设置option
<script>
import*as echarts from"echarts";
export default{
data(){
return{
mapChart:null,
tooltipData:'访问量为：20',
};
},
mounted(){
},
methods:{
init(){
// 基于准备好的dom，初始化echarts实例
this.mapChart = echarts.ElementById("map"));
// 配置地图展⽰信息
this.mapChart.setOption({
backgroundColor:"#FFF",//背景颜⾊
// 提⽰框，⿏标移⼊或点击的提⽰框
tooltip:{
show:true,
trigger:"item",
showContent:true,
triggerOn:"click",
backgroundColor:'#6950a1',
textStyle:{
color:'#fffffb',
},
// 设置⽂本提⽰内容
formatter:(params)=>{// 若要访问 data中的数据则要⽤箭头函数
return params.name +' <br/>'+ltipData
},
},
//配置地图的数据，并且显⽰
series:[
{
name:"河南",
type:"map",//地图种类
map:"henan",//地图类型。此名称要和注册时命名的地图名称⼀致
roam:true,//允许缩放和平移
//初始化时的地图位置，可通过改变地图中⼼视⾓的经纬度来实现地图的平移
center:[113.665412,34.757975],
zoom:0.8,//地图缩放多少倍
selectedMode:true,//点击区域，会处于选中状态，多选
label:{// 设置地图区域⽂本
normal:{
show:true,//显⽰地区的⽂本名称，默认是不显⽰的，默认状态是hover或click才显⽰
fontSize:14,// 字体⼤⼩
fontFamily:"微软雅⿊",// 字体类型
fontWeight:"none",// 是否加粗
fontWeight:"none",// 是否加粗
position:"center",//位置
},
},
itemStyle:{
//地图区域的多边形图形样式
normal:{
areaColor:"#2a5caa",//地图区域颜⾊
borderColor:"#afb4db",//图形的描边颜⾊
borderWidth:1,//描边线宽。为 0 时⽆描边                borderType:"solid",// 边框样式
opacity:0.6,// 透明度
},
},
},
],
});
},
getMapData(){
// 发送请求向后端拿取要要显⽰的地图 geoJson 数据this.$("/mapData").then((res)=>{
const{ code, data }= res;
if(code ===0&& data){
// 注册地图数据
//绘制地图
this.init();
}
});
},
},
};
</script>
效果：
"properties":{
"adcode":130000,
"name":"河北省",
"cp":[114.432461,38.445474],// 城市中⼼坐标，城市⽂本按照此属性分布
"center":[114.502461,38.045474],
"childrenNum":11,
"level":"province",
"parent":{
"adcode":100000
},
"subFeatureIndex":2,
"acroutes":[100000]
},
获取地图坐标数据⼯具：
获取⾏政划分地图⽹站
⼿动绘制图形获取GeoJson数据
2、利⽤Echarts⾃带的map库⽣成地图
步骤：
1、引⼊echarts
2、引⼊map库中的地图 【echarts 5.0 以上取消了map库】
3、绘制地图
<template>
百度api接口
<div>
<div ref="echarts" ></div>
</div>
</template>
<script>
import echarts from'echarts'
import'../node_modules/echarts/map/js/china'// 引⼊中国地图
export default{
data(){
return{
myChart:null,// echatts对象
chartData:[// 详情⾯板的⽂本
{ name:'河南', listed:25,profit:300,cancellation:2},
{ name:'北京', value:254},
{ name:'上海', value:2}
],
}
},
computed:{},
created(){},
mounted(){
this.init()
},
methods:{
init(){
tooltip:{// 提⽰框信息配置
triggerOn:"click",// 触发⽅式
trigger:'item',// 对象
formatter:(params)=>{// 格式化提⽰框信息。若要访问 data中的数据则要⽤箭头函数
return`地域：${params.name} <br/>
在营企业：${this.chartData.find(item => item.name === params.name)?.value ??0}<br/>
上市企业：${this.chartData.find(item => item.name === params.name)?.profit ??0}<br/>
注销企业：${this.chartData.find(item => item.name === params.name)?.cancellation ??0}
注销企业：${this.chartData.find(item => item.name === params.name)?.cancellation ??0}                        `
}
},
series:[// 配置地图
{
type:'map',// 类型
mapType:'china',// 地图名称，要和引⼊的地图名⼀致
roam:true,// 是否开启⿏标缩放和平移漫游
label:{// 地图省份模块配置
normal:{ show:true},// 是否显⽰省份名称
position:'right',// 显⽰位置
},
emphasis:{// ⾼亮状态下的多边形和标签样式。
label:{
show:true,// 是否显⽰标签。
},
},
data:this.chartData,// 提⽰框的数据源
},
],
})
},
},
filter(){},
watch:{},
}
</script>
<style lang="less" scoped>
</style>
效果：
3、利⽤百度的API接⼝直接绘制
步骤：
1、申请百度地图接⼝权限【百名单⽤ * 是匹配全部地址】
2、在项⽬中的sercipt属性中引⽤
3、参考详解配置即可实现
// nuxt.js 的配置
script:[{src:'api.map.baidu/api?v=1.0&type=webgl&ak=⾃⼰的秘钥'}], <template>
<div>
<div ref="center"class="wrap"></div>
</div>
</template>
<script>
export default{
data(){
return{};
},
mounted(){
this.init()
},
methods:{
init(){
let map =new BMapGL.Map(this.$);// 创建地图实例
let point =new BMapGL.Point(116.404,39.915);// 创建点坐标
},
},
};
</script>
<style lang="less" scoped>
.wrap {
width:100%;
height:2000px;
}
</style>
效果：
4、利⽤百度地图 + echarts
步骤：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。