新需求，地图只展示中国地图，且放大能看到地图的所有信息，还要展示每个区域的数量且能够点击进行一些操作。
搜索看了一圈的文章，某大佬的热点图 只展示中国地图其他地图隐藏非常全面，且搜索的全网用的代码或者部分代码几乎都是抄大佬热点图的代码的。但是用的是2.0版本的百度地图，使用bMap不是用bMapGL。而且只显示一屏，感觉不大适配我们vue项目里边的使用总是有各种奇奇怪怪的报错。
最终用1.0 试验下来了，只展示中国地图 其他区域不管你如何滑动都是看不见的。 3.0也测试过能展示这个效果，2.0使用的bMap没尝试过，感觉不适配，有兴趣的可以自己尝试一下。
以下是完成的一个效果图，放大到十几级都可以看到具体街道，后期会加上mapv的数据展示。
查找研究了半天多，算是干货了
效果图：
加上json样式后
代码实现
var path = [
new BMapGL.Point(135.077218,48.544352),
new BMapGL.Point(134.92218,48.584352),
new BMapGL.Point(134.827218,48.534352),
new BMapGL.Point(134.727669,48.495377),
new BMapGL.Point(134.304531,48.394091),
new BMapGL.Point(133.513447,48.177476),
new BMapGL.Point(132.832747,48.054205),
new BMapGL.Point(132.519993,47.789172),
new BMapGL.Point(131.765704,47.813962),
new BMapGL.Point(131.103402,47.776772),
new BMapGL.Point(130.919429,48.331824),
new BMapGL.Point(130.77225,48.868729),
new BMapGL.Point(129.907577,49.351849),
new BMapGL.Point(128.73015,49.699156),
new BMapGL.Point(127.791888,49.85404),
new BMapGL.Point(127.791888,50.492084),
new BMapGL.Point(126.927215,51.616759),
new BMapGL.Point(126.467283,52.579818),
new BMapGL.Point(125.952158,53.059077),
new BMapGL.Point(124.701142,53.313247),
new BMapGL.Point(123.56051,53.664362),
new BMapGL.Point(121.555204,53.46722),
new BMapGL.Point(120.340983,53.125528),
new BMapGL.Point(119.95464,52.579818),
new BMapGL.Point(120.616942,52.523746),
new BMapGL.Point(120.506559,52.095236),
new BMapGL.Point(119.862653,51.616759),
new BMapGL.Point(119.365926,50.959196),
new BMapGL.Point(119.089967,50.362806),
new BMapGL.Point(119.108364,50.05583),
new BMapGL.Point(118.133307,49.925357),
new BMapGL.Point(117.471005,49.794528),
new BMapGL.Point(116.808702,49.889712),
new BMapGL.Point(116.385564,49.758785),
new BMapGL.Point(115.962426,48.953617),
new BMapGL.Point(115.520891,48.147476),
new BMapGL.Point(115.796851,47.677465),
new BMapGL.Point(116.27518,47.652609),
new BMapGL.Point(117.103059,47.652609),
new BMapGL.Point(118.004526,47.801568),
new BMapGL.Point(118.887596,47.577968),
new BMapGL.Point(119.402721,47.127871),
new BMapGL.Point(119.402721,46.800397),
new BMapGL.Point(118.464459,46.825659),
new BMapGL.Point(117.103059,46.648575),
new BMapGL.Point(115.980824,46.088213),
new BMapGL.Point(115.226534,45.702829),
new BMapGL.Point(114.159491,45.275796),
new BMapGL.Point(112.761297,45.171782),
new BMapGL.Point(111.639061,45.132727),
new BMapGL.Point(111.436691,44.55683),
new BMapGL.Point(111.51028,44.001703),
new BMapGL.Point(110.682402,43.387647),
new BMapGL.Point(108.897864,42.658724),
new BMapGL.Point(106.892559,42.522781),
new BMapGL.Point(103.82021,42.140555),
new BMapGL.Point(102.422016,42.536389),
new BMapGL.Point(101.336575,42.82146),
new BMapGL.Point(99.478448,42.929712),
new BMapGL.Point(97.601924,42.997272),
new BMapGL.Point(96.019756,43.815487),
new BMapGL.Point(92.72664,45.288784),
new BMapGL.Point(91.144473,45.599605),
new BMapGL.Point(91.457227,46.483616),
new BMapGL.Point(90.794924,47.553064),
new BMapGL.Point(89.562305,48.221295),
new BMapGL.Point(88.2377,48.953617),
new BMapGL.Point(87.722576,49.279683),
new BMapGL.Point(87.097067,49.255604),
new BMapGL.Point(86.60034,49.122957),
new BMapGL.Point(86.177203,48.710696),
new BMapGL.Point(85.533297,48.344091),
new BMapGL.Point(85.404516,47.875888),
new BMapGL.Point(85.349324,47.390897),
new BMapGL.Point(84.926186,47.215692),
new BMapGL.Point(83.233635,47.315881),
new BMapGL.Point(82.865689,47.328391),
new BMapGL.Point(82.258578,45.844449),
new BMapGL.Point(82.368962,45.366651),
new BMapGL.Point(82.093003,45.30177),
new BMapGL.Point(80.989165,45.275796),
new BMapGL.Point(79.903724,45.015402),
new BMapGL.Point(80.326862,44.332772),
new BMapGL.Point(80.510835,43.642047),
new BMapGL.Point(80.621219,43.186043),
new BMapGL.Point(80.27167,43.010775),
new BMapGL.Point(79.885327,42.304653),
new BMapGL.Point(79.259819,41.838593),
new BMapGL.Point(78.487133,41.576647),
new BMapGL.Point(77.916816,41.341363),
new BMapGL.Point(77.272911,41.16086),
new BMapGL.Point(76.739389,41.02167),
new BMapGL.Point(76.26106,40.546202),
new BMapGL.Point(75.672346,40.75639),
new BMapGL.Point(74.881262,40.630357),
new BMapGL.Point(74.255754,40.293095),
new BMapGL.Point(73.777425,39.939968),
new BMapGL.Point(73.74063,39.556517),
new BMapGL.Point(73.53826,39.34256),
new BMapGL.Point(73.685438,38.725549),
new BMapGL.Point(74.034987,38.407771),
new BMapGL.Point(74.458125,38.335352),
new BMapGL.Point(74.734084,38.074036),
new BMapGL.Point(74.844468,37.577865),
new BMapGL.Point(74.678892,37.21089),
new BMapGL.Point(74.6237,36.975076),
new BMapGL.Point(75.414784,36.501232),
new BMapGL.Point(75.801127,35.934721),
new BMapGL.Point(76.518622,35.379154),
new BMapGL.Point(77.309706,35.137703),
new BMapGL.Point(77.972008,34.758986),
new BMapGL.Point(78.376749,34.241106),
new BMapGL.Point(78.523927,33.473647),
new BMapGL.Point(78.7079,32.978834),
new BMapGL.Point(78.450338,32.745921),
new BMapGL.Point(78.30316,32.340745),
new BMapGL.Point(78.431941,32.04349),
new BMapGL.Point(78.671106,31.572152),
new BMapGL.Point(78.855079,31.145879),
new BMapGL.Point(79.425395,30.797108),
new BMapGL.Point(80.087697,30.447053),
new BMapGL.Point(81.301919,29.855455),
new BMapGL.Point(81.90903,30.0157),
new BMapGL.Point(82.7921,29.485907),
new BMapGL.Point(84.539843,28.661613),
new BMapGL.Point(85.71727,28.124721),
new BMapGL.Point(86.821108,27.732537),
new BMapGL.Point(87.998535,27.69979),
new BMapGL.Point(88.568851,27.716165),
new BMapGL.Point(88.863208,27.108656),
new BMapGL.Point(89.580703,27.190949),
new BMapGL.Point(89.654292,27.765274),
new BMapGL.Point(90.923705,27.650651),
new BMapGL.Point(91.751584,27.223849),
new BMapGL.Point(92.04594,26.778874),
new BMapGL.Point(92.965805,26.646689),
new BMapGL.Point(93.830478,26.960375),
new BMapGL.Point(94.860727,27.453873),
new BMapGL.Point(96.185332,27.798001),
new BMapGL.Point(97.123594,27.503101),
new BMapGL.Point(97.620321,27.896122),
new BMapGL.Point(97.675513,28.059457),
new BMapGL.Point(98.080254,27.306056),
new BMapGL.Point(98.595378,27.009824),
new BMapGL.Point(98.393008,26.066566),
new BMapGL.Point(97.804294,25.483523),
new BMapGL.Point(97.528335,24.847254),
new BMapGL.Point(97.417951,24.10637),
new BMapGL.Point(97.804294,23.717348),
new BMapGL.Point(98.595378,23.886634),
new BMapGL.Point(98.834543,23.123105),
new BMapGL.Point(99.239283,22.697005),
new BMapGL.Point(99.165694,22.303805),
new BMapGL.Point(99.386462,21.857966),
new BMapGL.Point(100.251135,21.445169),
new BMapGL.Point(100.839848,21.290063),
new BMapGL.Point(101.704521,21.031186),
new BMapGL.Point(102.05407,21.152053),
new BMapGL.Point(101.998878,21.582901),
new BMapGL.Point(101.962083,22.132497),
new BMapGL.Point(102.587591,22.355156),
new BMapGL.Point(103.599443,22.338041),
new BMapGL.Point(104.482513,22.560368),
new BMapGL.Point(105.383981,22.799392),
new BMapGL.Point(106.083078,22.59454),
new BMapGL.Point(106.469421,22.286683),
new BMapGL.Point(106.874162,21.754879),
new BMapGL.Point(107.315697,21.514051),
new BMapGL.Point(107.812424,21.410715),
new BMapGL.Point(107.775629,21.134792),
new BMapGL.Point(106.929353,20.269201),
new BMapGL.Point(106.175064,19.17158),
new BMapGL.Point(106.377435,18.470789),
new BMapGL.Point(107.297299,17.23746),
new BMapGL.Point(109.008248,15.675143),
new BMapGL.Point(109.688948,13.705222),
new BMapGL.Point(109.652153,11.664031),
new BMapGL.Point(108.750686,9.571001),
new BMapGL.Point(108.198767,6.876803),
new BMapGL.Point(108.493124,5.090099),
new BMapGL.Point(109.817729,3.612656),
new BMapGL.Point(111.10554,3.298351),
new BMapGL.Point(114.71141,5.514272),
new BMapGL.Point(116.256783,7.556636),
new BMapGL.Point(118.758815,10.883133),
new BMapGL.Point(119.531502,13.669242),
new BMapGL.Point(119.494707,16.617614),
new BMapGL.Point(120.414572,18.961654),
new BMapGL.Point(121.51841,20.633358),
new BMapGL.Point(122.751029,22.303805),
new BMapGL.Point(123.247756,23.378111),
new BMapGL.Point(124.811526,25.68375),
new BMapGL.Point(126.577667,25.900278),
new BMapGL.Point(127.479134,26.67975),
new BMapGL.Point(128.454191,28.189945),
new BMapGL.Point(128.766945,29.93561),
new BMapGL.Point(128.73015,31.650877),
new BMapGL.Point(127.957464,32.153119),
new BMapGL.Point(127.221572,32.745921),
new BMapGL.Point(127.019202,33.596907),
new BMapGL.Point(125.988953,33.827543),
new BMapGL.Point(125.731391,34.546135),
new BMapGL.Point(125.878569,35.454458),
new BMapGL.Point(125.731391,36.634799),
new BMapGL.Point(125.80498,37.51927),
new BMapGL.Point(124.425183,37.972159),
new BMapGL.Point(124.498772,38.58128),
new BMapGL.Point(125.013896,39.242487),
new BMapGL.Point(124.590758,39.471014),
new BMapGL.Point(124.296402,39.840762),
new BMapGL.Point(124.388388,40.081441),
new BMapGL.Point(124.940307,40.335346),
new BMapGL.Point(125.731391,40.630357),
new BMapGL.Point(126.448885,40.96591),
new BMapGL.Point(126.798434,41.493704),
new BMapGL.Point(127.111188,41.410654),
new BMapGL.Point(127.883875,41.271998),
new BMapGL.Point(128.490985,41.452192),
new BMapGL.Point(128.307012,41.879854),
new BMapGL.Point(128.950918,41.921089),
new BMapGL.Point(129.484439,42.12686),
new BMapGL.Point(129.999564,42.549994),
new BMapGL.Point(130.073153,42.807915),
new BMapGL.Point(130.404304,42.495557),
new BMapGL.Point(130.77225,42.359256),
new BMapGL.Point(130.698661,42.726583),
new BMapGL.Point(131.195388,42.848541),
new BMapGL.Point(131.360964,43.494895),
new BMapGL.Point(131.342566,44.491021),
new BMapGL.Point(131.820896,45.002351),
new BMapGL.Point(132.998323,44.976239),
new BMapGL.Point(133.623831,45.599605),
new BMapGL.Point(134.102161,46.394582),
new BMapGL.Point(134.37812,47.228226),
new BMapGL.Point(134.874847,47.851127),
new BMapGL.Point(134.985231,48.233588),
new BMapGL.Point(135.13241,48.454352),
new BMapGL.Point(135.077218,48.474352),
];
// 创建地图掩模类
var mapmask = new BMapGL.MapMask(path, {
isBuildingMask: true,
isPoiMask: true,
isMapMask: true,
showRegion: 'inside'
});想直接ctrl+c ctrl+v的同学移步github
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
