echarts中使用百度地图自定义json地图样式、setMapStyle、styleJson
六月初百度地图是我们开发中很常用的一个地图，因为使用的频繁也就预示着百度地图内置的样式远远不能满足我们的实际应用（注：关于使用百度地图内置的样式大家可以参考我的另一篇文章百度地图内置主题色名称及使用）。
既然内置地图样式不能满足我们的开发需求，百度地图也提供了json格式来让我们自定义地图的样式。（自定义地址见最下方链接）
关于自定义json样式如何使用，本文以具体实例做一个介绍，也许这就是你要得效果呢？
关键代码：
bmap.setMapStyle({
styleJson:styleJson1//styleJson1为生成样式json名称
});效果截图：
从上图可以看出，地图的底色那些样式并不属于百度地图内置的样式规格，而是通过百度地图工具自己设置的样式。
案例完整代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<!-- 百度地图生成的地图样式json数据 -->
<script src="js/custom_map_config.json"></script>
<!-- 百度地图生成的地图样式json数据 -->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=需自己去百度地图申请"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '热力图与百度地图扩展';
$.get('js/data.json', function (data) {
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
myChart.setOption(option = {
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
if (!app.inNode) {
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
bmap.setMapStyle({
styleJson:styleJson1//styleJson1为生成样式json名称
});
}
});
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>custom_map_config.json 数据：
styleJson1 = [{"featureType": "land","elementType": "geometry","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "water","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "building","elementType": "geometry.fill","stylers": {"color": "#011d19ff","visibility": "on"}}, {"featureType": "building","elementType": "geometry.stroke","stylers": {"color": "#000b00ff","visibility": "on"}}, {"featureType": "water","elementType": "geometry","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "village","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "town","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "district","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "country","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "city","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "continent","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "poilabel","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "poilabel","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "scenicspotslabel","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "scenicspotslabel","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "transportationlabel","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "transportationlabel","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "airportlabel","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "airportlabel","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "road","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "road","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "road","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "green","elementType": "geometry","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "scenicspots","elementType": "geometry","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "scenicspots","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "scenicspots","elementType": "labels.text.stroke","stylers": {"weight": 1,"color": "#079e81ff","visibility": "on"}}, {"featureType": "continent","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "country","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "city","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "city","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "scenicspotslabel","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "airportlabel","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "transportationlabel","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "railway","elementType": "geometry","stylers": {"visibility": "off"}}, {"featureType": "subway","elementType": "geometry","stylers": {"visibility": "off"}}, {"featureType": "highwaysign","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "nationalwaysign","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "nationalwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "provincialwaysign","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "provincialwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "tertiarywaysign","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "tertiarywaysign","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "subwaylabel","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "subwaylabel","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "road","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on","weight": 90}}, {"featureType": "road","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "shopping","elementType": "geometry","stylers": {"visibility": "off"}}, {"featureType": "scenicspots","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "scenicspotslabel","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "manmade","elementType": "geometry","stylers": {"visibility": "off"}}, {"featureType": "manmade","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "highwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}}, {"featureType": "water","elementType": "labels.text.stroke","stylers": {"color": "#0c292800","visibility": "on"}}, {"featureType": "road","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "road","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "road","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "road","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "road","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "road","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "road","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "road","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "road","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "road","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "road","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "road","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "road","elementType": "labels.text","stylers": {"fontsize": 24}}, {"featureType": "highway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "highway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "highway","elementType": "geometry.stroke","stylers": {"color": "#1c4f7eff"}}, {"featureType": "highway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "highway","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "nationalway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "nationalway","elementType": "geometry.stroke","stylers": {"color": "#1c4f7eff"}}, {"featureType": "nationalway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "nationalway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "nationalway","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "provincialway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "cityhighway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "arterial","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "tertiaryway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "fourlevelway","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "local","elementType": "geometry.fill","stylers": {"color": "#074038ff","visibility": "on"}}, {"featureType": "provincialway","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "cityhighway","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "arterial","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "tertiaryway","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "fourlevelway","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "local","elementType": "geometry.stroke","stylers": {"color": "#001d10ff","visibility": "on"}}, {"featureType": "local","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "local","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "fourlevelway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "tertiaryway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "arterial","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "cityhighway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "provincialway","elementType": "labels.text.fill","stylers": {"color": "#0c2928ff","visibility": "on"}}, {"featureType": "provincialway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "cityhighway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "arterial","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "tertiaryway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "fourlevelway","elementType": "labels.text.stroke","stylers": {"color": "#079e81ff","visibility": "on","weight": 1}}, {"featureType": "fourlevelway","elementType": "geometry","stylers": {"weight": 1}}, {"featureType": "tertiaryway","elementType": "geometry","stylers": {"weight": 1}}, {"featureType": "local","elementType": "geometry","stylers": {"weight": 1}}, {"featureType": "provincialway","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "arterial","elementType": "geometry","stylers": {"weight": 3}}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,10","level": "8"}}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,10","level": "9"}}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,10","level": "8"}}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,10","level": "9"}}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,10","level": "8"}}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,10","level": "9"}}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}}, {"featureType": "arterial","stylers": {"curZoomRegionId": "0","curZoomRegion": "9,9","level": "9"}}, {"featureType": "arterial","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,9","level": "9"}}, {"featureType": "arterial","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,9","level": "9"}}]该样式数据是在百度地图工具中生成的，生成地址：http://lbsyun.baidu.com/customv2/index.html
六月初字帖坊小程序
你想要的字帖模板及工具，这里都有！
877篇文章
4367人已阅读