mapv初体验
农弘毅
mapv简介
Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。
浏览器支持
Mapv使用canvas开发，支持现在被称为“现代”浏览器, 通常兼容除了IE8及IE以下版本的其他大部分浏览器。
划重点：大量点
api实例地址
需求实例1-大量的多边形Polygon
我们有一个页面需要展示大量的多边形Polygon，使用常规的百度api，经常页面渲染至少2分半，还会页面卡住不动，经过页面只显示当前部分的优化，好了一些，但是还是达不到要求，最后发现了mapv，
使用
引入资源
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=yourKey"></script>
<script src="http://mapv.baidu.com/build/mapv.js"></script>
初始化
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
数据
var jsondata=[{"geometry":{"type":"Polygon","coordinates":[[[115.10159743089054,34.79988739572384],[115.10107784297621,34.79770787188133],[115.10616433265868,34.79763593910694],[115.10633842414927,34.79978413116733],[115.10159743089054,34.79988739572384]]]},"name":"东南架坡","text":"东南架坡"},
{"geometry":{"type":"Polygon","coordinates":[[[115.10893599313142,34.80989440551296],[115.10716298729393,34.80562320269435],[115.10996615564027,34.80501256474796],[115.1137632269494,34.805475902871024],[115.11428351922244,34.807722620224645],[115.11734682372,34.80759687026184],[115.11734898960891,34.809570513433016],[115.10902340476832,34.810774152362136],[115.10893599313142,34.80989440551296]]]},"name":"孔庄","text":"孔庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.11790123391421,34.80071243589622],[115.11789807112227,34.797682449185665],[115.1212641956552,34.79762151147996],[115.121267359885,34.80065149831523],[115.11790123391421,34.80071243589622]]]},"name":"蔡岗","text":"蔡岗"},{"geometry":{"type":"Polygon","coordinates":[[[115.12036948955021,34.80944652619949],[115.12036584289346,34.80613609080739],[115.12567162802284,34.806043655887514],[115.12567527707034,34.80935409183963],[115.12036948955021,34.80944652619949]]]},"name":"沈家集村","text":"沈家集村"},
{"geometry":{"type":"Polygon","coordinates":[[[115.12618927674873,34.80645769092093],[115.12618631427642,34.80378110593659],[115.12961444491168,34.80372761822948],[115.12961740834845,34.80640420370076],[115.12618927674873,34.80645769092093]]]},"name":"尚集","text":"尚集"},
{"geometry":{"type":"Polygon","coordinates":[[[115.12674484950797,34.80123158487343],[115.12674004698884,34.79662052204994],[115.13540086518411,34.79650124845399],[115.13540567045558,34.801112313725426],[115.12674484950797,34.80123158487343]]]},"name":"三里庄","text":"三里庄"},
{"geometry":{"type":"Polygon","coordinates":[[[115.1443035566614,34.79997186379018],[115.14429743211254,34.79386190436867],[115.14923304044727,34.79385609309204],[115.14923916265377,34.79996605516259],[115.1443035566614,34.79997186379018]]]},"name":"赵岗","text":"赵岗"},
{"geometry":{"type":"Polygon","coordinates":[[[115.15690492896168,34.79839732898162],[115.15686083704006,34.79614005586987],[115.16370143534435,34.79495231747546],[115.16571028128836,34.795722456860034],[115.16622530640316,34.79911489053346],[115.15690492896168,34.79839732898162]]]},"name":"李三阳村","text":"李三阳村"},
{"geometry":{"type":"Polygon","coordinates":[[[115.15818013490949,34.78741101597093],[115.16224257847541,34.786718623283406],[115.1621135458152,34.78544764251656],[115.16053119483625,34.78479351101362],[115.15796562801093,34.78494025268534],[115.15800841941297,34.78494062037041],[115.15818013490949,34.78741101597093]]]},"name":"程村寺","text":"程村寺"},
{"geometry":{"type":"Polygon","coordinates":[[[115.15878197218568,34.7911539639903],[115.16320749448565,34.79164907068164],[115.16536291326855,34.78926571084465],[115.16493543808278,34.787531954112104],[115.15805240789174,34.78832600540843],[115.15878197218568,34.7911539639903]]]},"name":"孟楼","text":"孟楼"},
{"geometry":{"type":"Polygon","coordinates":[[[115.16942045299025,34.78978939066796],[115.16916300680775,34.78657766272325],[115.17330293877035,34.78541594955316],[115.17462642512938,34.78618021863572],[115.1796636986076,34.787010961803134],[115.18124329713685,34.787708873203975],[115.18162970545978,34.79078364164663],[115.16942045299025,34.78978939066796]]]},"name":"石庄","text":"石庄"},
{"geometry":{"type":"Polygon","coordinates":[[[115.12637412312378,34.819284819569404],[115.13176073356648,34.818433077466345],[115.13193045637598,34.815469918988846],[115.132014469202,34.81324884561413],[115.12619670426417,34.81333186852141],[115.12637412312378,34.819284819569404]]]},"name":"方土山村","text":"方土山村"},
{"geometry":{"type":"Polygon","coordinates":[[[115.13645651792041,34.82162350594751],[115.13619576727649,34.817749207754886],[115.13976637682907,34.817827473144895],[115.14217479087088,34.81957629142387],[115.14088564142709,34.82088659795403],[115.13645651792041,34.82162350594751]]]},"name":"前罗庄","text":"前罗庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.14196249721614,34.82444054468829],[115.14114437251,34.82169597004084],[115.14238916733103,34.820033747655394],[115.14591148799289,34.820766057930385],[115.14719997588269,34.822457387304254],[115.14196249721614,34.82444054468829]]]},"name":"后罗庄","text":"后罗庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.1307338487185,34.83166034099018],[115.12827614854145,34.82887646539317],[115.13163693227139,34.827561124070805],[115.13275710186771,34.82747726392254],[115.13348970347054,34.828842666021195],[115.13551332390479,34.82892729105217],[115.13641817244665,34.83201830247867],[115.1307338487185,34.83166034099018]]]},"name":"贾马口","text":"贾马口"},{"geometry":{"type":"Polygon","coordinates":[[[115.12383411138987,34.826233161244105],[115.12137459866992,34.8265567279662],[115.12163508270686,34.82887784696777],[115.12517139286582,34.82867733123738],[115.12383411138987,34.826233161244105]]]},"name":"后临河寨","text":"后临河寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.11649568550696,34.821146397916515],[115.11779210458977,34.823167334110636],[115.11999305855393,34.82397337395831],[115.12072727442096,34.826357072358064],[115.11775048792094,34.82725610016235],[115.11399639771959,34.827288237453985],[115.11313286233765,34.82427299416926],[115.11649568550696,34.821146397916515]]]},"name":"前临河寨","text":"前临河寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.12094493211674,34.83213190127016],[115.1247848063999,34.83143201814817],[115.12560420683808,34.83476596322105],[115.12413778783429,34.835071046034976],[115.12073050650048,34.83491881135262],[115.12094493211674,34.83213190127016]]]},"name":"油坊庄","text":"油坊庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.11166863238203,34.83571401056855],[115.11624214548615,34.83450485394144],[115.11921979266411,34.834557702865254],[115.11952153727174,34.83596173722681],[115.11917686623667,34.83737647137621],[115.11166877163112,34.83754593533547],[115.11166863238203,34.83571401056855]]]},"name":"小袁庄","text":"小袁庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.12072942704455,34.841435508462325],[115.12072973221139,34.838548628573655],[115.12370702232171,34.838496038288184],[115.12370671854026,34.84138291850108],[115.12072942704455,34.841435508462325]]]},"name":"大刘寨","text":"大刘寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.124267485744,34.8398247490104],[115.12426750383099,34.83616298922546],[115.12750117320974,34.83610962333399],[115.12750115690446,34.83977138379678],[115.124267485744,34.8398247490104]]]},"name":"中刘寨","text":"中刘寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.13473934767067,34.841651503923735],[115.13473973560419,34.837570418695904],[115.1389564722635,34.837528959030706],[115.13895608589823,34.841610046037246],[115.13473934767067,34.841651503923735]]]},"name":"南岗","text":"南岗"},{"geometry":{"type":"Polygon","coordinates":[[[115.0964010410269,34.85804358210769],[115.09958798306965,34.85639143114996],[115.10014903220373,34.85553948443192],[115.10015068559625,34.8532155686072],[115.09365210832426,34.85345250748207],[115.09369274001493,34.85686704841433],[115.0964010410269,34.85804358210769]]]},"name":"徐寨村","text":"徐寨村"},{"geometry":{"type":"Polygon","coordinates":[[[115.09719650276388,34.858687174001055],[115.09997553575091,34.856527238976845],[115.10096575104063,34.857958874716964],[115.10111550372359,34.85908395549591],[115.100402933962,34.86076468960412],[115.09824982720558,34.86084188384459],[115.09719650276388,34.858687174001055]]]},"name":"牤牛寨","text":"牤牛寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.10238143112677,34.86357355308039],[115.10182496475105,34.85998990799362],[115.10264486237726,34.8586763366562],[115.10587621121762,34.86042498890094],[115.10652014977457,34.863126238555004],[115.10238143112677,34.86357355308039]]]},"name":"胡庄","text":"胡庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.09940933959545,34.863433866096926],[115.09885170589065,34.861504293141664],[115.09614140515995,34.86008732722713],[115.09364675532098,34.85915613752193],[115.09050887987507,34.85931318549478],[115.09059143243543,34.86353823490629],[115.09940933959545,34.863433866096926]]]},"name":"高寨","text":"高寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.20410831483657,34.87718516815226],[115.20293192486513,34.87420759122724],[115.2066653152883,34.872628538338354],[115.20645353722122,34.87051726504096],[115.20967112029318,34.87274660966102],[115.21080778780227,34.87455610519427],[115.20410831483657,34.87718516815226]]]},"name":"李九寨","text":"李九寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.21345369559386,34.87176059357763],[115.22021499138343,34.867860658470136],[115.21866483140391,34.867068838909816],[115.21182591078934,34.86592706067977],[115.21345369559386,34.87176059357763]]]},"name":"西帚村","text":"西帚村"},{"geometry":{"type":"Polygon","coordinates":[[[115.22072715303254,34.87232520075949],[115.22456205036781,34.872414419836886],[115.22499491820909,34.87061308923494],[115.22648382762283,34.869357580385376],[115.22609702304067,34.867691784823315],[115.22178637196797,34.86800004830449],[115.22062393042388,34.867768091829525],[115.22072715303254,34.87232520075949]]]},"name":"帚怀村","text":"帚怀村"},{"geometry":{"type":"Polygon","coordinates":[[[115.22719711454576,34.86728689250371],[115.23034637554088,34.866689725617285],[115.23011053510317,34.86547908891471],[115.23397212418654,34.86474297162213],[115.23420745672183,34.86662196111569],[115.23548106680825,34.86656386690258],[115.23580326662515,34.86793081074568],[115.23144432990811,34.86830784245079],[115.23170048612846,34.871611642955976],[115.23096640423242,34.871730255732984],[115.2299771939681,34.868631895129326],[115.22732508684904,34.86893995623544],[115.22719711454576,34.86728689250371]]]},"name":"许马庄","text":"许马庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.23685544543805,34.8731309224093],[115.23879731472705,34.8729462609271],[115.24354962627402,34.86596355036796],[115.2437447556986,34.864535065266836],[115.2420866336546,34.86206352030532],[115.23856883166098,34.863217106912174],[115.23636718923267,34.864101247185566],[115.23685544543805,34.8731309224093]]]},"name":"张保府村","text":"张保府村"},{"geometry":{"type":"Polygon","coordinates":[[[115.23944195102007,34.87578549198443],[115.23996116843115,34.87341798318713],[115.23702696135454,34.8734349225069],[115.23719785387213,34.875790567831345],[115.23944195102007,34.87578549198443]]]},"name":"许庄","text":"许庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.22268033056949,34.881047440064094],[115.22229360678261,34.879081479724796],[115.22658658155947,34.874777066147026],[115.23100926310309,34.87209875529084],[115.23206670043652,34.87195712386255],[115.23342458498541,34.872936527151595],[115.23387409599803,34.87729355534444],[115.23812415145836,34.87693605607879],[115.23876759762703,34.882256484715825],[115.23667445160504,34.88366710742017],[115.22268033056949,34.881047440064094]]]},"name":"许河","text":"许河"},{"geometry":{"type":"Polygon","coordinates":[[[115.23969361734099,34.884546280654774],[115.23939385808855,34.88148913776166],[115.2415516877375,34.88127530846384],[115.24306120624456,34.881600595377975],[115.24301552745554,34.88445293361621],[115.23969361734099,34.884546280654774]]]},"name":"新庄村","text":"新庄村"},{"geometry":{"type":"Polygon","coordinates":[[[115.26113601918642,34.82229490755484],[115.2639279092148,34.82133307137049],[115.26508922557808,34.82312711072065],[115.26504732486092,34.82478420174391],[115.26418783471233,34.82510212696635],[115.26113601918642,34.82229490755484]]]},"name":"孟道口","text":"孟道口"},{"geometry":{"type":"Polygon","coordinates":[[[115.26496154301049,34.825223856895285],[115.26807172509636,34.82384941355924],[115.26961570750554,34.82431062619754],[115.27038817255826,34.825634930518625],[115.27056089902916,34.82708033957583],[115.2671510514609,34.827883201498636],[115.2661858028807,34.82798911125118],[115.26496154301049,34.825223856895285]]]},"name":"张油房","text":"张油房"},{"geometry":{"type":"Polygon","coordinates":[[[115.25804348165063,34.830207722724225],[115.26309468572425,34.828734446739055],[115.26629341549432,34.82920450644826],[115.26938367766957,34.832502483650316],[115.26732426274106,34.834242519878295],[115.2656507459458,34.83471896222868],[115.26481384996991,34.83299308065618],[115.26318149910175,34.83393102104476],[115.25970018850101,34.83442343623943],[115.25749639491619,34.834563060892286],[115.25804348165063,34.830207722724225]]]},"name":"周庄寨村","text":"周庄寨村"},{"geometry":{"type":"Polygon","coordinates":[[[115.246457857411,34.8305946024277],[115.25535552278534,34.83340285605195],[115.26307370293824,34.83888056580285],[115.26290100976978,34.842192417890345],[115.25709679275124,34.84356659401026],[115.246457857411,34.8305946024277]]]},"name":"赵楼","text":"赵楼"},{"geometry":{"type":"Polygon","coordinates":[[[115.23023609654136,34.84239566784117],[115.23528359563893,34.84061693435778],[115.23929662274487,34.84008686994278],[115.24305027037377,34.84125374004413],[115.24391233871684,34.84416242968645],[115.23985610408268,34.844690897048906],[115.23614537072989,34.844897727908226],[115.23704986024609,34.848508878824575],[115.23575155745542,34.854254237777994],[115.23285857414918,34.85624232053992],[115.23107428808582,34.848333819211916],[115.2297370110966,34.84832113019758],[115.23023609654136,34.84239566784117]]]},"name":"翟园子村","text":"翟园子村"},{"geometry":{"type":"Polygon","coordinates":[[[115.20875675993962,34.89117684787604],[115.21172209453738,34.888984144551735],[115.21464533816187,34.88977500690839],[115.21180747800933,34.89190549292913],[115.20875675993962,34.89117684787604]]]},"name":"南黄庄","text":"南黄庄"},{"geometry":{"type":"Polygon","coordinates":[[[115.21089350338391,34.900058061486845],[115.21189314907109,34.9001238638785],[115.21275243706225,34.90125508465346],[115.21259185852728,34.90235557572683],[115.21163551083495,34.90349555534321],[115.20987468788472,34.90387305524674],[115.20883175444669,34.90162298578026],[115.20913205484341,34.90056651859245],[115.21089350338391,34.900058061486845]]]},"name":"张孟强村","text":"张孟强村"},{"geometry":{"type":"Polygon","coordinates":[[[115.2133979109014,34.90228029528546],[115.21391345605679,34.90062208942951],[115.21522591724288,34.89971520571996],[115.2179149170374,34.899690593329254],[115.21935743622552,34.90007944635692],[115.22015439028019,34.901284498244515],[115.21993947648754,34.90260690564764],[115.2192939881048,34.9042161804569],[115.2154631330791,34.90472888661805],[115.21473194420028,34.903380152751225],[115.21361333545333,34.903141578302865],[115.2133979109014,34.90228029528546]]]},"name":"蔡姜楼村","text":"蔡姜楼村"},{"geometry":{"type":"Polygon","coordinates":[[[115.24862245932628,34.90717455547632],[115.24762852795664,34.903844590944864],[115.24922258208044,34.9010411062571],[115.25258380692105,34.9012778300047],[115.25478070350675,34.903436041455706],[115.25452286553092,34.905163957648895],[115.25452290637071,34.9052340445956],[115.24862245932628,34.90717455547632]]]},"name":"吴河村","text":"吴河村"},{"geometry":{"type":"Polygon","coordinates":[[[115.25052218262965,34.91292169266327],[115.24965768838821,34.90891958490608],[115.25064722824916,34.907287561799414],[115.25568674836173,34.90754582050677],[115.2566365870968,34.911796292174664],[115.25052218262965,34.91292169266327]]]},"name":"董园村","text":"董园村"},{"geometry":{"type":"Polygon","coordinates":[[[115.23425563137977,34.903969261772495],[115.23693039891727,34.90378051359773],[115.23805568495884,34.90896988304617],[115.2453884485466,34.907611510759345],[115.24616744821375,34.91118931949428],[115.24668762656776,34.91565193312305],[115.24216027706053,34.91699410366181],[115.23366059251305,34.917462248229015],[115.2300365548604,34.91745524385277],[115.23042191059285,34.91413968854345],[115.22882358112399,34.91170212195624],[115.23425563137977,34.903969261772495]]]},"name":"董堂西村","text":"董堂西村"},{"geometry":{"type":"Polygon","coordinates":[[[115.22490483361287,34.917960105874556],[115.22921731366786,34.91739888772891],[115.22986215119586,34.915697963300204],[115.2286521707915,34.913148094661224],[115.22563272159015,34.91214031891479],[115.22334973311006,34.91319494259411],[115.22490483361287,34.917960105874556]]]},"name":"韩庄村","text":"韩庄村"},{"geometry":{"type":"Polygon","coordinates":[[[115.2001636100038,34.878981861188734],[115.19931079478545,34.87515792989268],[115.20016828187346,34.87414187393361],[115.20128219983197,34.87421785587213],[115.20258887122247,34.874312101820024],[115.20367935463764,34.87732501596939],[115.2001636100038,34.878981861188734]]]},"name":"杨堂","text":"杨堂"},{"geometry":{"type":"Polygon","coordinates":[[[115.1958176995237,34.87887815784883],[115.19943606692857,34.878079941326014],[115.19982187152175,34.877642306864416],[115.1990747797782,34.87512074873728],[115.19537052317943,34.87670880498031],[115.19545540862357,34.87762525293606],[115.19556152782279,34.87810149829026],[115.1958176995237,34.87887815784883]]]},"name":"赵寨","text":"赵寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.16753795719994,34.89176864326752],[115.17377090105097,34.89018615931024],[115.17466733123256,34.88926975539033],[115.1809414102118,34.890966914904986],[115.18807262505689,34.890715646147704],[115.18751837498004,34.88694065453173],[115.18651703475884,34.882912347320534],[115.193421099593,34.88068299884549],[115.19100647211401,34.878700150776915],[115.18310311970718,34.87988103089979],[115.1809229779943,34.88378570279436],[115.16634249937806,34.889373314400174],[115.16753795719994,34.89176864326752]]]},"name":"杨桥村","text":"杨桥村"},{"geometry":{"type":"Polygon","coordinates":[[[115.20297030026413,34.9132809888689],[115.20644247733091,34.90902694849663],[115.21009003335047,34.90662637943132],[115.21198082091632,34.906125496431024],[115.21546485123665,34.90761548379869],[115.21374500097036,34.90924812846759],[115.21207070477175,34.91161695110068],[115.20859343180906,34.915361445504786],[115.20387295641261,34.915677171017755],[115.20297030026413,34.9132809888689]]]},"name":"薄庄村","text":"薄庄村"},{"geometry":{"type":"Polygon","coordinates":[[[115.02426047900401,34.78869172760471],[115.02348644509011,34.78798855857258],[115.02356982601782,34.78291161997689],[115.02331154731273,34.78030371485147],[115.02481423590426,34.78008836382342],[115.02528830655714,34.78276704926753],[115.02859220317455,34.7824504872503],[115.02940941117646,34.7886920285145],[115.02426047900401,34.78869172760471]]]},"name":"戴寨","text":"戴寨"},{"geometry":{"type":"Polygon","coordinates":[[[115.01703857097102,34.78813201912697],[115.01600522343233,34.78733028630426],[115.01428280469555,34.78653659945237],[115.01389292583403,34.780230484945484],[115.02090518559507,34.77978504757848],[115.02142140938324,34.781121447256254],[115.02279627989897,34.780869511967275],[115.0231412272423,34.78375861394013],[115.0217668930227,34.78468090412],[115.0172086957419,34.785063422575845],[115.01703857097102,34.78813201912697]]]},"name":"土山村","text":"土山村"}]
js
注意：如果你的页面有百度api画的一些图的话，mapv必须设置zIndex，否则事件点击或者鼠标事件都会发生偏移
var dataSet = new mapv.DataSet(jsondata);
var options = {
fillStyle: 'rgba(255, 0, 0,0.1)',
strokeStyle: 'rgba(255, 0, 0,0.8)',
size: 2,
lineWidth: 1.5,
draw: 'simple',
zIndex:1,
label: { // 是否显示文字标签
show: true,
},
showText: true,
methods: { // 一些事件回调函数
click: function (item,e) { // 点击事件，返回对应点击元素的对象值
if(item)threeClick(e,item.property_id)
},
},
}
var mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
额外需求：添加多边形的名字
要求地图zoom14以下才会出现多边形名字
var dataText=[],mapvLayerText=''
for(var i=0;i<jsondata.length;i++){
var cen=getCenter(plyarr)//这个是获取多边形中心点的函数，里面的plyarr是多边形各个点
dataText.push({
geometry: {
type: 'Point',
coordinates: [cen.lng,cen.lat]
},
text: jsondata[i].property_name
});
}
var dataSet1 = new mapv.DataSet(dataText);
var options = {
draw: 'text',
avoid: true,
size: 12,
font: '18px Arial',
fillStyle: '#333',
zIndex:2,
// shadowColor: '#666',
// shadowBlur: 1
}
mapvLayerText = new mapv.baiduMapLayer(page.map, dataSet1, options);
var level=map.getZoom()
if(evel>14){
mapvLayerText.show()
}else{
mapvLayerText.hide()
}
map.addEventListener("zoomend", function () {
page.level=page.map.getZoom()
if(mapvLayerText){
if(evel>14){
mapvLayerText.show()
}else{
mapvLayerText.hide()
}
}
});
options.draw
options.draw
- simple 最直接的方式绘制点线面
- time 按时间字段来动画展示数据
- heatmap 热力图展示
- grid 网格状展示
- honeycomb 蜂窝状展示
- bubble 用不同大小的圆来展示
- intensity 根据不同的值对应按渐变色中颜色进行展示
- category 按不同的值进行分类，并使用对应的颜色展示
- choropleth 按不同的值区间进行分类，并使用对应的颜色展示
- text 展示文本
- icon 展示icon
需求实例二-点击一个多边形,该多边形变色
主要是点击事件获取这个多边形的边框信息，然后重新渲染，
续接上面的代码这里只写点击方法里面的东西
代码如下：
//以上代码省略这里只是一个例子-变色
//如果有text问题需求的，请注意zIndex不要超过text，要不然不显示名字
...
zIndex:1,
methods: { // 一些事件回调函数
click: function (item,e) { // 点击事件，返回对应点击元素的对象值
if(item){
threeClick(e,item.property_id)//点击出现的弹窗，可忽视
//通过 item 获取 坐标
var latlon = item.geometry.coordinates;
var blurDataSet = new mapv.DataSet([{
geometry: {
type: "Polygon",
coordinates: latlon
},
}]);
var blurLayer = new mapv.baiduMapLayer(that.map, blurDataSet, {fillStyle: 'yellow',strokeStyle: 'yellow', zIndex:1,});
}
},
},
需求实例三-大量渲染多边形是根据值不同颜色不同
注意：方法只是draw不一样，其他都差不多
方法一 draw:simple
simple 最直接的方式绘制点线面
//这里只显示部分代码，可以结合上下文看
//json是你的数据名称，plyarr是多边形边框经纬度，格式上面也有
//根据某个值判断fillStyle，strokeStyle写上颜色
json.push({
"geometry": {
"type": "Polygon",
"coordinates": [plyarr],
},
property_id:propLocateList[i].property_id,
text:propLocateList[i].property_name,
fillStyle: 'green', // 点数据时候使用
strokeStyle: 'green' // 线数据时候使用
})
方法二 draw: ‘intensity’
intensity 根据不同的值对应按渐变色中颜色进行展示
json.push({
"geometry": {
"type": "Polygon",
"coordinates": [plyarr],
},
count: 30 * Math.random()
})
var dataSet = new mapv.DataSet(json);//数值
//简写
var options = {
gradient: {
0: 'rgba(50, 50, 255, 0.8)',
0.5: 'rgba(255, 255, 50, 0.8)',
1: 'rgba(255, 55, 50, 0.8)'
},
max: 30,
draw: 'intensity'//这个是重点
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
方法二 draw: ‘category’
category 按不同的值进行分类，并使用对应的颜色展示
json.push({
"geometry": {
"type": "Polygon",
"coordinates": [plyarr],
},
count: 30 * Math.random()
})
var dataSet = new mapv.DataSet(json);//数值
var options = {
splitList: {
other: 'white',
1: 'blue',
2: 'yellow',
3: 'red'
},
size: 2,
max: 30,
draw: 'category'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
方法四-draw:choropleth
choropleth 按不同的值区间进行分类，并使用对应的颜色展示
json.push({
"geometry": {
"type": "Polygon",
"coordinates": [plyarr],
},
count: 30 * Math.random()
})
var dataSet = new mapv.DataSet(json);//数值
var options = {
splitList: [
{
start: 0,
end: 2,
value: 'red'
},{
start: 2,
end: 4,
value: 'yellow'
},{
start: 4,
value: 'blue'
}
],
max: 30,
draw: 'choropleth'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
持续更新中
类似资料：