前言
自定义地图很麻烦,需要各种网上找资源,csdn这个坑爹货,把这些地图资源的积分抬得老高,动不动就是四五十个积分。不过幸好,我们还有个马爸爸。
阿里的开源做的相当棒,所以在此我们需要感谢阿里的开发者们,今天在公司大佬的指点下,我打开了 地图选择器,这是一个可以随心所以选择下载地图json数据的网站,地图的精确度也比网上那些贵的死的资源包要高。于是,我一时激动,写下了这片文章。
现在话不多说,开始教大家随心所欲的实现想要展示的地图;
------更新了一下地图代码
先给看效果
黔西南地图
第一步:下载地图资源
我们进入到 地图选择器 里边,会发现有个大地图可以点击以及缩放,选择我们想要的地图,然后左下角进行下载;经过我的测试这个地图是可以通过使用echarts.registerMap这个api进行加载的;文件命名什么的,就随便各位来做了;比如我现在随便下载一个贵州省黔西南州的地图,命名 “黔西南布依族苗族自治州.json”
第二步:对地图资源进行注册
我们需要准备一个地图导出文件,因为react下载的echarts包这边遵循的AMD规范,所以我们也需要准备一个关于echarts的AMD导出规范文件;
导出文件代码文件名 myMap.js
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
})(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log('ECharts is not Loaded');
return;
}
if (!echarts.registerMap) {
log('ECharts Map is not loaded');
return;
}
// 获取黔西南州地图数据
// let json = require('../geometryCouties/522300.json');
// let json = require('../GeoJSON/522300_full.json');
let json = require('./黔西南布依族苗族自治州.json');
// 注册地图
echarts.registerMap('黔西南州', json);
});
第三步:react渲染地图
下载安装echarts包这些操作应该不需要我多说什么吧,下面直接上react代码
配置title
配置地图
配置城市坐标(城市坐标可以去上面地图json文件里去找)
import React from 'react';
import echarts from 'echarts/lib/echarts';
import './myMap.js';
const scatterData = [
{ name: '兴义市', value: [104.897982, 25.088599] },
{ name: '安龙县', value: [105.471498, 25.108959] },
{ name: '兴仁市', value: [105.192778, 25.431378] },
{ name: '普安县', value: [104.955347, 25.786404] },
{ name: '晴隆县', value: [105.218773, 25.832881] },
{ name: '贞丰县', value: [105.650133, 25.385752] },
{ name: '望谟县', value: [106.091563, 25.166667] },
{ name: '册亨县', value: [105.81241, 24.983338] },
];
const option = {
title: {
text: '黔西南州',
subtext: '兴义市',
left: 'center',
},
geo: {
map: '黔西南州',
roam: false,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0090fe', //边框颜色
areaColor: '#003399', //地图区域颜色
},
emphasis: {
show: 'true',
borderWidth: 4,
borderColor: '#b2163c', //边框颜色
areaColor: '#531f67', //鼠标移上去的颜色
},
},
label: {
normal: {
color: '#fff',
fontWeight: 'bold',
show: true,
},
emphasis: {
color: '#fff',
fontWeight: 'bold',
show: true,
},
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: scatterData,
symbolSize: 16, //点的尺寸
symbol: 'circle',
color: '#00ff00',
},
],
};
/**
* 地图
*/
class Maps extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let myChart = echarts.init(document.getElementById('Box'));
myChart.setOption(option);
}
render() {
return (
<div>
<div id="Box" style={{ height: '500px' }} />
</div>
);
}
}
export default Maps;
vue渲染地图
<template>
<div class="box absolute" ref="box">
<!-- 图表 -->
<div id="myMap"></div>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts';
import './myMap.js';
const scatterData = [
{ name: '兴义市', value: [104.897982, 25.088599] },
{ name: '安龙县', value: [105.471498, 25.108959] },
{ name: '兴仁市', value: [105.192778, 25.431378] },
{ name: '普安县', value: [104.955347, 25.786404] },
{ name: '晴隆县', value: [105.218773, 25.832881] },
{ name: '贞丰县', value: [105.650133, 25.385752] },
{ name: '望谟县', value: [106.091563, 25.166667] },
{ name: '册亨县', value: [105.81241, 24.983338] },
];
export default {
data(){
return {
myData: [],
}
},
mounted(){
// 绘制地图
this.drawLine(this.myData);
},
methods:{
// 绘制地图
// @params data string 自定义构建数据
drawLine(chartData){
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myMap'))
// 绘制图表
myChart.setOption({
title: {
text: '黔西南州',
subtext: '兴义市',
left: 'center',
},
geo: {
map: '黔西南州',
roam: false,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0090fe', //边框颜色
areaColor: '#003399', //地图区域颜色
},
emphasis: {
show: 'true',
borderWidth: 4,
borderColor: '#b2163c', //边框颜色
areaColor: '#531f67', //鼠标移上去的颜色
},
},
label: {
normal: {
color: '#fff',
fontWeight: 'bold',
show: true,
},
emphasis: {
color: '#fff',
fontWeight: 'bold',
show: true,
},
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: scatterData,
symbolSize: 16, //描点的尺寸
symbol: 'circle',
color: '#00ff00',
},
],
});
},
}
}