0

地域の地図の Web ページを取得する必要があります。その地域の地図の画像をウェブページにロードし、添付の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

今、私は何かを考え出しました..それが役に立つかどうか見てください: (python script)

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 に答える
0

CSS3 と Canvas を使用して Javascript でこれを行うことができます。もう 1 つの方法は、たとえば 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 に答える