echart+百度地图
最近使用echart在地图上绘制散点图，总结一下，防止以后忘记。
注意：使用了django框架，如果使用其他技术，需要修改路径。
引入文件
echart
<script src="js/echarts.js"></script>
百度地图扩展
<script src="js/bmap.js"></script>
百度地图api
<script src="http://api.map.baidu.com/api?v=2.0&ak=#{在百度地图开放平台申请的ak}"></script>
使用方式
ECharts 将百度地图部分配置集成在了 bmap 中，包括：
| 参数 | 说明 | 格式 |
|---|---|---|
| center | 中心点的百度坐标 | 坐标数组, 如：[116.307698, 40.056975] |
| zoom | 初始缩放比 | number |
| roam | 是否允许用户缩放操作 | boolean |
| mapStyle | 地图自定义样式 | object, 如：{ styleJson: […] } |
自定义百度地图样式
地图的样式配置 bmap.mapStyle 中 styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中 定制个性地图章节的介绍。
var option = {
bmap: {
center: [116.307698, 40.056975],
zoom: 5,
roam: true, // 允许缩放
mapStyle: { // 百度地图自定义样式
styleJson: [
// 陆地
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#073763"
}
},
// 水系
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#073763",
"lightness": -54
}
},
// 国道与高速
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"color": "#45818e"
}
},
// 边界线
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#ffffff",
"lightness": -62,
"visibility": "on"
}
},
// 行政标注
{
"featureType": "label",
"elementType": "labels.text.fill",
"stylers": {
"color": "#ffffff",
"visibility": "on"
}
},
{
"featureType": "label",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#444444",
"visibility": "on"
}
}
]
}
},
...
}百度地图api
除了上述四个配置，其他地图设置都可以通过 百度地图提供的API 实现
获取百度地图实例：
var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地图实例
bmap.addControl(new BMap.NavigationControl()); // 缩放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺var bmap = bmapCharts.getModel().getComponent(‘bmap’).getBMap(); // 百度地图实例
<!DOCTYPE html>{% load static %}
<html>
<body>
<div id="echarts-records" style="width: 1000px;height:500px"></div>
<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=#{在百度地图开放平台申请的ak}"></script>
<script src="{% static 'js/echarts.js'%}"></script>
<!-- 引入百度地图扩展 -->
<script src="{% static 'js/bmap.js'%}"></script>
<script>
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
var data = [];
var geoCoordMap = {};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value[0].value)
});
}
}
return res;
};
option = {
backgroundColor: 'transparent',
title: {
text: '数据统计',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function(params, ticket, callback){//定制提示信息
var toolTiphtml = ''
var point = new BMap.Point(params.data.value[0],params.data.value[1]);
gc.getLocation(point, function (rs) {//根据经纬度获取地址信息
var address = rs.address;
for(var i = 0;i<data.length;i++){
if(params.name==data[i].name){
toolTiphtml += address+':<br>'
for(var j = 0;j<data[i].value.length;j++){
toolTiphtml+=data[i].value[j].name+': '+data[i].value[j].value+"<br>"
}
callback(ticket, toolTiphtml);//异步回掉获取提示信息
}
}
});
return 'loading';//内容还没返回时显示的内容
}
},
bmap: {
center: [104.114129, 37.550339],
//mapType: 'china',
zoom: 5,// 百度地图缩放等级，数字越大，放大越大，地图比例尺越小
roam: 'move', // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move' true
mapStyle: {//地图样式，参考https://developer.baidu.com/map/custom/
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
}
},
series : [
{
name: 'Net capacity',
//type: 'scatter',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data),
encode: {
value: 2
},
symbolSize: function (val) {
return val[2] / 700;
},
label: {
formatter: '{b}',
position: 'right',
fontSize :20
},
itemStyle: {
color: '#ddb926'
},
emphasis: {
label: {
show: true
}
}
},
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
};
echartsRecords.setOption(option);
// 获取百度地图实例
var bmap = echartsRecords.getModel().getComponent('bmap').getBMap();
//使用百度地图自带的控件
//bmap.addControl(new BMap.MapTypeControl());
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
bmap.addControl(top_left_control)
bmap.addControl(top_left_navigation)
var gc = new BMap.Geocoder();
// echarts 窗口缩放自适应
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeEchartContainer = function () {
width = $("#echart_card").width();
height = $("#echart_card").height();
document.getElementById('echarts-records').style.width = width+'px';
document.getElementById('echarts-records').style.height = height+'px';
};
window.onresize = function(){
resizeEchartContainer();
echartsRecords.resize();
}
resizeEchartContainer();
});
</script>
</body>
</html>
echart底图加载方式
以上使用的为第一种
根据经纬度获取详细地址
地址解析服务
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("北京市海淀区上地10街10号", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
},
"北京市");逆地址解析服务
指定经纬度获取地址
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地理编码实例, 并配置参数获取乡镇级数据
var myGeo = new BMap.Geocoder({extensions_town: true});
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){
if (result){
alert(result.address);
}
});鼠标点击地图获取地址
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});参考
https://www.cnblogs.com/hao-1234-1234/p/10954979.html
https://blog.csdn.net/qq_35736779/article/details/99772172
https://juejin.im/post/6844904160945504269
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 haominglfs的博客！