動態地將文本文件中的x和y坐標作為某些點位置的像素加載到html頁面中

Question

我需要獲取一個區域地圖的網頁。 我試圖通過將該區域的地圖圖像加載到網頁上來做到這一點，就像在附加的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，但我不知道它是如何工作的。 請我幫您解決這個問題。 謝謝。

stationMap

我的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>

Answer 1

您可以使用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和Canvas

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

Answer 2

現在我想出了一點..請看看它是否有用：（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">'''

動態地將文本文件中的x和y坐標作為某些點位置的像素加載到html頁面中

問題描述

2 個解決方案

解決方案1
0 2012-11-08 14:16:39

解決方案2
0 已采納 2012-11-11 14:25:28

動態地將文本文件中的x和y坐標作為某些點位置的像素加載到html頁面中

問題描述

2 個解決方案

解決方案1 0 2012-11-08 14:16:39

解決方案2 0 已采納 2012-11-11 14:25:28

解決方案1
0 2012-11-08 14:16:39

解決方案2
0 已采納 2012-11-11 14:25:28