質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

686閲覧

ルート案内アプリのUIについて

yuujiMotoki

総合スコア90

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2019/10/18 02:09

編集2019/10/18 02:44

HTML+JAVASCRIPT+FLASK(PYTHON)を使って、地図(pdf)上のx,y座標と、
その位置での部分拡大図を表示させるようなWEBアプリを作ろうとしています。

データテーブルとしては、地図上の座標(x,y)と、その箇所での拡大イメージ画像のURLがあり、
地図は非常に小さいので、眼鏡ルーペで拡大するようなイメージです。

EXCELで言えば、FORM上には地図と拡大図を並列して表示しておき、
その下にテーブルを配置して、セルを選んだら、その箇所の座標から、
地図上に〇、拡大図を表示という流れを考えています。

これらのUIをJAVASCRIPTを使って作ろうとしていますが、いまいち実例がなくイメージが湧きません。

自分なりに調べたところ、下記のサイトが参考にはなりました。
https://techblog.zozo.com/entry/zoom_preview

https://github.com/Esri/storymap-tour

ただし、データテーブルの表から表示地点のX,Y座標を読み取るところはありませんが

何かドンピシャの情報があれば、ありがたいのですが

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/10/18 02:25

pythonタグもつけて下さい
kyoya0819

2019/10/18 02:55

データテーブルの中身はどのようになっていますか?
guest

回答1

0

自己解決

がんばって実装したら、こんな感じになりました。

HTML

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7</head> 8 9<style> 10 img { 11 width: 100%; 12 } 13 14 * { 15 box-sizing: border-box; 16 } 17 18 .img-zoom-container { 19 position: relative; 20 } 21 22 .img-zoom-lens { 23 position: absolute; 24 border: 2px solid #ff6e02; 25 /*set the size of the lens:*/ 26 width: 45px; 27 height: 30px; 28 position: absolute; 29 box-shadow: inset 0 0 5px 0px black; 30 background-color: hsla(44, 100%, 42%, 0.09); 31 box-shadow: 0 0 black; 32 background-color: rgba(255, 193, 7, 0.17); 33 34 } 35 36 .img-zoom-result { 37 border: 1px solid #d4d4d4; 38 /*set the size of the result div:*/ 39 width: 600px; 40 height: 400px; 41 zoom: 1; 42 visibility: hidden; 43 } 44</style> 45 46 47<body> 48 <div class="img-zoom-container"> 49 <img id="myimage" nama="bigimage" class="org_img" src={{fname}}><!-- width="300" height="240"> --> 50 <div id="myresult" name=myresult" class="img-zoom-result" style="zoom:1"></div> 51 <div id="lenz" name="lenz" class="img-zoom-lens"></div> 52 </div> 53 54 55 <script> 56 function imageZoom(imgID, resultID, lensID, init_x, init_y, clickon) { 57 var img, lens, result, cx, cy; 58 img = document.getElementById(imgID); 59 result = document.getElementById(resultID); 60 lens = document.getElementById(lensID); 61 62 cx = result.offsetWidth / lens.offsetWidth; 63 cy = result.offsetHeight / lens.offsetHeight; 64 result.style.backgroundImage = "url('" + img.src + "')"; 65 result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px"; 66 if (init_x) { 67 clickon = false; 68 x = (init_x / img.naturalWidth) * img.width - (lens.offsetWidth / 2); 69 y = (init_y / img.naturalHeight) * img.height - (lens.offsetHeight / 2); 70 if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; } 71 if (x < 0) { x = 0; } 72 if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; } 73 if (y < 0) { y = 0; } 74 lens.style.left = x + "px"; 75 lens.style.top = y + "px"; 76 result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; 77 top.frm_a01c.refresh(result); 78 } else { 79 lens.addEventListener("click", toggle1); 80 lens.addEventListener("mousemove", moveLens); 81 img.addEventListener("mousemove", moveLens); 82 } 83 function moveLens(e) { 84 if (clickon == true) { 85 var pos, x, y; 86 e.preventDefault(); 87 pos = getCursorPos(e); 88 x = pos.x - (lens.offsetWidth / 2); 89 y = pos.y - (lens.offsetHeight / 2); 90 if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; } 91 if (x < 0) { x = 0; } 92 if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; } 93 if (y < 0) { y = 0; } 94 lens.style.left = x + "px"; 95 lens.style.top = y + "px"; 96 result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; 97 98 xsize = (x + (lens.offsetWidth / 2)) / top.frm_a01b.myimage.width * top.frm_a01b.myimage.naturalWidth; 99 ysize = (y + (lens.offsetHeight / 2)) / top.frm_a01b.myimage.height * top.frm_a01b.myimage.naturalHeight; 100 top.frm_a01c.fname.value = "(x,y)=(" + parseInt(xsize) + "," + parseInt(ysize) + ")"; 101 top.frm_a01c.refresh(result); 102 } 103 } 104 function getCursorPos(e) { 105 var a, x = 0, y = 0; 106 e = e || window.event; 107 a = img.getBoundingClientRect(); 108 x = e.pageX - a.left; 109 y = e.pageY - a.top; 110 x = x - window.pageXOffset; 111 y = y - window.pageYOffset; 112 return { x: x, y: y }; 113 } 114 function toggle1(e) { 115 if (clickon == true) { clickon = false; } 116 else { clickon = true; } 117 } 118 } 119 </script> 120 121 <script> 122 window.onload = function () { 123 imageZoom("myimage", "myresult", "lenz", null, null, true); 124 } 125 </script> 126 127</body> 128 129</html>

投稿2020/04/24 12:52

yuujiMotoki

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問