Previous Page Next Page
オープンソースによる地図表示（Leaflet編）７／９
2019/4/26 by T. Fujita
５、色々な図形の表示
５－１、直線の表示
基本地図『Leaflet_Tutrial_101.html』を元に地図上に直線を表示させてみます。 以下に 表示例とそのソースファイルの内容を示します。
ソースファイルで赤字の部分が直線を表示する箇所です。 線上をクリックすると吹き出しでタイトルが表示されます。
また、単独で表示する場合は、
『
Leaflet_Tutrial_501.html 』をクリックして下さい。
直線の表示例
『 Leaflet_Tutrial_501.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_501.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_501 = new Array();
012 var map_501 = L.map('map_501').setView([35.65809922, 139.74135747], 7);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18,
018 }).addTo(map_501);
019 Leaflet_Lines_501();
020
021 function Leaflet_Lines_501() // 線の設置
022 {
023 var Lines_shape = new Array();
024 var Lines_shape_pos = new Array();
025 var Lines_shape_nam = new Array();
026 var Lines_shape_lnk = new Array();
027 var Lines_strokecol = new Array();
028 var Lines_style = new Array();
029 var Set_Color = "000000";
030 var Line_W = 2;
031
032 Lines_shape_pos[ 0 ] = [
033 [ 35.7, 140.9 ],
034 [ 35.5, 140.6 ],
035 [ 35.0, 140.5 ]
036 ];
037 Lines_strokecol[ 0 ] = "000000";
038 Lines_shape_nam[ 0 ] = "Lines Sample #001";
039 Lines_shape_lnk[ 0 ] = " ";
040
041 Lines_shape_pos[ 1 ] = [
042 [ 34.5, 138.0 ],
043 [ 34.4, 139.0 ],
044 [ 35.0, 139.5 ]
045 ];
046 Lines_strokecol[ 1 ] = "FF0000";
047 Lines_shape_nam[ 1 ] = "Lines Sample #002";
048 Lines_shape_lnk[ 1 ] = " ";
049
050 for ( i = 0; i <= (Lines_shape_pos.length - 1); i++ )
051 {
052 if (Lines_shape_pos[ i ] != null )
053 {
054 Set_Color = Lines_strokecol[ i ];
055 Lines_shape[ i ] = L.polyline([ Lines_shape_pos[ i ] ],
056 { color: "#"+Set_Color,
057 weight: Line_W,
058 opacity: 1
059 }).bindPopup( Lines_shape_nam[ i ] + "<br>" + Lines_shape_lnk[ i ]
060 );
061 Layer_501[ i ] = Lines_shape[ i ];
062 Layer_501[ i ].addTo(map_501);
063 }
064 }
065 }
066 }
067
068 </script>
069 </head>
070 <body onload="init()">
071 <div id="map_501" style="width: 100%; height: 400px; border: solid 1px"></div>
072 </body>
073 </html>
５－２、多角形の表示
同様に基本地図『Leaflet_Tutrial_101.html』を元に地図上に多角形を表示させてみます。 以下に 表示例とそのソースファイルの内容を示します。 ソースファイルで赤字の部分が多角形を表示する箇所です。
多角形をクリックすると吹き出しでそのタイトルが表示されます。
単独で表示する場合は、
『
Leaflet_Tutrial_502.html 』をクリックして下さい。
多角形の表示例
『 Leaflet_Tutrial_502.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_502.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_502 = new Array();
012 var map_502 = L.map('map_502').setView([35.65809922, 139.74135747], 7);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18,
018 }).addTo(map_502);
019 Leaflet_Polygons_502();
020
021 function Leaflet_Polygons_502() // 多角形の設置
022 {
023 var Polygons_shape = new Array();
024 var Polygons_shape_pos = new Array();
025 var Polygons_shape_nam = new Array();
026 var Polygons_shape_lnk = new Array();
027 var Polygons_strokecol = new Array();
028 var Polygons_fillcolor = new Array();
029 var Line_W = 2;
030
031 Polygons_shape_pos[ 0 ] = [
032 [ 35.7, 140.9 ],
033 [ 35.5, 140.4 ],
034 [ 35.0, 140.5 ]
035 ];
036 Polygons_strokecol[ 0 ] = "000000";
037 Polygons_fillcolor[ 0 ] = "FFFF00";
038 Polygons_shape_nam[ 0 ] = "Polygons Sample #001";
039 Polygons_shape_lnk[ 0 ] = " ";
040
041 Polygons_shape_pos[ 1 ] = [
042 [ 34.5, 138.0 ],
043 [ 34.4, 139.0 ],
044 [ 35.0, 139.5 ],
045 [ 35.0, 138.5 ],
046 ];
047 Polygons_strokecol[ 1 ] = "FF0000";
048 Polygons_fillcolor[ 1 ] = "FF0000";
049 Polygons_shape_nam[ 1 ] = "Polygons Sample #002";
050 Polygons_shape_lnk[ 1 ] = " ";
051
052 for ( i = 0; i <= (Polygons_shape_pos.length - 1); i++ )
053 {
054 if (Polygons_shape_pos[ i ] != null )
055 {
056 Polygons_shape[ i ] = L.polygon([ Polygons_shape_pos[ i ] ],
057 { color: "#" + Polygons_strokecol[ i ],
058 fillColor: "#" + Polygons_fillcolor[ i ],
059 weight: Line_W,
060 fillopacity: 0.5
061 });
062 Polygons_shape[ i ].bindPopup(Polygons_shape_nam[ i ] + "<br>" + Polygons_shape_lnk[ i ]);
063 Layer_502[ i ] = Polygons_shape[ i ];
064 Layer_502[ i ].addTo(map_502);
065 }
066 }
067 }
068 }
069
070 </script>
071 </head>
072 <body onload="init()">
073 <div id="map_502" style="width: 100%; height: 400px; border: solid 1px"></div>
074 </body>
075 </html>
５－３、円の表示
基本地図『Leaflet_Tutrial_101.html』を元に地図上に円形を表示させてみます。 以下に 表示例とそのソースファイルの内容を示します。 ソースファイルで赤字の部分が円形を表示する箇所です。
円形をクリックすると吹き出しでそのタイトルが表示されます。
単独で表示する場合は、
『
Leaflet_Tutrial_503.html 』をクリックして下さい。
円の表示例
『 Leaflet_Tutrial_503.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_503.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_503 = new Array();
012 var map_503 = L.map('map_503').setView([35.65809922, 139.74135747], 7);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18,
018 }).addTo(map_503);
019 Leaflet_Circles_503();
020
021 function Leaflet_Circles_503() // 円形の設置
022 {
023 var Circle_shape = new Array();
024 var Circle_shape_LAT = new Array();
025 var Circle_shape_LNG = new Array();
026 var Circle_shape_RAD = new Array();
027 var Circle_shape_NAM = new Array();
028 var Circle_shape_LNK = new Array();
029 var Circle_strokecol = new Array();
030 var Circle_fillcolor = new Array();
031 var Line_W = 2;
032
033 Circle_shape_LAT[ 0 ] = 35.5;
034 Circle_shape_LNG[ 0 ] = 140.4;
035 Circle_shape_RAD[ 0 ] = 30000;
036 Circle_shape_NAM[ 0 ] = "Circle Sample #001";
037 Circle_shape_LNK[ 0 ] = " ";
038 Circle_strokecol[ 0 ] = "000000";
039 Circle_fillcolor[ 0 ] = "FFFF00";
040
041 Circle_shape_LAT[ 1 ] = 34.4;
042 Circle_shape_LNG[ 1 ] = 139.0;
043 Circle_shape_RAD[ 1 ] = 50000;
044 Circle_shape_NAM[ 1 ] = "Circle Sample #002";
045 Circle_shape_LNK[ 1 ] = " ";
046 Circle_strokecol[ 1 ] = "FF0000";
047 Circle_fillcolor[ 1 ] = "FF0000";
048
049 for (i = 0; i <= (Circle_shape_LAT.length - 1); i++) {
050 Circle_shape[ i ] = L.circle([ Circle_shape_LAT[ i ], Circle_shape_LNG[ i ] ], Circle_shape_RAD[ i ],
051 { color: "#" + Circle_strokecol[ i ],
052 fillColor: "#" + Circle_fillcolor[ i ],
053 weight: Line_W,
054 fillopacity: 0.5
055 }).bindPopup(Circle_shape_NAM[ i ]
056 );
057 Layer_503[ i ] = Circle_shape[ i ];
058 Layer_503[ i ].addTo(map_503);
059 }
060 }
061 }
062
063 </script>
064 </head>
065 <body onload="init()">
066 <div id="map_503" style="width: 100%; height: 400px; border: solid 1px"></div>
067 </body>
068 </html>
５－４、削除可能な図形の表示
次に削除可能な図形を表示させてみます。 図形をクリックすると表示されるポップアップから対象図形の削除が可能となります。
以下に 表示例とそのソースファイルの内容を示します。 ソースファイルで赤字の部分が対象図形を削除可能とする箇所です。
単独で表示する場合は、
『
Leaflet_Tutrial_504.html 』をクリックして下さい。
削除可能な図形の表示例
『 Leaflet_Tutrial_504.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title>Leaflet_Tutrial_504.html 2019/4/26 by T. Fujita</title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
009 <script>
010
011 function init() {
012 var Layer_504_L = new Array();
013 var Layer_504_P = new Array();
014 var Layer_504_C = new Array();
015 var map_504 = L.map('map_504').setView([35.65809922, 139.74135747], 7);
016 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
017 L.tileLayer(
018 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
019 attribution: 'Map data © ' + mapLink,
020 maxZoom: 18
021 }).addTo(map_504);
022 Leaflet_Lines_504();
023 Leaflet_Polygons_504();
024 Leaflet_Circles_504();
025
026 function Leaflet_Lines_504() // 線の設置
027 {
028 var Lines_shape = new Array();
029 var Lines_shape_pos = new Array();
030 var Lines_shape_nam = new Array();
031 var Lines_shape_lnk = new Array();
032 var Lines_strokecol = new Array();
033 var Lines_style = new Array();
034 var Set_Color = "000000";
035 var Line_W = 2;
036
037 Lines_shape_pos[ 0 ] = [
038 [ 35.7, 142.9 ],
039 [ 35.5, 142.6 ],
040 [ 35.0, 142.5 ]
041 ];
042 Lines_strokecol[ 0 ] = "000000";
043 Lines_shape_nam[ 0 ] = "Lines Sample #001";
044 Lines_shape_lnk[ 0 ] = " ";
045
046 Lines_shape_pos[ 1 ] = [
047 [ 34.5, 140.0 ],
048 [ 34.4, 141.0 ],
049 [ 35.0, 141.5 ]
050 ];
051 Lines_strokecol[ 1 ] = "FF0000";
052 Lines_shape_nam[ 1 ] = "Lines Sample #002";
053 Lines_shape_lnk[ 1 ] = " ";
054
055 for ( i = 0; i <= (Lines_shape_pos.length - 1); i++ )
056 {
057 if (Lines_shape_pos[ i ] != null )
058 {
059 Set_Color = Lines_strokecol[ i ];
060 Lines_shape[ i ] = L.polyline([ Lines_shape_pos[ i ] ],
061 { color: "#"+Set_Color,
062 weight: Line_W,
063 opacity: 1,
064 draggable: 'true'
065 }).bindPopup( Lines_shape_nam[ i ] + "<BR> <input type='button' value='Delete this line' class='figure-delete-button'/>"
066 );
067 Lines_shape[ i ].on('popupopen', onPopupFigure );
068 Layer_504_L[ i ] = Lines_shape[ i ];
069 Layer_504_L[ i ].addTo(map_504);
070 }
071 }
072 }
073
074 function Leaflet_Polygons_504() // 多角形の設置
075 {
076 var Polygons_shape = new Array();
077 var Polygons_shape_pos = new Array();
078 var Polygons_shape_nam = new Array();
079 var Polygons_shape_lnk = new Array();
080 var Polygons_strokecol = new Array();
081 var Polygons_fillcolor = new Array();
082 var Line_W = 2;
083
084 Polygons_shape_pos[ 0 ] = [
085 [ 35.7, 140.9 ],
086 [ 35.5, 140.4 ],
087 [ 35.0, 140.5 ]
088 ];
089 Polygons_strokecol[ 0 ] = "000000";
090 Polygons_fillcolor[ 0 ] = "FFFF00";
091 Polygons_shape_nam[ 0 ] = "Polygons Sample #001";
092 Polygons_shape_lnk[ 0 ] = " ";
093
094 Polygons_shape_pos[ 1 ] = [
095 [ 34.5, 138.0 ],
096 [ 34.4, 139.0 ],
097 [ 35.0, 139.5 ],
098 [ 35.0, 138.5 ],
099 ];
100 Polygons_strokecol[ 1 ] = "FF0000";
101 Polygons_fillcolor[ 1 ] = "FF0000";
102 Polygons_shape_nam[ 1 ] = "Polygons Sample #002";
103 Polygons_shape_lnk[ 1 ] = " ";
104
105 for ( i = 0; i <= (Polygons_shape_pos.length - 1); i++ )
106 {
107 if (Polygons_shape_pos[ i ] != null )
108 {
109 Polygons_shape[ i ] = L.polygon([ Polygons_shape_pos[ i ] ],
110 { color: "#" + Polygons_strokecol[ i ],
111 fillColor: "#" + Polygons_fillcolor[ i ],
112 weight: Line_W,
113 fillopacity: 0.5,
114 draggable: 'true'
115 });
116 Polygons_shape[ i ].bindPopup(Polygons_shape_nam[ i ] + "<BR> <input type='button' value='Delete this polygon' class='figure-delete-button'/>");
117 Polygons_shape[ i ].on('popupopen', onPopupFigure );
118 Layer_504_P[ i ] = Polygons_shape[ i ];
119 Layer_504_P[ i ].addTo(map_504);
120 }
121 }
122 }
123
124 function Leaflet_Circles_504() // 円形の設置
125 {
126 var Circle_shape = new Array();
127 var Circle_shape_LAT = new Array();
128 var Circle_shape_LON = new Array();
129 var Circle_shape_RAD = new Array();
130 var Circle_shape_NAM = new Array();
131 var Circle_shape_LNK = new Array();
132 var Circle_strokecol = new Array();
133 var Circle_fillcolor = new Array();
134 var Line_W = 2;
135
136 Circle_shape_LAT[ 0 ] = 36.5;
137 Circle_shape_LON[ 0 ] = 140.4;
138 Circle_shape_RAD[ 0 ] = 30000;
139 Circle_shape_NAM[ 0 ] = "Circle Sample #001";
140 Circle_shape_LNK[ 0 ] = " ";
141 Circle_strokecol[ 0 ] = "000000";
142 Circle_fillcolor[ 0 ] = "FFFF00";
143
144 Circle_shape_LAT[ 1 ] = 36.0;
145 Circle_shape_LON[ 1 ] = 139.0;
146 Circle_shape_RAD[ 1 ] = 50000;
147 Circle_shape_NAM[ 1 ] = "Circle Sample #002";
148 Circle_shape_LNK[ 1 ] = " ";
149 Circle_strokecol[ 1 ] = "FF0000";
150 Circle_fillcolor[ 1 ] = "FF0000";
151
152 for (i = 0; i <= (Circle_shape_LAT.length - 1); i++) {
153 Circle_shape[ i ] = L.circle([ Circle_shape_LAT[ i ], Circle_shape_LON[ i ] ], Circle_shape_RAD[ i ],
154 { color: "#" + Circle_strokecol[ i ],
155 fillColor: "#" + Circle_fillcolor[ i ],
156 weight: Line_W,
157 fillopacity: 0.5,
158 draggable: 'true'
159 }).bindPopup(Circle_shape_NAM[ i ] + "<BR> <input type='button' value='Delete this circle' class='figure-delete-button'/>"
160 );
161 Circle_shape[ i ].on('popupopen', onPopupFigure );
162 Layer_504_C[ i ] = Circle_shape[ i ];
163 Layer_504_C[ i ].addTo(map_504);
164 }
165 }
166
167 function onPopupFigure()
168 {
169 var tempFigure = this;
170 $(".figure-delete-button:visible").click(function () {
171 map_504.removeLayer(tempFigure);
172 });
173 }
174 }
175
176 </script>
177 </head>
178 <body onload="init()">
179 <div id="map_504" style="width: 100%; height: 400px; border: solid 1px"></div>
180 </body>
181 </html>
Previous Page Next Page