У меня есть HTML-файл визуализации данных, сгенерированный из кода Python. Я хочу отобразить эти данные в угловом интерфейсе вместо простого шаблона колбы. Проблема в том, что сгенерированный html-файл содержит около 5000000 строк кода и не подходит для angular. В конечном итоге это приводит к сбою браузера. Я не знаю, как отобразить визуализацию карты от колбы до углового в противном случае.
Попытка сохранения выходного каталога сгенерированного html-файла в каталог угловых компонентов. Вместо этого зависает и вылетает браузер.
созданный HTML-файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map</title>
</head>
<body>
<!-- Load require.js. Delete this if your page already loads require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@jupyter-widgets/html-manager@^0.14.0/dist/embed-amd.js" crossorigin="anonymous"></script>
<script type="application/vnd.jupyter.widget-state+json">
"version_major": 2,
"version_minor": 0,
"state": {
"1e261adb71604251825c983918d35fdb": {
"model_name": "LayoutModel",
"model_module": "@jupyter-widgets/base",
"model_module_version": "1.1.0",
"state": {
"height": "100%",
"width": "100%"
}
},
"2fec0727caab4b6cbb94cf047f582b6e": {
"model_name": "PlainmapModel",
"model_module": "jupyter-gmaps",
"model_module_version": "0.8.4",
"state": {
"_dom_classes": [],
"configuration": {
"api_key": null
},
"data_bounds": [
[
46.2,
6.1
],
[
47.2,
7.1
]
],
"initial_viewport": {
"type": "ZOOM_CENTER",
"center": [
11.4,
93.03
],
"zoom_level": 12
},
"layers": [
"IPY_MODEL_19caed0c03f846ef96794996973a8d20",
"IPY_MODEL_64581fe8b8a244b989bdcc5712069a93",
"IPY_MODEL_26874cb7879a4f9e8edf25407ff340ec",
.....
х5000000 строк кода.
mapped_df=geopandas.read_file('./gadm36_IND_3.shp')
mapped_geometry=[mapped_df['NAME_2'],mapped_df['geometry']]
longs=[]
lats=[]
latlongs=[]
geometry=[]
for i in range(0,len(mapped_geometry[1])):
if mapped_geometry[1][i].geom_type=="MultiPolygon":
longs=[]
lats=[]
latlongs=[]
mx=0
for poly in mapped_geometry[1][i].geoms:
if mx<poly.length:
mx=poly.length
p=poly
newl=list(p.exterior.coords)
for k in range(len(newl)): # (long,lats)----->(lats,longs)
tup=(newl[k][1],newl[k][0])
latlongs.append(tup)
geometry.append(latlongs)
if mapped_geometry[1][i].geom_type=="Polygon":
longs=[]
lats=[]
latlongs=[]
newl=list(mapped_geometry[1][i].exterior.coords)
for k in range(len(newl)): # (long,lats)----->(lats,longs)
tup=(newl[k][1],newl[k][0])
latlongs.append(tup)
geometry.append(latlongs)
state=city=[]
state=mapped_df['NAME_1']
city=mapped_df['NAME_2']
geo=[("city",city),("state",state),("geometry",geometry)]
geoDF=pd.DataFrame.from_dict(collections.OrderedDict(geo))
locdf = pd.read_csv('./data_api.csv', sep=',')
#print(locdf)
del locdf["pollutant_unit"]
locdf = locdf.fillna(0)
lev_stat_df = locdf.loc[locdf.groupby(["city"],sort=False)["pollutant_avg"].idxmax()]
lev_df = lev_stat_df.filter(['state','city','pollutant_avg'], axis=1)
lev_df["state"] = lev_df["state"].str.replace('_', '')
lev_df["state"] = lev_df["state"].str.replace(' ', '')
#reindexing
lev_df = lev_df.reset_index(drop=True)
merged = pd.merge(lev_df,geoDF, on=['city',"state"])
def flag_df(df):
if (df['pollutant_avg']>0) and (df["pollutant_avg"]<51):
return "Good"
elif (df['pollutant_avg']>50) and (df["pollutant_avg"]<101):
return "Satisfactory"
elif (df['pollutant_avg']>100) and (df["pollutant_avg"]<201):
return "Moderate"
elif (df['pollutant_avg']>200) and (df["pollutant_avg"]<301):
return "Poor"
elif (df['pollutant_avg']>300) and (df["pollutant_avg"]<401):
return "Very Poor"
elif (df['pollutant_avg']==0):
return "No-Data"
else:
return "Severe"
merged['status'] = merged.apply(flag_df,axis=1)
fig = gmaps.figure(center=(11.4, 93.03), zoom_level=12)
# for i in range(0,len(geo[2][1])//2):
for i in range(0,334):
zone_polygon = gmaps.Polygon(
geo[2][1][i], #1
stroke_color='blue',
fill_color='blue'
)
drawing = gmaps.drawing_layer(
features = [zone_polygon],
show_controls = False
)
fig.add_layer(drawing)
for i in range(335,668):
zone_polygon = gmaps.Polygon(
geo[2][1][i], #2
stroke_color='red',
fill_color='red'
)
drawing = gmaps.drawing_layer(
features=[zone_polygon],
show_controls=False
)
fig.add_layer(drawing)
for i in range(669,1002):
zone_polygon = gmaps.Polygon(
geo[2][1][i], #3
stroke_color='green',
fill_color='green'
)
drawing = gmaps.drawing_layer(
features=[zone_polygon],
show_controls=False
)
fig.add_layer(drawing)
for i in range(103,1336):
zone_polygon = gmaps.Polygon(
geo[2][1][i], #4
stroke_color='black',
fill_color='black'
)
drawing = gmaps.drawing_layer(
features=[zone_polygon],
show_controls=False
)
fig.add_layer(drawing)
embed_minimal_html('export.html', views=[fig], title='Map')
Export HTML генерирует HTML-файл для карты. Я хочу, чтобы этот файл мог работать внутри угловых. Прямо сейчас он вылетает из браузера при загрузке.