首页 > 其他分享> 文章详细

百度地图JS API制作专题图

2021-02-12 09:32:47 阅读：182 来源： 互联网

标签：return cB JS API 百度 lat lng pi math

最近看了一份人民大学的报告，《中国城市政商关系排行榜2020》，https://new.qq.com/omn/20201230/20201230A0F3MY00.html。

讲的是中国各个城市的政商关系健康指数，决定拿这份报告中的数据，来做一份html的专题图。

效果如下：

一、数据获取

做这份专题图，需要两个数据，一个是各省的边界数据，一个是各省的政商关系健康指数，后者从报告中摘取就行。

前者的参考腾讯地图web api：https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistrict（因为百度没有开放获取省边界数据的接口）。

获取数据python3脚本：

import requests
import time
import shapely
# 获取省code和省name列表
def getAllProvince(key):
    url = 'http://apis.map.qq.com/ws/district/v1/list?key='+key
    reponse = requests.get(url=url)
    reponse.encoding = 'utf-8'
    data = reponse.json()
    provincelist = []
    for r in data['result'][0]:
        provincelist.append(r['id']+'\t'+r['name'])
    return provincelist
# 获取省围栏
def getProvincePolygon(key,provinceCode):
    url = 'https://apis.map.qq.com/ws/district/v1/search?&keyword='+provinceCode+'&key='+key+'&get_polygon=2&max_offset=3000'
    print(url)
    reponse = requests.get(url=url)
    reponse.encoding = 'utf-8'
    data = reponse.json()
    print(data)
    path = data['result'][0][0]['polygon']
    polygonlist = []
    # 对响应结果进行差分解压，lng lat,lng lat,lng lat|lng lat……格式
    for p in path:
        print(p)
        ringlist = []
        pointnum = int(len(p)/2)
        for i in range(0,pointnum):
            ringlist.append(str(p[i*2])+' '+str(p[i*2+1]))
        ringlist.append(ringlist[0])
        polygonlist.append('POLYGON(('+','.join(ringlist)+'))')
    return polygonlist
key = '你的key'

healthlist = {'北京':86.33,'上海':81.84,'天津':62.73,'海南':51.43,'浙江':49.42,'山东':48.91,
              '广东':47.47,'江苏':45,'重庆':44.64,'福建':40.39,'贵州':38.4,'四川':36.74,'安徽':36.52,'广西':34.95,'江西':33.77,
              '湖北':31.56,'宁夏':28.82,'湖南':28.03,'辽宁':27.7,'山西':25.73,'内蒙古':25.27,'陕西':23.95,'西藏':23.94,'甘肃':22.56,'新疆':21.99,
              '青海':21.69,'河北':21.39,'吉林':21.16,'黑龙江':21.08,'河南':20.49,'云南':19.17}

f = open(r'province.txt','a',encoding='utf-8')
f.write('\t'.join(['code','name','health','polygon'])+'\n')
province_list = getAllProvince(key)
for p in province_list:
    code,name = p.split('\t')
    if healthlist.__contains__(name):
        health = healthlist[name]
    else:
        health = 0.0
    time.sleep(1)
    polygonlist = getProvincePolygon(key,code)
    for pl in polygonlist:
        print(pl)
        f.write('\t'.join([code,name,str(health),pl])+'\n')
f.close()

二、坐标系转换

因为省边界数据是gcj02坐标系的，而百度底图是bd09坐标系的，所以需要将上面获取到的数据转换成bd09坐标系。

坐标系转换脚本CoordinateTransform.py如下：

"""

# wgs84\gcj02\bd09坐标系转换

# wgs84\Pseudo-Mercator投影转换

# bd09\bd09mc投影转换

"""

import math

x_pi = 3.14159265358979324 * 3000.0 / 180.0

pi = 3.1415926535897932384626 # π

a = 6378245.0 # 长半轴

ee = 0.00669342162296594323 # 扁率

#百度墨卡托投影纠正矩阵

LLBAND =[75, 60, 45, 30, 15, 0]

LL2MC = [[-0.0015702102444, 111320.7020616939, 1704480524535203, -10338987376042340, 26112667856603880, -35149669176653700, 26595700718403920, -10725012454188240, 1800819912950474, 82.5],

         [0.0008277824516172526, 111320.7020463578, 647795574.6671607, -4082003173.641316, 10774905663.51142, -15171875531.51559, 12053065338.62167, -5124939663.577472, 913311935.9512032, 67.5],

         [0.00337398766765, 111320.7020202162, 4481351.045890365, -23393751.19931662, 79682215.47186455, -115964993.2797253, 97236711.15602145, -43661946.33752821, 8477230.501135234, 52.5],

         [0.00220636496208, 111320.7020209128, 51751.86112841131, 3796837.749470245, 992013.7397791013, -1221952.21711287, 1340652.697009075, -620943.6990984312, 144416.9293806241, 37.5],

         [-0.0003441963504368392, 111320.7020576856, 278.2353980772752, 2485758.690035394, 6070.750963243378, 54821.18345352118, 9540.606633304236, -2710.55326746645, 1405.483844121726, 22.5],

         [-0.0003218135878613132, 111320.7020701615, 0.00369383431289, 823725.6402795718, 0.46104986909093, 2351.343141331292, 1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45]]

# 百度墨卡托转回到百度经纬度纠正矩阵

MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]

MC2LL = [[1.410526172116255e-8, 0.00000898305509648872, -1.9939833816331, 200.9824383106796, -187.2403703815547, 91.6087516669843, -23.38765649603339, 2.57121317296198, -0.03801003308653, 17337981.2],

      [-7.435856389565537e-9, 0.000008983055097726239, -0.78625201886289, 96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737, -16.50741931063887, 2.28786674699375, 10260144.86],

      [-3.030883460898826e-8, 0.00000898305509983578, 0.30071316287616, 59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908, -3.29883767235584, 0.32710905363475, 6856817.37],

      [-1.981981304930552e-8, 0.000008983055099779535, 0.03278182852591, 40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263, 0.12923347998204, -0.04625736007561, 4482777.06],

      [3.09191371068437e-9, 0.000008983055096812155, 0.00006995724062, 23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273, 0.03430082397953, -0.00466043876332, 2555164.4],

      [2.890871144776878e-9, 0.000008983055095805407, -3.068298e-8, 7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596, 0.00010322952773, -0.00000323890364, 826088.5]]



def gcj02tobd09(lng, lat):

    """

    火星坐标系(GCJ02)转百度坐标系(BD09)

    :param lng:火星坐标经度

    :param lat:火星坐标纬度

    :return:

    """

    z = math.sqrt(lng * lng + lat * lat) + 0.00002 * math.sin(lat * x_pi)

    theta = math.atan2(lat, lng) + 0.000003 * math.cos(lng * x_pi)

    bd_lng = z * math.cos(theta) + 0.0065

    bd_lat = z * math.sin(theta) + 0.006

    return [bd_lng, bd_lat]



def bd09togcj02(bd_lon, bd_lat):

    """

    百度坐标系(BD09)转火星坐标系(GCJ02)

    :param bd_lat:百度坐标纬度

    :param bd_lon:百度坐标经度

    :return:转换后的坐标列表形式

    """

    x = bd_lon - 0.0065

    y = bd_lat - 0.006

    z = math.sqrt(x * x + y * y) - 0.00002 * math.sin(y * x_pi)

    theta = math.atan2(y, x) - 0.000003 * math.cos(x * x_pi)

    gg_lng = z * math.cos(theta)

    gg_lat = z * math.sin(theta)

    return [gg_lng, gg_lat]



def wgs84togcj02(lng, lat):

    """

    WGS84转GCJ02(火星坐标系)

    :param lng:WGS84坐标系的经度

    :param lat:WGS84坐标系的纬度

    :return:

    """

    if out_of_china(lng, lat): # 判断是否在国内

        return lng, lat

    dlat = transformlat(lng - 105.0, lat - 35.0)

    dlng = transformlng(lng - 105.0, lat - 35.0)

    radlat = lat / 180.0 * pi

    magic = math.sin(radlat)

    magic = 1 - ee * magic * magic

    sqrtmagic = math.sqrt(magic)

    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi)

    dlng = (dlng * 180.0) / (a / sqrtmagic * math.cos(radlat) * pi)

    mglat = lat + dlat

    mglng = lng + dlng

    return [mglng, mglat]



def gcj02towgs84(lng, lat):

    """

    GCJ02(火星坐标系)转GPS84

    :param lng:火星坐标系的经度

    :param lat:火星坐标系纬度

    :return:

    """

    if out_of_china(lng, lat):

        return lng, lat

    dlat = transformlat(lng - 105.0, lat - 35.0)

    dlng = transformlng(lng - 105.0, lat - 35.0)

    radlat = lat / 180.0 * pi

    magic = math.sin(radlat)

    magic = 1 - ee * magic * magic

    sqrtmagic = math.sqrt(magic)

    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi)

    dlng = (dlng * 180.0) / (a / sqrtmagic * math.cos(radlat) * pi)

    mglat = lat + dlat

    mglng = lng + dlng

    return [lng * 2 - mglng, lat * 2 - mglat]



def transformlat(lng, lat):

    ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * math.sqrt(math.fabs(lng))

    ret += (20.0 * math.sin(6.0 * lng * pi) + 20.0 *math.sin(2.0 * lng * pi)) * 2.0 / 3.0

    ret += (20.0 * math.sin(lat * pi) + 40.0 *

    math.sin(lat / 3.0 * pi)) * 2.0 / 3.0

    ret += (160.0 * math.sin(lat / 12.0 * pi) + 320 *

    math.sin(lat * pi / 30.0)) * 2.0 / 3.0

    return ret



def transformlng(lng, lat):

    ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * math.sqrt(math.fabs(lng))

    ret += (20.0 * math.sin(6.0 * lng * pi) + 20.0 *math.sin(2.0 * lng * pi)) * 2.0 / 3.0

    ret += (20.0 * math.sin(lng * pi) + 40.0 *math.sin(lng / 3.0 * pi)) * 2.0 / 3.0

    ret += (150.0 * math.sin(lng / 12.0 * pi) + 300.0 *math.sin(lng / 30.0 * pi)) * 2.0 / 3.0

    return ret



def out_of_china(lng, lat):

    """

    判断是否在国内，不在国内不做偏移

    :param lng:

    :param lat:

    :return:

    """

    if lng < 72.004 or lng > 137.8347:

        return True

    if lat < 0.8293 or lat > 55.8271:

        return True

    return False



def wgs84tomercator(lng,lat):

    """

    wgs84投影到墨卡托

    :param lng:

    :param lat:

    :return:

    """

    x = lng * 20037508.34 / 180

    y = math.log(math.tan((90 + lat) * math.pi / 360)) / (math.pi / 180) * 20037508.34 / 180

    return x,y

def mercatortowgs84(x,y):

    """

    墨卡托投影坐标转回wgs84

    :param x:

    :param y:

    :return:

    """

    lng = x / 20037508.34 * 180

    lat = 180 / math.pi * (2 * math.atan(math.exp(y / 20037508.34 * 180 * math.pi / 180)) - math.pi / 2)

    return lng,lat



def getRange(cC, cB, T):

    if (cB != None):

        cC = max(cC, cB)

    if (T != None):

        cC = min(cC, T)

    return cC



def getLoop(cC, cB, T):

    while (cC > T):

        cC -= T - cB

    while (cC < cB):

        cC += T - cB

    return cC



def convertor(cC, cD):

    if (cC==None or cD==None):

        print('null')

        return None

    T = cD[0] + cD[1] * abs(cC.x)

    cB = abs(cC.y) / cD[9]

    cE = cD[2] + cD[3] * cB + cD[4] * cB * cB +cD[5] * cB * cB * cB + cD[6] * cB * cB * cB * cB +cD[7] * cB * cB * cB * cB * cB +cD[8] * cB * cB * cB * cB * cB * cB

    if(cC.x<0):

        T=T*-1

    else:

        T=T

    if(cC.y<0):

        cE=cE*-1

    else:

        cE=cE

    return [T, cE]



def convertLL2MC(T) :

    cD=None

    T.x = getLoop(T.x, -180, 180)

    T.y = getRange(T.y, -74, 74)

    cB = T

    for cC in range(0,len(LLBAND),1):

        if (cB.y >= LLBAND[cC]) :

            cD = LL2MC[cC]

            break

    if (cD!=None) :

        for cC in range(len(LLBAND) - 1,-1,-1):

            if (cB.y <= -LLBAND[cC]):

                cD = LL2MC[cC]

                break

    cE = convertor(T, cD)

    return cE



def convertMC2LL(cB):

    cC=LLT(abs(cB.x),abs(cB.y))

    cE=None

    for cD in range(0,len(MCBAND),1):

        if (cC.y >= MCBAND[cD]) :

            cE = MC2LL[cD]

            break

    T = convertor(cB, cE)

    return T



def bd09tomercator(lng,lat):

    """

    bd09投影到百度墨卡托

    :param lng:

    :param lat:

    :return:

    """

    baidut=LLT(lng,lat)

    return convertLL2MC(baidut)

def mercatortobd09(x,y):

    """

    墨卡托投影坐标转回bd09

    :param x:

    :param y:

    :return:

    """

    baidut=LLT(x,y)

    return convertMC2LL(baidut)



class LLT:

    def __init__(self,x,y):

        self.x=x

        self.y=y



if __name__ == '__main__':

    print(bd09tomercator(123.0,31.0))

    print(mercatortobd09(13692446.35077864, 3610540.161433475))

    print(wgs84tomercator(123.0,31.0))

文件坐标系转换脚本如下，需要引用shapely和CoordinateTransform中的个cjtobd09方法：

import shapely

from shapely import wkt

from CoordinateTransform import gcj02tobd09

f = open(r'province.txt','r',encoding='utf-8')

fpovince = open(r'baiduprovince.txt','a',encoding='utf-8')

flines = f.readlines()

for index,line in enumerate(flines):

    if index == 0:

        continue

    try:

        linelist = line.strip('\n').split('\t')

        code = linelist[0]

        name = linelist[1]

        health = linelist[2]

        polygon = wkt.loads(linelist[3])

        points = list(polygon.exterior.coords)

        points_bd09 = []

        for p in points:

            points_bd09.append(gcj02tobd09(p[0], p[1]))

        print(points_bd09)

        fpovince.write('\t'.join([code,name,health,str(points_bd09)])+'\n')

    except BaseException as e:

        print(e)

f.close()

fpovince.close()

三、js文件处理

把上一步骤中的baiduprovince.txt文件，处理成能放在html中的js代码。

import math

from collections import defaultdict

f = open(r'baiduprovince.txt','r',encoding='utf-8')

fnew = open(r'baidudatajs.txt','a',encoding='utf-8')

flines = f.readlines()

colors = ['#000000', '#001133', '#002266', '#003399', '#0044cc', '#0055ff', '#3377ff', '#6699ff', '#99bbff', '#ccddff',

          '#ffffff']

polygon_dict = defaultdict(list)

for line in flines:

    linelist = line.strip('\n').split('\t')

    code = linelist[0]

    name = linelist[1]

    health = float(linelist[2])

    color = colors[10-round(float(health)/10)]

    polygon = eval(linelist[3])

    polygon_dict[code].append({'name':name,'health':health,'color':color,'polygon':polygon})

overlays = []

for r in polygon_dict:

    print(r)

    print(polygon_dict[r])

    for index,p in enumerate(polygon_dict[r]):

        polygon_str = 'var polygon_'+r+'_'+str(index)+'=new BMapGL.Polygon(['

        point_str_list = []

        for po in p['polygon']:

            point_str_list.append('new BMapGL.Point('+str(po[0])+','+str(po[1])+')')

        polygon_str = polygon_str+','.join(point_str_list)+'],{strokeWeight:0,fillColor:\''+p['color']+'\',fillOpacity: 0.8,health:'+str(p['health'])+',name:\''+p['name']+'\'});'

        fnew.write(polygon_str+'\n')

        fnew.write('map.addOverlay(polygon_'+r+'_'+str(index)+');'+'\n')

        overlays.append('polygon_'+r+'_'+str(index))

fnew.write('var overlays=['+','.join(overlays)+']'+'\n')

f.close()

fnew.close()

四、前端代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>各省/直辖市政商关系健康指数</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <style>

    body,

    html,

    #container {

        overflow: hidden;

        width: 100%;

        height: 100%;

        margin: 0;

        font-family: "微软雅黑";

    }

    #info{

        position: absolute;

        left: 20px;

        top: 20px;

        font-size: 14px;

        background: #FFF;

        width: 270px;

        padding: 10px;

        border-radius: 3px;

    }   

    </style>

    <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>

</head>

<body>

    <div id="container"></div>

    <div id="info">政商关系健康指数：<span id="position"></span></div>

</body>

</html>

<script>

var map = new BMapGL.Map('container');

var point = new BMapGL.Point(112.273486, 35.719192);

map.centerAndZoom(point, 4);

map.enableScrollWheelZoom(true);



----------------------------

baidudatajs.txt里的全部内容

----------------------------

for (let j = 0; j < overlays.length; j++) {

    const overlay = overlays[j];

    overlay.addEventListener('click', e => {

        position.innerHTML = e.target['_config']['name']+'为'+e.target['_config']['health'];

    });   

}

</script>

五、总结

百度最大的问题在于坐标系不具有通用性。

标签：return,cB,JS,API,百度,lat,lng,pi,math
来源： https://blog.csdn.net/sinat_41310868/article/details/113793369