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>
echarts-map-区县的更多相关文章
- vue echarts map的使用，页面多图动态自适应
最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...
- Echarts Map 值域为小数的原因
最近做一个项目用到了Echarts Map不知道怎么回事,有时多了一位小时,可这个意义不用小数表示(1.0个人似乎觉得有点奇怪嘞 {boolean}calculable false 是否启用值域漫游, ...
- Echarts Map地图类型使用
使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...
- echarts Map(地图) 不同颜色区块显示
以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...
- ECharts Map 属性详解
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
- Echarts Map地图下钻至县级
**准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- echarts map地图设置外边框或者阴影
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...
- vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js
在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...
- echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
随机推荐
- Http和Https有什么区别
以前去面试的时候,好几家公司都会问到这个问题:http和https有什么区别? 最近突然想恶补一些基础,再夯实一下自己实力,毕竟强大的能力才是工资的保证嘛,今天就来简单记录一下htttp和https的 ...
- element 给table的个别表格框添加样式 ---重构里面的组件
<el-table ref="singleTable" :show-header='false' :data="tableData" align='cen ...
- Jetson TX1刷机
刷机流程 https://blog.csdn.net/c406495762/article/details/70786700 注意:教程中包含两步,首先安装Ubuntu系统,然后重启安装程序,安装其他 ...
- ZYNQ原理图中添加RTL设计模块
前言 已有的RTL模块怎么添加到原理图中? 流程 (1)添加文件到设计中. (2)右键文件添加到block design中. (3)连线即可. 以上.
- Django_ORM操作 - 查询
ORM 操作 必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(* ...
- 【LOJ#3097】[SNOI2019]通信（费用流）
[LOJ#3097][SNOI2019]通信(费用流) 题面 LOJ 题解 暴力就直接连\(O(n^2)\)条边. 然后分治/主席树优化连边就行了. 抄zsy代码,zsy代码是真的短 #include ...
- .Net Core实践4 web 反向代理
目标 将控制台程序改成web程序,通过IIS反向代理,处理请求 环境 win10 / .net core 2.1 / centos7 变成web程序 1.在新建的asp.net core控制台程序中添 ...
- 使用logstash同步MySQL数据到ES
使用logstash同步MySQL数据到ES 版权声明:[分享也是一种提高]个人转载请在正文开头明显位置注明出处,未经作者同意禁止企业/组织转载,禁止私自更改原文,禁止用于商业目的. https:// ...
- elasticsearch中head插件中的定制增加用户名密码范例
在head插件目录下一般 在 elasticsearch目录下的 plugins\head目录 下 在 或 plugins\head\site目录下 有 一个index.html文件.把这个文件用下面 ...
- Mac下查看已安装的jdk版本及其安装目录
1.打开终端,输入:/usr/libexec/java_home -V 注意:输入命令参数区分大小写(-v是不对的,必须是-V) 2.如图:为输入命令: 当前Mac已安装jdk目录: Mac默认使用的 ...