echarts-map-区县
首先通过百度获取经纬度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>批量地址</title> <style type="text/css"> body, html { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } #l-map { height: 300px; width: 100%; } #r-result { width: 100%; font-size: 14px; line-height: 20px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UZv8h1dSCG8ZRYNiNMMVC76T9uZ4z4Wd"></script> </head> <body> <div id="l-map"></div> <div id="r-result"> <input type="button" value="成都市锦江区" onclick="getBoundary()" id="butotn" /> <div id="result"></div> </div> </body> </html> <script type="text/javascript"> let mapData = []; var xmJson = ''; var mapName = ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "金堂县", "双流县", "郫县", "大邑县", "蒲江县", "新津县", "崇州市", "都江堰市", "彭州市", "邛崃市"] // 百度地图API功能 var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(104.076126, 30.668558), 13); map.enableScrollWheelZoom(true); let index = 0; function getBoundary() { var bdary = new BMap.Boundary(); // var name = document.getElementById("butotn").value; var name = mapName[index] document.getElementById("butotn").value = mapName[index] bdary.get(name, function (rs) { //获取行政区域 map.clearOverlays(); console.log(rs.boundaries) console.log(rs.boundaries.join(';')) xmJson = rs.boundaries.join(';') //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 map.setViewport(ply.getPath()); //调整视野 } get(); index++; }); } //josn对象 var eachart = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "", "cp": [] }, "geometry": { "type": "Polygon", "coordinates": [ //存放经纬度 ] } } ] } function get() { var lsit = []; //xmJson你要的区域的经纬度字符串 var xmList = xmJson.split(';'); xmList.forEach(item => { lsit.push([Number(item.split(',')[0]), Number(item.split(',')[1])]); }) eachart.features[0].geometry.coordinates.push(lsit); console.log(JSON.stringify(eachart)) } </script>
然后组装成JSON数据格式
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "成华区",
"cp": [
104.16545,
30.703645
]
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
104.237952,
30.696182
],
[
104.235141,
30.706489
],
[
104.228293,
30.704868
],
[
104.222874,
30.708396
],
[
104.223716,
30.713675
],
[
104.229604,
30.716935
],
[
104.221657,
30.717436
],
[
104.218142,
30.710594
],
[
104.214574,
30.710075
],
[
104.205882,
30.723492
],
[
104.197771,
30.72383
],
[
104.195817,
30.732807
],
[
104.189829,
30.728377
],
[
104.186696,
30.735357
],
[
104.177538,
30.735944
],
[
104.158397,
30.745255
],
[
104.14277,
30.742709
],
[
104.145055,
30.749937
],
[
104.141556,
30.755137
],
[
104.141347,
30.74917
],
[
104.134105,
30.755318
],
[
104.135359,
30.746261
],
[
104.125033,
30.745897
],
[
104.125161,
30.738285
],
[
104.11525,
30.73461
],
[
104.108846,
30.73758
],
[
104.108522,
30.728851
],
[
104.096793,
30.727867
],
[
104.093371,
30.721048
],
[
104.08419,
30.722523
],
[
104.080398,
30.718586
],
[
104.077249,
30.722903
],
[
104.077821,
30.704229
],
[
104.099538,
30.702899
],
[
104.099976,
30.692941
],
[
104.095091,
30.685509
],
[
104.101219,
30.682475
],
[
104.096123,
30.675943
],
[
104.103058,
30.669987
],
[
104.095176,
30.659098
],
[
104.132428,
30.643242
],
[
104.135019,
30.634618
],
[
104.133841,
30.63183
],
[
104.130951,
30.632732
],
[
104.131486,
30.628952
],
[
104.133885,
30.630122
],
[
104.134471,
30.625833
],
[
104.141356,
30.624098
],
[
104.143514,
30.628269
],
[
104.146104,
30.623476
],
[
104.153178,
30.629042
],
[
104.162,
30.629752
],
[
104.168284,
30.625937
],
[
104.171336,
30.630226
],
[
104.1665,
30.636386
],
[
104.171597,
30.641509
],
[
104.170613,
30.646719
],
[
104.163188,
30.653027
],
[
104.167226,
30.655508
],
[
104.161175,
30.659494
],
[
104.160203,
30.670187
],
[
104.15747,
30.66717
],
[
104.153584,
30.673763
],
[
104.163394,
30.672782
],
[
104.172308,
30.681483
],
[
104.175575,
30.675791
],
[
104.179689,
30.67522
],
[
104.181443,
30.679355
],
[
104.190453,
30.678315
],
[
104.197477,
30.682007
],
[
104.197852,
30.688007
],
[
104.203743,
30.690287
],
[
104.224414,
30.68736
],
[
104.234542,
30.689603
],
[
104.237952,
30.696182
]
]
]
}
}]
然后在页面中引用
<template> <div class="map-container" :style="{height:cHeight+'px'}"> <div id="cityChart" style="height:650px;"></div> </div> </template> <script> var data = [ { name: "锦江区", value: 1522 }, { name: "青羊区", value: 1522 }, { name: "金牛区", value: 1522 }, { name: "武侯区", value: 1522 }, { name: "成华区", value: 1522 }, { name: "龙泉驿区", value: 1522 }, { name: "青白江区", value: 1522 }, { name: "新都区", value: 1522 }, { name: "温江区", value: 1522 }, { name: "金堂县", value: 1522 }, { name: "双流区", value: 1522 }, { name: "郫县", value: 1522 }, { name: "大邑县", value: 1522 }, { name: "蒲江县", value: 1522 }, { name: "新津县", value: 1522 }, { name: "崇州市", value: 1522 }, { name: "都江堰市", value: 1522 }, { name: "彭州市", value: 1522 }, { name: "邛崃市", value: 1522 } ]; // "锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "金堂县", // "双流县", "郫县", "大邑县", "蒲江县", "新津县", "崇州市", "都江堰市", "彭州市", "邛崃市" var geoCoordMap = { 锦江区: [104.124056, 30.615172], 青羊区: [103.989526, 30.688243], 金牛区: [104.02977, 30.72898], 武侯区: [104.012287, 30.638195], 成华区: [104.16545, 30.703645], 龙泉驿区: [104.282733, 30.568914], 青白江区: [104.277558, 30.882827], 新都区: [104.160276, 30.839179], 温江区: [103.829124, 30.687249], 金堂县: [104.429336, 30.876876], 双流区: [103.945257, 30.581848], 郫县: [103.903863, 30.805438], 大邑县: [103.491074, 30.603734], 蒲江县: [103.501422, 30.215031], 新津县: [103.811877, 30.410574], 崇州市: [103.637103, 30.647489], 都江堰市: [103.639402, 30.998792], 彭州市: [103.954456, 31.006716], 邛崃市: [103.44968, 30.429509] }; function randomValue() { return Math.round(Math.random() * 1000); } function convertData(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) }); } } return res; } var geoJson = require("../mapJson/chengdu.json"); export default { name: "home", props: { cWidth: { type: String, default: "1050" }, cHeight: { type: String, default: "650" }, parentName: { type: String, default: "" }, addressChange: { type: Function, default: () => { return; } }, mapData: { type: Array, default: () => { return data; } } }, data() { return { // mapData: [], listData: [], maxNumber: 0 }; }, methods: { drawLine() { var mapChart = this.$echarts.init(document.getElementById("cityChart")); this.$echarts.registerMap("成都市", geoJson); var option = { tooltip: { trigger: "item", formatter: function(params) { return params.name + " : " + params.value[2]; } }, visualMap: { min: 0, max: 5000, left: "80px", top: "bottom", calculable: true, show: false, inRange: { color: ["#fbfbd6", "#ffff27", "#fb1d1d"] }, textStyle: { color: "#fff" } }, geo: { map: "成都市", roam: "false", //是否开启缩放 zoom: 1.2, //默认显示比例大小 top: "10%", left: "25%", label: { emphasis: { show: true, color: "rgba(255, 255, 255,0.8)" } }, itemStyle: { normal: { areaColor: "rgba(0, 150, 194,0)", borderWidth: 1, borderColor: "rgba(132,184,255,1)", shadowBlur: 20, shadowColor: "rgba(132,184,255,1)" }, emphasis: { areaColor: "#244090", //高亮时的地区背景色 shadowOffsetX: 10, shadowOffsetY: 10, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0,0,0,0.5)" } } }, series: [ { name: "四川", type: "effectScatter", coordinateSystem: "geo", data: convertData(this.mapData), symbolSize: function(a, b) { return a[2] / 50 > 20 ? 20 : a[2] / 50; }, symbolRotate: 35, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { emphasis: { borderColor: "#fff", borderWidth: 1 } } } ] // series: [ // { // label: { // normal: { // show: true // }, // emphasis: { // show: true // } // }, // type: "map", // zoom: 1, // roam: true, // map: "成都市" // } // ] }; /* var option = { tooltip: { trigger: "item", formatter: function(params) { return params.name + " : " + params.value[2]; } }, visualMap: { min: 0, max: 5000, left: "80px", top: "bottom", calculable: true, show: false, inRange: { color: ["#fbfbd6", "#ffff27", "#fb1d1d"] }, textStyle: { color: "#fff" } }, geo: { map: "四川", roam: "false", //是否开启缩放 zoom: 1.2, //默认显示比例大小 top: "10%", left: "25%", label: { emphasis: { show: true, color: "rgba(255, 255, 255,0.8)" } }, itemStyle: { normal: { areaColor: "rgba(0, 150, 194,0)", borderWidth: 1, borderColor: "rgba(132,184,255,1)", shadowBlur: 20, shadowColor: "rgba(132,184,255,1)" }, emphasis: { areaColor: "#244090", //高亮时的地区背景色 shadowOffsetX: 10, shadowOffsetY: 10, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0,0,0,0.5)" } } }, series: [ { name: "四川", type: "effectScatter", coordinateSystem: "geo", data: convertData(this.mapData), symbolSize: function(a, b) { return a[2] / 50 > 20 ? 20 : a[2] / 50; }, symbolRotate: 35, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { emphasis: { borderColor: "#fff", borderWidth: 1 } } } ] }; */ mapChart.setOption(option); window.addEventListener("resize", function() { mapChart.resize(); }); mapChart.off("click"); mapChart.on("click", params => { let temp = ""; let temName = params.name.substring(params.name.length - 1); if (temName == "市") { temp = params.name.substring(0, params.name.length - 1); } else if (temName == "州") { temp = params.name.substring(0, 2); } this.$emit("addressChange", temp); }); }, getScHandler() { this.$emit("addressChange", "四川"); } }, mounted() { this.drawLine(); this.listData = this.mapData.slice(1, 4); }, watch: { mapData() { this.drawLine(); this.listData = this.mapData.slice(1, 4); this.maxNumber = this.mapData[0].value; } } }; </script> <style scoped lang="less"> @import url(../../../../static/css/public.less); .map-container { width: 100%; height: 650px; position: absolute; background: url(../../../../static/imgs/map-bg.png) center no-repeat; background-size: 100% 100%; // margin: 0 20px; top: 0; left: 0; z-index: 111; #cityChart { width: 100%; height: 100%; margin: 0 auto; } .map-btn { position: absolute; right: 40px; bottom: 40px; z-index: 11; padding: 5px 20px; color: #fff; border: 1px solid #fff; border-radius: 5px; cursor: pointer; background: #ff4400; } .ranking-box { position: absolute; left: 40px; bottom: 40px; z-index: 11; color: #fff; width: 170px; .ranking-header { padding: 5px; background: linear-gradient(to top, #025ec6, #23c2fe); font-size: 17px; } .ranking-list { background: rgba(0, 76, 136, 0.44); .ranking-item { padding: 10px; .ranking-name { font-size: 13px; } } .ranking-img { width: 40px; height: 23px; margin-right: 10px; flex-shrink: 0; img { width: 100%; } } .ranking-img { align-self: flex-end; } } } } </style>
