百度地图行政区绘制
2020-11-16 本文已影响0人
上善若水zyz601
前段时间有一个很好玩的需求；绘制上海行政区的边界线而且还要在地图上打上热力点，看了下百度地图可以实现就顺便研究了一下，简单的写了demo记录一下。
1.首先获取每个行政区域的边界坐标值，可能会有很多。使用以下方法：
function getBoundary()
{
//bdary存储行政区域边界，name存储查询名称
var bdary = new BMap.Boundary();
var names = ['崇明区']
for(var m = 0; m < names.length;m++){
bdary.get(names[m], function(rs)
{
//存储行政区域边界的点数
var count = rs.boundaries.length;
console.log(rs)
});
}
}
最后的json数据文件传不了，贴上又太多。需要的话也可以私发，或者通过上面方法一个区一个区自己获取；
2.获取到的坐标值存入boundaryPoints对象，开始绘制线；
function getBoundary2(point) {
var n = []
, pointArray = []
, pointArr = point.split(";");
for (var i = 0; i < pointArr.length; i++) {
var tempPoint = pointArr[i].split(",");
n.push(new BMapGL.Point(parseFloat(tempPoint[0]), parseFloat(tempPoint[1])));
}
;
var ply = new BMapGL.Polygon(n, {
strokeColor: "red",
strokeWeight: 1,
strokeOpacity: 1,
fillColor: "transparent",
// fillOpacity: 0,
strokeStyle: "solid",
enableClicking: !1
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
map.setViewport(pointArray); //调整视野
}
setTimeout(function () {
getBoundary2(boundaryPoints.pudongxinqu);//
getBoundary2(boundaryPoints.baoshan);//
getBoundary2(boundaryPoints.jingan);//
getBoundary2(boundaryPoints.huangpu);//
getBoundary2(boundaryPoints.xuhui);// 徐汇区
getBoundary2(boundaryPoints.changning);// 长宁区
getBoundary2(boundaryPoints.putuo);// 普陀区
getBoundary2(boundaryPoints.hongkou);// 虹口区
getBoundary2(boundaryPoints.yangpu);
getBoundary2(boundaryPoints.minhang);
getBoundary2(boundaryPoints.jiading);
getBoundary2(boundaryPoints.jinshan);
getBoundary2(boundaryPoints.songjiang);
getBoundary2(boundaryPoints.qingpu);
getBoundary2(boundaryPoints.fengxian);
getBoundary2(boundaryPoints.chongming);
}, 1000);
也就是以上简单的两个步骤，行政区域就画好了。美中不足就是部分区域有误差，但是这些坐标值都是百度的API返回的。先看看效果图。
屏幕快照 2020-11-16 上午10.08.41.png
3.打热力点；其实吧这个需要使用的地图类型是type=webgl；引入的文件也不一样；
<script src="./mapv.min.js"></script>
<script src="./common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.82/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.82/dist/mapvgl.threelayers.min.js"></script>
以上几个文件是需要额外引入的，其中mapv.min.js 和 common.js 在百度地图官方demo里扒下来放在本地才可以使用；
//绘制热力点
var view = new mapvgl.View({
effects: [
new mapvgl.BloomEffect({
threshold: 0.2,
blurSize: 2.0
}),
],
map: map
});
var result = [
{val:789,lng:121.431782004453,lat:30.9642681341948},
{val:708,lng:121.431782004453,lat:30.9642681341949},
{val:670,lng:121.919157575991,lat:30.9035939590744},
{val:667,lng:121.825355226495,lat:31.3558049586876},
{val:493,lng:121.802442931309,lat:30.912953176492},
{val:461,lng:121.550541749675,lat:30.9290422415401},
{val:449,lng:121.671806198764,lat:31.266094798695},
{val:403,lng:121.492975727007,lat:30.8132603539635},
{val:393,lng:121.506041941946,lat:30.9772459802241},
{val:389,lng:121.506041941946,lat:30.9772459802241},
{val:380,lng:121.595527629271,lat:31.344707142849},
{val:358,lng:121.633617865205,lat:31.2163921074268},
{val:329,lng:121.505589518296,lat:30.9748270590443},
{val:289,lng:121.450802596354,lat:30.91719334329},
{val:281,lng:121.919157575994,lat:30.9035939590741},
{val:279,lng:121.478952949669,lat:30.9542164755455},
{val:278,lng:121.182946638145,lat:31.1231703344326},
{val:277,lng:121.497595566744,lat:30.8933242444828},
{val:275,lng:121.919157575994,lat:30.9035939590741},
{val:268,lng:121.805974880451,lat:30.9873359787536},
{val:264,lng:121.066772708555,lat:30.9339603915668},
{val:242,lng:121.557204515666,lat:30.8558976763577},
{val:239,lng:121.835574315292,lat:30.996177094192},
{val:231,lng:121.556825559383,lat:30.9789126082471},
{val:231,lng:121.805974880451,lat:30.9873359787536},
{val:225,lng:121.455752352081,lat:30.9163614828075},
{val:224,lng:121.842784510913,lat:31.0316005217389},
{val:221,lng:121.475382746587,lat:31.6775657927774},
{val:220,lng:121.483804069933,lat:31.2532254299349},
{val:210,lng:121.188637727918,lat:30.7922375251362},
{val:209,lng:121.27694378831,lat:31.0844573320434},
{val:204,lng:121.726555647371,lat:30.8643323279911},
{val:203,lng:121.532966511393,lat:31.1024047266507},
{val:200,lng:121.559616751771,lat:30.8679168721894},
{val:199,lng:121.80244293131,lat:30.912953176492},
{val:198,lng:121.848695731111,lat:30.984607582377},
{val:197,lng:121.196863988484,lat:31.0412119086996},
{val:196,lng:121.482935393135,lat:31.1791900222244},
{val:193,lng:121.137110401217,lat:31.0338670160508},
{val:191,lng:121.509840746203,lat:30.9510788225807},
{val:188,lng:121.484852011195,lat:31.2498049878928},
{val:185,lng:121.919157575994,lat:30.9035939590742},
{val:180,lng:121.244243804633,lat:31.3651819786016},
{val:177,lng:121.234877923968,lat:31.0201950927357},
{val:174,lng:121.485388367971,lat:30.9148822709318},
{val:174,lng:121.44215110879,lat:30.9968866651112},
{val:170,lng:121.311474772028,lat:31.0600329323991},
{val:166,lng:121.672344634437,lat:30.8756146973743},
{val:165,lng:121.576505888384,lat:31.1199795441317},
{val:156,lng:121.60568207854,lat:31.5274853368479},
{val:155,lng:121.115410508549,lat:30.9878654834998},
{val:155,lng:121.278846064208,lat:31.2179126091068},
{val:154,lng:121.595442418422,lat:30.9342479559519},
{val:153,lng:121.354685836853,lat:31.0415199403802},
{val:147,lng:121.539971615232,lat:30.8499012697144},
{val:146,lng:121.300561272738,lat:30.9429395064981},
{val:145,lng:121.510282932176,lat:30.9199026025525},
{val:143,lng:121.620804576506,lat:30.9170400095572},
{val:143,lng:121.202502901818,lat:31.0144435019937},
{val:143,lng:121.174486997433,lat:30.9765287135657},
{val:140,lng:121.599526805227,lat:31.6168179361215},
{val:134,lng:121.230235738028,lat:31.035863004402},
{val:133,lng:121.13742428642,lat:30.9588126757972},
{val:130,lng:121.514584698004,lat:31.3060890902552},
{val:128,lng:121.44408570109,lat:31.0492754763604},
{val:127,lng:121.441139879083,lat:30.9754426095972},
{val:127,lng:121.135366628957,lat:30.9429512015793},
{val:126,lng:121.271085451819,lat:31.1193831878061},
{val:125,lng:121.459968251416,lat:30.9358666523786},
{val:125,lng:121.241834330714,lat:31.0346056252242},
{val:123,lng:121.317677597878,lat:31.1247943062829},
{val:121,lng:121.486355038606,lat:30.8995631219027},
{val:121,lng:121.482429151274,lat:31.3250134511818},
{val:121,lng:121.300561272737,lat:30.9429395064981},
{val:119,lng:121.747675150973,lat:30.8802306329458},
{val:118,lng:121.321023546391,lat:31.7554379495148},
{val:118,lng:121.664918938184,lat:31.6064714707181},
{val:117,lng:121.733431213634,lat:31.3703927949236},
{val:117,lng:121.382316112456,lat:31.0711967944921},
{val:111,lng:121.504126851383,lat:31.3107512701864},
{val:111,lng:121.048384557614,lat:30.8870916012052},
{val:110,lng:121.221979201536,lat:31.0158835895431},
{val:108,lng:121.550868597551,lat:30.9165253009273},
{val:108,lng:121.146965943051,lat:31.0043284431695},
{val:102,lng:121.491866839276,lat:31.2495797775476},
{val:101,lng:121.591150022426,lat:31.244807057978},
{val:98,lng:121.215305475087,lat:30.9331621654264},
{val:97,lng:121.502174582591,lat:31.28969767556},
{val:95,lng:121.278104305216,lat:31.0372711924916},
{val:95,lng:121.604405559378,lat:31.2957034135456},
{val:95,lng:121.704849605714,lat:31.0398062449016},
{val:94,lng:121.255074739767,lat:31.0205833905096},
{val:92,lng:121.504450069842,lat:31.2984000328842},
{val:90,lng:121.79327301289,lat:30.9876258184408},
{val:88,lng:121.448166964302,lat:30.990603539043},
{val:88,lng:121.51002770243,lat:31.2799981213916},
{val:88,lng:121.494224575566,lat:31.1404654201734},
{val:88,lng:121.477819805974,lat:31.2859274687889},
{val:86,lng:121.322552187283,lat:31.822488386106},
{val:84,lng:121.848695731112,lat:30.984607582377},
{val:83,lng:121.471248655383,lat:30.9542732422639},
{val:82,lng:121.542603567176,lat:31.2784034588956},
{val:81,lng:121.524256332712,lat:31.2082452989943},
{val:80,lng:121.485884824542,lat:30.9181477934037},
{val:80,lng:121.719302377399,lat:31.390478131818},
{val:80,lng:121.048288770175,lat:30.8875555335393},
{val:80,lng:121.345033485478,lat:31.1810822438531},
{val:79,lng:121.406234657791,lat:31.3603839719667},
{val:79,lng:121.805974880451,lat:30.9873359787537},
{val:78,lng:121.385606630368,lat:30.9040154425673},
{val:78,lng:121.388048422513,lat:30.9547448464682},
{val:77,lng:121.80244293131,lat:30.912953176492},
{val:76,lng:121.772429197967,lat:31.1405690784217},
{val:73,lng:121.583244563776,lat:31.3481124734573},
{val:73,lng:121.583829958072,lat:31.3499522198157},
{val:72,lng:121.45104004335,lat:31.6563862764015},
{val:71,lng:121.644959598817,lat:30.9181286098758},
{val:68,lng:121.564051689508,lat:31.2313399710765},
{val:66,lng:121.638982051176,lat:30.9653199921645},
{val:66,lng:121.840418014645,lat:31.4843066111844},
{val:66,lng:121.529730442481,lat:31.278820401274},
{val:66,lng:121.521783761974,lat:31.2581604725776},
{val:66,lng:121.523902007183,lat:31.2811376338763},
{val:65,lng:121.319033767147,lat:31.2974336486885},
{val:65,lng:121.726990456666,lat:30.9587533654403},
{val:65,lng:121.367458630136,lat:31.0745649560701},
{val:63,lng:121.506476933774,lat:31.2801574791253},
{val:63,lng:121.393936705248,lat:31.0409552364329},
{val:62,lng:121.335236988661,lat:31.3320597271515},
];
draw();
function draw() {
var data = [];
for (var i = 0; i < result.length; i++) {
var line = result[i];
data.push({
geometry: {
type: 'Point',
coordinates: [line.lng, line.lat]
},
properties: {
count: line.val
}
});
}
var whiteLayer = new mapvgl.HeatPointLayer({
blend: 'lighter',
style: 'grid',
shape: 'square',
size: 1,
min: 1,
max: 2,
gradient: {
0: '#47f4fc',
0.2: '#47f4fc',
0.5: '#47f4fc',
0.51: '#47f4fc',
1: '#47f4fc'
}
});
var yellowLayer = new mapvgl.HeatPointLayer({
blend: 'lighter',
style: 'grid',
size: 4,
min: 1,
max: 2,
gradient: {
0: 'rgb(200, 200, 200, 0)',
0.2: 'rgb(200, 200, 200, 0)',
0.5: 'rgb(226, 95, 0, 0.9)',
1: '#47f4fc'
}
});
view.addLayer(yellowLayer);
// view.addLayer(whiteLayer);
// whiteLayer.setData(data);
yellowLayer.setData(data);
}
result数组里的热力点可能会有很多，我删了不少，大致就是这样；
4.最终效果
屏幕快照 2020-11-16 上午10.25.47.png
