mapv
Version:
a library of geography visualization
97 lines (75 loc) • 18.5 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="../build/mapv.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: 'midnight'
});
var randomCount = 100;
var data = [];
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
// 构造数据
while (randomCount--) {
var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'LineString',
coordinates: [
[cityCenter1.lng - 1 + Math.random() * 1, cityCenter1.lat - 1 + Math.random() * 1],
[cityCenter2.lng - 1 + Math.random() * 1, cityCenter2.lat - 1 + Math.random() * 1]
]
},
count: 30 * Math.random()
});
}
data = [{"geometry":{"type":"LineString","coordinates":[[86.86739792634302,43.82490692892984],[100.91977533535002,36.63172246524329]]},"count":13.349559601892514},{"geometry":{"type":"LineString","coordinates":[[112.02530218727047,37.25736894213128],[107.62994349803381,21.990223567468206]]},"count":22.582973399902087},{"geometry":{"type":"LineString","coordinates":[[115.94983284573719,39.83370595857788],[121.32410370222344,30.61165044055512]]},"count":7.7091093496899195},{"geometry":{"type":"LineString","coordinates":[[115.54623009119115,28.43783220672978],[105.60026205125207,29.258405909482086]]},"count":12.184005397595161},{"geometry":{"type":"LineString","coordinates":[[87.31885203641487,42.98052042414551],[118.65157594770938,25.46803610540908]]},"count":18.941197144809042},{"geometry":{"type":"LineString","coordinates":[[121.21631028821069,31.2284202782894],[113.73166495592186,29.81152619914011]]},"count":21.38931922066847},{"geometry":{"type":"LineString","coordinates":[[113.89956631369466,30.579555010473115],[119.19893718386189,25.10045098541562]]},"count":18.845709941955413},{"geometry":{"type":"LineString","coordinates":[[112.461897716368,37.772335847241166],[102.63938661760517,24.09885314071613]]},"count":12.817249798753096},{"geometry":{"type":"LineString","coordinates":[[119.88630742986584,30.07226644470449],[118.0150549029656,31.092376678367643]]},"count":26.27401490849911},{"geometry":{"type":"LineString","coordinates":[[112.91445035952825,34.060910057072036],[113.6099721438147,34.4773451730214]]},"count":24.034603784938877},{"geometry":{"type":"LineString","coordinates":[[115.74605907505241,28.641341540939905],[116.30122095948451,36.6011110766508]]},"count":19.89063276807658},{"geometry":{"type":"LineString","coordinates":[[116.4424878490068,31.234811288136154],[113.09576214602995,34.43059660897579]]},"count":17.68240706861301},{"geometry":{"type":"LineString","coordinates":[[115.24324500532076,28.627506023538505],[101.73374191945292,24.829888169624088]]},"count":11.584345835798974},{"geometry":{"type":"LineString","coordinates":[[86.596717930117,42.869550370831156],[112.05438716764056,37.65866582844466]]},"count":2.9726191573065974},{"geometry":{"type":"LineString","coordinates":[[90.5811886934943,29.110459206729384],[116.42709659190162,38.97900359926818]]},"count":25.808745305539958},{"geometry":{"type":"LineString","coordinates":[[108.59283857845136,33.51621750459668],[116.7539533028486,31.528300791373166]]},"count":6.3165271438835475},{"geometry":{"type":"LineString","coordinates":[[103.51172425890262,35.38414884747859],[102.91822021562827,35.66769163058817]]},"count":3.624466197050098},{"geometry":{"type":"LineString","coordinates":[[108.28371759978192,33.93170647898466],[87.4051768030363,42.930591515448256]]},"count":9.164515182594268},{"geometry":{"type":"LineString","coordinates":[[108.71108531339755,33.69412690818404],[114.0204597174464,37.88698753198612]]},"count":8.840718068000227},{"geometry":{"type":"LineString","coordinates":[[116.74778181784859,36.287457756313174],[86.79944923544157,43.82992732755015]]},"count":6.927983185378162},{"geometry":{"type":"LineString","coordinates":[[117.16942175297007,31.85073402992166],[108.44692934724576,33.878249667014714]]},"count":0.4209240799522185},{"geometry":{"type":"LineString","coordinates":[[105.73159385822453,28.786656550467928],[114.1433287485363,38.002221215091616]]},"count":20.429446888413757},{"geometry":{"type":"LineString","coordinates":[[108.00757192193228,22.309813405222602],[103.52753342069,35.55250192053366]]},"count":3.196408708683691},{"geometry":{"type":"LineString","coordinates":[[103.51811374033608,35.21729711001912],[106.24042275609446,29.435179660356376]]},"count":27.86066199578831},{"geometry":{"type":"LineString","coordinates":[[105.73020761652985,25.95856820928733],[119.08853910219877,25.421228786480626]]},"count":9.005378446726004},{"geometry":{"type":"LineString","coordinates":[[116.51320252197512,36.41088494315495],[103.69673191528604,35.899706595713184]]},"count":20.119459259610192},{"geometry":{"type":"LineString","coordinates":[[101.40981007860053,36.362049659530314],[125.22585983266897,43.63493405091554]]},"count":24.641447021583332},{"geometry":{"type":"LineString","coordinates":[[124.67212468730455,43.30610452416158],[116.41255939201665,31.62561928481081]]},"count":8.480530372300489},{"geometry":{"type":"LineString","coordinates":[[103.61085913583474,30.47067471027213],[121.25317340655118,30.55180223461012]]},"count":24.62075594536729},{"geometry":{"type":"LineString","coordinates":[[113.13854003408233,33.966778810918896],[122.96524609467588,41.666486198836196]]},"count":16.876919693440136},{"geometry":{"type":"LineString","coordinates":[[103.00048059887467,35.66219846032389],[113.62346956806599,37.055785532589944]]},"count":20.81671432824368},{"geometry":{"type":"LineString","coordinates":[[116.76450128530608,31.231260336671607],[116.33472113552483,31.64649029290116]]},"count":22.130484647855063},{"geometry":{"type":"LineString","coordinates":[[118.2174187129824,31.959151558808653],[106.36612336380554,29.332399624708696]]},"count":11.653155455981343},{"geometry":{"type":"LineString","coordinates":[[105.90135095031987,37.600422406670575],[87.06616850971005,43.047232221366436]]},"count":22.148358947169214},{"geometry":{"type":"LineString","coordinates":[[108.62277707147473,33.948040929716065],[113.25993146230726,34.419327610601485]]},"count":0.6190218140346371},{"geometry":{"type":"LineString","coordinates":[[121.44599852895773,30.86500205786],[119.71603104909114,29.508352269634887]]},"count":2.8607748945175238},{"geometry":{"type":"LineString","coordinates":[[112.49192151154901,27.408195732706957],[113.74978489906086,30.18716031538739]]},"count":6.790066432199593},{"geometry":{"type":"LineString","coordinates":[[111.94626833503631,37.42949615100464],[108.27262267006083,33.32985969239284]]},"count":10.557767162580005},{"geometry":{"type":"LineString","coordinates":[[119.32370109622073,30.01860888176672],[101.44323661907295,35.89657302365611]]},"count":5.9594637942049244},{"geometry":{"type":"LineString","coordinates":[[113.10842765957112,34.467052346976146],[116.78555212863257,36.67186591132035]]},"count":17.943254576837486},{"geometry":{"type":"LineString","coordinates":[[113.68798978942634,37.411142965533],[126.55230025766717,45.65891692322431]]},"count":17.130289379203578},{"geometry":{"type":"LineString","coordinates":[[112.98569668215188,22.12346156382576],[112.87380837849891,34.65080505635701]]},"count":11.767949613914446},{"geometry":{"type":"LineString","coordinates":[[105.36449107960107,38.26209640079441],[86.99821532254839,43.249746280883855]]},"count":22.915314001255226},{"geometry":{"type":"LineString","coordinates":[[119.94044096360126,29.511107069740934],[116.94449418856898,35.996504798739565]]},"count":23.60940240685713},{"geometry":{"type":"LineString","coordinates":[[114.12544457530656,37.57523597743002],[112.3599502848594,28.117399683751653]]},"count":10.224044109197468},{"geometry":{"type":"LineString","coordinates":[[122.5979040707766,41.153861750428874],[101.51632591195919,36.490140179461996]]},"count":7.532369477233212},{"geometry":{"type":"LineString","coordinates":[[106.03505301272435,28.906640968921845],[108.78345475071272,33.760301033364065]]},"count":4.460025431496277},{"geometry":{"type":"LineString","coordinates":[[102.04534421756489,24.917023349414855],[116.58351475742366,38.2363507162312]]},"count":22.39239339276577},{"geometry":{"type":"LineString","coordinates":[[126.2750636903957,45.53857193166748],[111.55719750104517,40.36964300033814]]},"count":5.789059655838877},{"geometry":{"type":"LineString","coordinates":[[125.17992538965194,43.70995897491033],[103.76466598246681,30.011003711150025]]},"count":15.854297442389552},{"geometry":{"type":"LineString","coordinates":[[108.52379937209689,33.49474470083979],[112.24965073818666,37.24388031909256]]},"count":19.09220333156113},{"geometry":{"type":"LineString","coordinates":[[102.55881516978417,24.652146091564692],[112.89395741906466,34.05996173854682]]},"count":14.619818035166494},{"geometry":{"type":"LineString","coordinates":[[118.75083159537898,31.902670131492037],[113.02890528518303,23.068183295337644]]},"count":25.181598816904},{"geometry":{"type":"LineString","coordinates":[[109.44276667110506,19.925328086080373],[103.19546481994126,30.57446111167769]]},"count":16.278735189325385},{"geometry":{"type":"LineString","coordinates":[[112.46978008495068,27.669949726390893],[107.33898037352712,22.196237764926703]]},"count":18.61939666716268},{"geometry":{"type":"LineString","coordinates":[[90.19526555291012,29.08499465027663],[113.23503501377672,34.36807659404669]]},"count":16.885527576631596},{"geometry":{"type":"LineString","coordinates":[[113.97621800025814,30.15597132965591],[119.23465019691328,25.40153744333249]]},"count":4.762102002070165},{"geometry":{"type":"LineString","coordinates":[[106.11885624810485,25.815499000638507],[107.51685883910761,22.23812023430114]]},"count":17.995408375412858},{"geometry":{"type":"LineString","coordinates":[[126.2800664951221,45.29957111156455],[107.53067293396502,22.52168579717797]]},"count":12.857576378807725},{"geometry":{"type":"LineString","coordinates":[[123.18746158834257,40.90192714482943],[123.4314515851926,41.3448645219442]]},"count":27.453290373062803},{"geometry":{"type":"LineString","coordinates":[[116.58135769807653,38.89925898593275],[117.98411386741806,31.213634259937304]]},"count":16.3340073143976},{"geometry":{"type":"LineString","coordinates":[[117.04976783417432,31.849098200876735],[112.88104139429751,22.22572282472755]]},"count":26.218389771094152},{"geometry":{"type":"LineString","coordinates":[[120.69808662020408,30.479790715591463],[106.07443588943862,28.75359323525715]]},"count":3.3186920897707672},{"geometry":{"type":"LineString","coordinates":[[116.70142640562364,35.90178718659452],[90.60867760425477,29.106879325016884]]},"count":16.345837120290753},{"geometry":{"type":"LineString","coordinates":[[107.37038260098664,22.572922726627368],[101.37305013652937,35.799901575063494]]},"count":24.76392119765227},{"geometry":{"type":"LineString","coordinates":[[107.36408370369688,22.12868509131036],[105.75341196911835,26.444637288282475]]},"count":6.137986564542137},{"geometry":{"type":"LineString","coordinates":[[119.43055251238916,29.75937349532],[115.99863296415745,39.276470570174126]]},"count":7.597273005885221},{"geometry":{"type":"LineString","coordinates":[[103.14048395541349,30.20510703159549],[126.01243330519137,45.40728638842674]]},"count":21.234679223149698},{"geometry":{"type":"LineString","coordinates":[[119.60036768268604,29.551063792197393],[116.91443125015176,38.40802110849994]]},"count":24.09732067827362},{"geometry":{"type":"LineString","coordinates":[[91.00423758115097,28.76884296341371],[112.37155289148647,37.73456538880327]]},"count":15.139235744059231},{"geometry":{"type":"LineString","coordinates":[[125.84776626405151,45.159173431396624],[108.050309518014,33.58549447422108]]},"count":24.596387873231023},{"geometry":{"type":"LineString","coordinates":[[112.41122549177064,22.436265023138294],[112.66527455376779,34.37562796315498]]},"count":19.49199179517396},{"geometry":{"type":"LineString","coordinates":[[115.22658779165705,27.905043702003766],[101.70333119745364,35.75547683453356]]},"count":24.94491514345286},{"geometry":{"type":"LineString","coordinates":[[112.27480242139262,28.005044562310964],[112.53141599150797,23.075172400905895]]},"count":0.1435651924563741},{"geometry":{"type":"LineString","coordinates":[[121.40865170327989,31.20393275324369],[118.57757811101938,25.482764658770552]]},"count":26.891141855557684},{"geometry":{"type":"LineString","coordinates":[[87.2557081268832,43.177201900046285],[112.06256524969531,37.363801173160674]]},"count":26.89806791476386},{"geometry":{"type":"LineString","coordinates":[[111.31402709527788,40.04912560543662],[116.34445998871195,31.080447819974555]]},"count":15.621633297965934},{"geometry":{"type":"LineString","coordinates":[[124.56545101680825,43.66399174289445],[118.47209501035536,31.881126751325656]]},"count":23.46721014213244},{"geometry":{"type":"LineString","coordinates":[[109.95983833702701,19.65524909941617],[118.50991535393047,31.357454447678354]]},"count":2.5266651050122335},{"geometry":{"type":"LineString","coordinates":[[100.93941270869543,36.62604149508294],[113.1923664961692,34.68545142444911]]},"count":23.878249196734927},{"geometry":{"type":"LineString","coordinates":[[121.41816898189691,30.91594245929304],[114.14842600992613,37.61052273186116]]},"count":22.57928629550432},{"geometry":{"type":"LineString","coordinates":[[108.5952700275084,33.41622472155357],[101.44143108113714,36.62912949603193]]},"count":10.87165087197304},{"geometry":{"type":"LineString","coordinates":[[113.49766804715419,34.42006023220538],[110.67976724567067,40.42594518050225]]},"count":20.77450145113745},{"geometry":{"type":"LineString","coordinates":[[119.73825705402872,30.129547476965946],[105.78179733571507,25.854018555851056]]},"count":15.91915863458075},{"geometry":{"type":"LineString","coordinates":[[101.9191322060287,24.27566392211297],[112.70088692305652,34.14956125840175]]},"count":27.097682951865302},{"geometry":{"type":"LineString","coordinates":[[122.7130922951724,41.358238681644664],[101.15483389885621,35.68114972356474]]},"count":8.379165966427838},{"geometry":{"type":"LineString","coordinates":[[125.68097139010413,44.98285799493208],[101.26678485310559,36.30560897889745]]},"count":5.923648212367782},{"geometry":{"type":"LineString","coordinates":[[110.74258097340011,40.02732763519688],[116.30201058379114,36.61167392542197]]},"count":23.660574438364883},{"geometry":{"type":"LineString","coordinates":[[108.72829962582135,33.32113928440052],[115.39652324557757,38.94483053037504]]},"count":18.313977855360918},{"geometry":{"type":"LineString","coordinates":[[124.91821493561575,43.142954783297895],[107.40953922053272,22.446130977326014]]},"count":2.674285735378643},{"geometry":{"type":"LineString","coordinates":[[120.4907324418401,30.291511283318133],[119.22800098054614,29.993379538355246]]},"count":15.395306779323189},{"geometry":{"type":"LineString","coordinates":[[101.31113568824806,35.882572507643054],[101.18085563472658,36.372966525663095]]},"count":24.54881606692728},{"geometry":{"type":"LineString","coordinates":[[113.55597355138423,34.059402267334114],[126.60021335036058,45.22517916114925]]},"count":11.713017642871073},{"geometry":{"type":"LineString","coordinates":[[120.61502700801744,30.609999644940782],[122.51577268982888,41.319012159492196]]},"count":11.820613404134157},{"geometry":{"type":"LineString","coordinates":[[116.9982781869908,39.022806383798645],[118.54871134299731,31.08518400744304]]},"count":18.43273286369737},{"geometry":{"type":"LineString","coordinates":[[101.44133477872208,35.92580544269013],[113.36571046131323,34.22752377451785]]},"count":1.982344779665639},{"geometry":{"type":"LineString","coordinates":[[110.28044952762544,19.830283861249953],[103.70207031218007,36.040188857841294]]},"count":9.75745738866853},{"geometry":{"type":"LineString","coordinates":[[105.58479288437177,37.739438161492544],[109.96567184037983,19.098341079787495]]},"count":13.640910368044032},{"geometry":{"type":"LineString","coordinates":[[107.64656080733576,22.48238732716619],[118.70537476157558,31.726504655716877]]},"count":16.067709766660734},{"geometry":{"type":"LineString","coordinates":[[86.71340015621226,43.7727441975314],[119.29872610713177,30.055102551268465]]},"count":29.416180460936864}]
// console.log(data)
var dataSet = new mapv.DataSet(data);
var options = {
gradient: {
0.25: "rgb(0,0,255)",
0.55: "rgb(0,255,0)",
0.85: "yellow",
1.0: "rgb(255,0,0)"
},
max: 50,
strokeStyle: 'rgba(255, 255, 255, 1)',
lineWidth: 3,
shadowColor: 'rgba(255, 255, 255, 1)',
shadowBlur: 20,
// strength: 0.4,
draw: 'heatmap'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
</script>
</body>
</html>