地理坐标组件

自定义地图(eg:在吉林省地图上添加公主岭、梅河口)

 

1、不采用echarts 默认的js,json 数据

2、使用 geojson(网址:http://geojson.io/#map=8/43.127/123.992

3、Geojson 数据格式:

{

  "type": "FeatureCollection",

  "features": [

    {

      "type": "Feature",

      "properties": {}, 注明所画城市

      "geometry": {

        "type": "Polygon",

        "coordinates": [

          [

            [

              123.98345947265624,

              43.94537239244209

            ],

            [

              123.93402099609374,

              43.65594991256823

            ],

            [

              124.58221435546875,

              43.305193797650546

            ],

            [

              125.06011962890624,

              43.45291889355465

            ],

            [

              125.0958251953125,

              43.765143524274066

            ],

            [

              124.45312499999999,

              43.96119063892024

            ],

            [

              123.98345947265624,

              43.94537239244209

            ]

          ]

        ]

      }

    }

  ]

}

4、Coordinates, properties[cp]  在注册地图之前转换成json格式

for ( var i = 0; i < res. data. features. length; i++) {
if ( res. data. features[ i]. geometry. coordinates != "") {
res. data. features[ i]. geometry. coordinates = JSON. parse( res. data. features[ i]. geometry. coordinates);
}
if ( res. data. features[ i]. properties. cp != "") {
res. data. features[ i]. properties. cp = JSON. parse( res. data. features[ i]. properties. cp);
}
}

实例代码:vue  echarts 地图组件

< template >
< div >
< div :style="{width: '90%',height: height,}" class= "map" ref= "myEchart" ></ div >
</ div >
</ template >
< script >
import api from '@/fetch/api'
import echarts from 'echarts'
export default {
props: {
areaCode: {
type: String,
default: "22"
},
max: {
type: String,
default: '500'
},
mapData: {// geo.json数据
type: Object,
default: []
},
list: {
type: Array,
default: []
},
height: {
type: String,
default: document. documentElement. clientHeight- 320+ 'px'
}
},
data() {
return {
chart: null,
chartData: [],
option: {
title : {
left: 'center',
textStyle:{
fontSize: 16,
}
}
},
}
},
mounted() {
this. initChart();
},
methods: {
initChart() { // 初始化
this. chart = echarts. init( this. $refs. myEchart);
this. getAreaMapInfoList();
},
getAreaMapInfoList () { // 获取地图数据
for( var i= 0; i< this. mapData. features. length; i++ ){
let name = this. mapData. features[ i]. properties. name;
let code = this. mapData. features[ i]. properties. code;
let cp = this. mapData. features[ i]. properties. cp;
var totalCount = 0;
for( var j= 0; j< this. list. length; j++ ){
if( this. list[ j]. code == code){
totalCount = this. list[ j]. entNum;
break;
}
}
this. chartData. push({
name: name,
value: cp. concat( totalCount),
code: code
});
}
//注册地图
echarts. registerMap( 'jilin', this. mapData);
this. renderMap( 'jilin', this. chartData);
},
renderMap( map, data){ //绘制地图
this. option. title. subtext = "";
//地理坐标系组件
this. option. geo = { //引入地图 ,渲染地图凹凸显示
map: map,
label: {
normal: {
show: true,
color: '#fff'
},
emphasis: {
show: false,
color: '#fff'
}
},
roam: false, //禁止缩放
zoom: 1,
itemStyle: {
normal: {
borderColor: '#387ba7', //地图边界线的颜色
areaColor: '#1c3c63', //地图整体区域的颜色
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
areaColor: '#132845' //鼠标滑过的颜色
}
}
},
// 地图标点
this. option. series = [
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //关系图节点标记的图形
symbolSize: [ 30, 30],
symbolOffset: [ 0, '-40%'], //关系图节点标记相对于原本位置的偏移。[0, '50%']
large : true,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle : { //===============图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
normal : { //默认样式
label : {
show : true
},
borderType : 'solid', //图形描边类型,默认为实线,支持 'solid'(实线), 'dashed'(虚线), 'dotted'(点线)。
borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
borderWidth : 2, //图形的描边线宽。为 0 时无描边。
opacity : 1
// 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5

},
emphasis : { //高亮状态

}
},
lineStyle : { //==========关系边的公用线条样式。
normal : {
color : 'rgba(255,0,255,0.4)',
width : '3',
type : 'dotted', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)
curveness : 0.3, //线条的曲线程度,从0到1
opacity : 1
// 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5
},
emphasis : { //高亮状态

}
},
label : { //=============图形上的文本标签
normal : {
show : true, //是否显示标签。
position : 'inside', //标签的位置。['50%', '50%'] [x,y]
textStyle : { //标签的字体样式
color : '#cde6c7', //字体颜色
fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily : 'sans-serif', //文字的字体系列
fontSize : 12, //字体大小
}
},
emphasis : { //高亮状态

}
},
edgeLabel : { //==============线条的边缘标签
normal : {
show : false
},
emphasis : { //高亮状态

}
},

zlevel: 12,
data: data,
}
];
//渲染地图
this. chart. setOption( this. option);
}
}
}
</ script >


结果图:

 

Logo

前往低代码交流专区

更多推荐