0

我需要获取一个区域地图的网页。我试图通过将该区域的地图图像加载到网页上来做到这一点，就像您在我附加的 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，但我不知道它是如何工作的。我需要你的帮助来解决这个问题。谢谢。

车站地图

我的 HTML & CSS 现在添加在下面

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

<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;}
a#a1{left:974.1px;top:409.3px;border:solid 2px #0099cc} 
a#a2{left:1096.3px;top:404.1px;border:solid 2px #0099cc}
a#a3{left:901.7px;top:371.9px;border:solid 2px #0099cc} 
a#a4{left:1030.7px;top:373.9px;border:solid 2px #0099cc}
a#a5{left:1162.8px;top:376.3px;border:solid 2px #0099cc} 
a#a6{left:844.8px;top:340.7px;border:solid 2px #0099cc}

#menu a i{ visibility:hidden;}
</style></head>
<body>
<div id="menu">
<a id="a1"href="#"><i>Link 1</i></a>
<a id="a2"href="#"><i>Link 2</i></a>
<a id="a3"href="#"><i>Link 3</i></a>
<a id="a4"href="#"><i>Link 4</i></a>
<a id="a5"href="#"><i>Link 5</i></a>
<a id="a6"href="#"><i>Link 6</i></a>
</div></body>
4

2 回答 2

0

您可以使用 CSS3 和 Canvas 在 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 在图像上定位位置.

编辑：

PIL，它已经过时但易于使用，非常适合您的情况。

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

Django，运行良好，带有基本的内置 HTTP 服务器和大量教程。

https://www.djangoproject.com/

CSS3 和画布

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

于 2012-11-08T14:16:39.247 回答
0

现在我想出了一些东西..请看看它是否有用：（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">'''
于 2012-11-11T14:25:28.450 回答