将x&y坐标从文本文件动态加载到html页面中，作为某些点位置的像素

2024-09-30 19:22:52 发布

您现在位置：Python中文网/ 问答频道 /正文
9126 3

我需要一个区域地图的网页。 我正试着做的只是有图像的地图上的那个地区加载到网页上，定位点，正如你可以看到在我所附的png文件，并做更多，我喜欢它。在

假设该区域基本上有6个站点，如下面的文本文件所示

#
# some sensor network
#
SN.field_x = 5000 
SN.field_y = 2000
SN.numNodes = 6
# Name: station1 type: antenna1
SN.node[0].xCoor = 1000
SN.node[0].yCoor = 800 
# Name: station2 type: antenna1
SN.node[1].xCoor = 2000 
SN.node[1].yCoor = 808 
# Name: station3 type: antenna2
SN.node[2].xCoor = 1800
SN.node[2].yCoor = 743 
# Name: station4 type: antenna2
SN.node[3].xCoor = 2061
SN.node[3].yCoor = 747 
# Name: station5 type: antenna3
SN.node[4].xCoor = 2325
SN.node[4].yCoor = 753
# Name: station6 type: antenna3
SN.node[5].xCoor = 1689
SN.node[5].yCoor = 681

我需要根据文本文件中的坐标数据在地图上显示这些站的正确位置。 我必须根据这些x&y坐标在地图上定位每个点（这是一个图像）。我试图通过将x&y坐标硬编码到css脚本中作为像素来实现这一点，这将给我所附图片中的页面。但我需要动态加载，因为这些站点将来可能会重新定位。有人告诉我我可以使用python，但我不知道它是如何工作的。拜托，我需要你的帮助。谢谢。在

{1美元^

我的HTML和CSS现在添加到下面

左侧和顶部像素值基于文本文件中的x&y坐标

^{pr2}$

Tags： name图像node区域网页field站点type
2条回答
网友
1楼 · 编辑于 2024-09-30 19:22:52

现在我想办法了。。请看它是否有用：（python脚本）

from collections import defaultdict # a mapping for station number to points

class Point(object):
    # der punkt mit xCoor yCoor
    pass

class SN:
    # the SN object in text file
    node = defaultdict(Point)

# read the text file
textFileContent = open('IDoNotKnowYourTextFileName.txt').read()

# in the next line you need to trust the other person - it executes the textfile 
# but only knowing SN
exec textFileContent in {'SN': SN}

# in the following lines you can output the html file you need:
print '''<head>
<title>MAP</title>
<style type="text/css">
#menu{width:2997px;height:1471px;background-image:url(Map.png)}
#menu a{position:absolute;height:10px;width:10px;}'''

for stationNumber, stationPoint in SN.node.items():
    x = stationPoint.xCoor
    y = stationPoint.yCoor
    # sorry, but I could not get how you derive the x,y-positions from yout html
    print 'a#a' + str(stationNumber) + '{left:' + str(x) + 'px;top:' + str(y) + 'px;border:solid 2px #0099cc}'

print '''
#menu a i{ visibility:hidden;}
</style></head>
<body>
<div id="menu">'''
网友
2楼 · 编辑于 2024-09-30 19:22:52

您可以使用CSS3和画布在Javascript中实现这一点。另一种方法是，您可以通过CGI脚本或类似的小django应用程序，用python制作一个新图像。这将为您生成您的图像，因此它的名称类似于：

<img src="http://some-domain.com/cgi/get_coorinates_on_image.py?file=the_test.txt">

它将返回一个格式正确的图像，或者您可以按照建议返回CSS文件，或者使用javascript对cgi或django实例进行ajax调用，以获取位置的json，然后您可以使用javascript来定位图像上的位置。在

编辑：

皮尔，这是过时的，但很容易使用，非常适合你的情况。在

http://www.pythonware.com/products/pil/

Django有一个基本的内置HTTP服务器和很多教程。在

https://www.djangoproject.com/

CSS3和帆布

http://www.w3schools.com/tags/ref_canvas.asp

相关问题 更多 >

    编程相关推荐