geoJson隨機點生成（echarts）

阿新 • • 發佈：2019-01-24

/** * 思路先寫生成隨機的 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); } } });

geoJson隨機點生成（echarts）

geoJson隨機點生成（echarts）

java 如何隨機生成（取出）一個數組中的一個數，並且一次取一個直到取

3D點雲地圖地面去除（1）：基於隨機一致性取樣（RANSAC），未做RANSAC後續處理

泊松點過程（PPP）&泊松簇過程（PCP）《用泊松過程生成空間點的程式》

java生成隨機驗證碼（ASCII）

談談源碼管理那點事兒（一）——源碼管理十誡（轉）

Harris角點及Shi-Tomasi角點檢測（轉）

條件隨機場介紹（2）—— An Introduction to Conditional Random Fields

條件隨機場介紹（1）—— An Introduction to Conditional Random Fields

條件隨機場介紹（5）—— An Introduction to Conditional Random Fields

條件隨機場介紹（6）—— An Introduction to Conditional Random Fields

條件隨機場介紹（4）—— An Introduction to Conditional Random Fields

驗證碼的生成（前端）

微信公眾平臺開發，模板消息，網頁授權，微信JS-SDK，二維碼生成（4）

Angular動態表單生成（四）

Angular動態表單生成（五）

Angular動態表單生成（七）

JavaScript小細節點羅列（2）

【原創】Hibernate自動生成（2）

測試報告生成（四）

geoJson隨機點生成（echarts）

相關推薦