版权声明：第一次写文章，有什么需要补充的还望各位大神多多指教。 https://blog.csdn.net/mengxiangxingdong/article/details/80445615
先放效果图
代码
https://gitee.com/hugo110/echarts_520/tree/master/fanfan_map
下载后打开
randomGeoJson.html 就可以看到
根据配置项输入就可以，有默认的地图和配置
主要利用了一个判断点是否在多边形内的算法
下边是代码贴图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一键生成随机的地图区域的json</title>
</head>
<body>
<script type="text/javascript" src="js/lib/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/lib/echarts.min.js"></script>
<script type="text/javascript" src="js/lib/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/point_util.js"></script>
<h3 align="center">生成随机的地图区域的geojson</h3>
<div style="float:left;width: 50%;height: 600px;margin:auto;">
<table align="center">
<tr><td colspan="3"><font color="red">注：填写的城市必须在geoJson存在</font></td></tr>
<tr>
<td>GeojsonUrl</td>
<td><input type="text" id="jsonUrl" name="jsonUrl" value="json/jiaozuo410800.json"></td>
<td>json的本地路径也可以是http(不支持跨域)</td>
</tr>
<tr>
<td>json城市</td>
<td><input type="text" name="cityName" id="cityName" value="焦作"></td>
<td>这个json的名称</td>
</tr>
<tr>
<td>城市名称</td>
<td><input type="text" name="areaName" id="areaName" value="孟州"></td>
<td>存在这个json的城市名称</td>
</tr>
<tr>
<td>数量</td>
<td><input id="areaRandomNum" type="text" name="areaRandomNum" value="20"></td>
<td>要生成随机地点的数量(超过长度会重复)默认55部门</td>
</tr>
<tr>
<td>经纬度对象:</td>
<td><input id="geoJsonButton" type="button" value="生成"></td>
<td></td>
</tr>
<tr>
<td colspan="3">
<textarea id="content" cols="50" rows="50"></textarea>
</td>
</tr>
</table>
</div>
<div style="float: right;width: 50%;height: 600px;margin:auto;">
<div id="map" style="height: 100%;"></div>
</div>
<script>
/**
* 思路 先写生成随机的 geojson 地点 （去除重复），配置一键生成多少个
*
* 然后生成的 geojson 展示在地图中
*
* 后期可以扩展生成真实的geojson数据
* 现在的问题 1.是如何生成真正随机的点，然后生成在这个范围内
* 2.如何生成真个范围内的数据
*
* 界面 1.确定使用的json地图
* 2.确认对应的json地图的名称 必须是中文
* 3.选择一键生成多少个数据，可以勾选是否生成 地区的名称（默认生成55个部门的数据，可以自己修改）
* 4.可以选择复制
*
*/
//第一步先生成对应的json
$(function() {
var jiaozuoMap = document.getElementById("map");
var mapChart = echarts.init(jiaozuoMap); //0988d7
var jsonUrl = "json/" + "jiaozuo410800.json";
var cityName = "焦作";
var areaName = "孟州"; //想要生成随机地点的geo数据 //如果查找不到就生成本区域的数据
var areaRandomNum = 3; //生成随机数的数量
//默认的部门名称 超出部门的以变量起
var depNameArr = ["人社局", "公安局", "工商局", "国税局", "卫计委", "交运局", "食品药品监督管理局", "质量技术监督局", "地税局", "住建局", "环保局", "民政局", "司法局", "安监局", "农林局", "文广新局", "行政服务中心", "盐业管理局", "粮食局", "发改委", "水利局", "商务局", "人防办", "畜牧局", "科技局", "财政局", "旅游局", "银监会焦作银监分局孟州办事处", "教育局", "统计局", "法院", "档案局", "移民安置局", "国土资源局", "供销社", "审计局", "体育局", "编办", "烟草专卖局", "气象局", "邮政局", "城管局", "市政府金融办", "人行孟州支行", "农业机械管理局", "市政府法制办", "检察院", "信访局", "监察委", "工信委", "河务局", "机关事务管理局", "市网络经济发展促进中心", "市新闻网络中心", "市文明办", "公共资源交易中心", "信用办", "市残联", "市爱卫办", "市民宗委", "电力公司", "电信公司", "移动公司", "联通公司"];
var content = ""; //生成的内容显示到textarea矿中
var numberObj = {}; //生成的对象
//表单的对象
var $jsonUrl = $("#jsonUrl"),
$cityName = $("#cityName"),
$areaName = $("#areaName"),
$areaRandomNum = $("#areaRandomNum"),
$content = $("#content");
$("#geoJsonButton").click(function() { //赋值点击生成的事件
jsonUrl = getValue($jsonUrl);
areaName = getValue($areaName);
areaRandomNum = getValue($areaRandomNum);
cityName = getValue($cityName);
//开始获取值
$.getJSON(jsonUrl, function(result) { //打开就默认生成这个地图
callback(result);
map(result); //生成地图
});
});
function getValue(obj) { //传递的时jquery对象
var value = obj.val();
if(value == "" || value == undefined || value == null) {
alert(obj.attr("name") + "不能为空");
}
return value;
}
//开始获取值
$.getJSON(jsonUrl, function(result) { //打开就默认生成这个地图
callback(result);
map(result); //生成地图
});
//执行
function callback(geoJson) {
var polygonArr =Array(); //不规则区域数组
var maxX=0,maxY=0,minX=1000,minY=1000;
//然后开始执行
var geoJsonObj = geoJson //$.parseJSON(geoJson);
var featuresArr = geoJsonObj.features;
var areaArr = Array(); //区域的array的保存
for(var key in featuresArr) {
var model = featuresArr[key];
if(model.properties.name.indexOf(areaName) > -1 ||cityName==areaName) { //相同的区域 如果区域相同时生成全部的
var arr = model.geometry.coordinates; //经纬度的数组
for(var key2 in arr) {
var arr2 = arr[key2];
for(var key3 in arr2) {
var arr3 = arr2[key3];
for(var key4 in arr3) {
var arr4 = arr3[key4];
//生成 不规则点数组
var pt=new point();
pt.x=arr4[0];
pt.y=arr4[1];
polygonArr.push(pt);
areaArr.push(arr3[key4]);
//获取最高维度， 获取最低维度 获取最东经度 获取最东短经度
if(arr4[0]>maxX){
maxX = arr4[0];
}
if(arr4[0]<minX){
minX = arr4[0];
}
if(arr4[1]>maxY){
maxY = arr4[1];
}
if(arr4[1]<minY){
minY = arr4[1];
}
}
//现在的数组就是经纬度了
}
}
//添加完成 然后生成在不规则区域内的点
//添加完成后 生成随机 json
console.log(polygonArr);
console.log("maxX="+maxX);
console.log("minX="+minX);
console.log("maxY="+maxY);
console.log("minY="+minY);
var len = polygonArr.length;
numberObj={}; //重新为空
areaArr=[];//暂时清空 不取边界点
var flagIndex=0;
for(;;){//无限循环
var indexX = (Math.random() * (maxX-minX)+minX).toFixed(6); //四舍五入取后六位
var indexy = (Math.random() * (maxY-minY)+minY).toFixed(6);
var pt=new point();
pt.x=indexX;
pt.y=indexy;
//判断生成的点是否在区域内
var flag = PointInPoly(pt,polygonArr);
if(flag){
areaArr.push([indexX,indexy]);
flagIndex++;
}
if(flagIndex==areaRandomNum){ //如果等于生成的点 则结束
break;
}
}
for(var i = 0; i < areaRandomNum; i++) {
numberObj[areaName + depNameArr[i]] = areaArr[i]; //动态增加对象
}
//额外生成 中心点
var centerX = ((maxX+minX)/2).toFixed(6);
var centerY = ((maxY+minY)/2).toFixed(6);
numberObj[areaName] = [centerX,centerY];
//复制给全局变量
console.log(numberObj); //这个现在可以显示
//输出对象的json
$content.val(JSON.stringify(numberObj));
}
}
}
function map(geoJson) {
echarts.registerMap(cityName, geoJson);
var data = Array(); //焦点数组
for(var key in numberObj) {
var jiaodian = {};
jiaodian.name = key;
jiaodian.value = 60; //先固定大小
data.push(jiaodian); //增加焦点的显示
}
var geoCoordMap = numberObj; //这里放置生成的
var dataFrom = areaName; //显示的中心点 修改为孟州 '焦作市'
var series = [{
name: areaName, //运行的线
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
}
},
data: data.map(function(dataItem) {
return {
fromName: dataFrom,
toName: dataItem.name,
coords: [
geoCoordMap[dataItem.name],
geoCoordMap[dataFrom],
]
}
})
},
{
name: areaName, //运行的线2
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: data.map(function(dataItem) {
return {
fromName: dataFrom,
toName: dataItem.name,
coords: [ //第一个数据一对多， 第二个数据 多对一
geoCoordMap[dataItem.name],
geoCoordMap[dataFrom]
]
}
})
},
{
name: areaName, //显示的点点
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
return val[2] / 6;
},
itemStyle: {
normal: {
color: '#a6c84c'
}
},
data: data.map(function(dataItem) {
return {
name: dataItem.name,
value: geoCoordMap[dataItem.name].concat([dataItem.value])
};
})
}
];
option = {
backgroundColor: '', //地图背景颜色 #154e90
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
},
show: true,
right: 10
},
title: {
text: '模拟生成geojson', //主标题 区县接入情况
subtext: '', //副标题
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: { //提示框组件。
trigger: 'item', //触发类型
formatter: '{b0}:\n {c0}', //{a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
},
geo: {
map: cityName,
center: geoCoordMap[areaName], //当前视角的中心点，用经纬度表示 这个搭配放大 可开始就定位
zoom: 1, //当前视角的缩放比例。
scaleLimit: { //滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
min: 2,
max: 10
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
/* itemStyle: {
normal: {
areaColor: 'black',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
},
*/
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: 'rgba(0, 41, 97, 1)', //图形的颜色
borderColor: 'rgba(86, 155, 197, 1)', //'rgba(147, 235, 248, 1)', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
borderWidth: 2,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#3399ff' // 0% 处的颜色 #3399ff 实现一个好的团 rgba(0, 41, 97, 1)
}, {
offset: 1,
color: 'rgba(0, 41, 97, 1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(0, 41, 97, 1)', // 阴影颜色 rgba(128, 217, 248, 1)
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: { //图形div 的 盒子模型
areaColor: '#00bfff', //'rgba(70, 144, 196, 1)',//'#389BB7',
borderWidth: 0,
/* itemStyle:{ //高亮下的图形颜色
color:'red',
areaColor :'red'
} */
}
},
},
series: series
};
if(option && typeof option === "object") {
mapChart.setOption(option, true);
}
}
});
</script>
</body>
</html>//定义点的结构体
function point(){
this.x=0;
this.y=0;
}
//计算一个点是否在多边形里,参数:点,多边形数组
function PointInPoly(pt, poly) {
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
&& (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
&& (c = !c);
return c;
}
//调用
var pt=new point();
pt.x=34.32812720562833;
pt.y=108.93115997314453;
//var _poly=[{x:1.1,y:1.1},{x:3,y:1},{x:6,y:4},{x:2,y:10},{x:1.1,y:1.1}];
//var xx=PointInPoly(pt,_poly);