first commit
This commit is contained in:
223
project/fm_viewer/res/fmproject/map.html
Normal file
223
project/fm_viewer/res/fmproject/map.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
|
||||
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
|
||||
crossorigin=""></script>
|
||||
<!--
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js" type="text/javascript"></script>
|
||||
-->
|
||||
<script type="text/javascript">
|
||||
|
||||
// Global
|
||||
var lat1;
|
||||
var long1;
|
||||
var color1;
|
||||
|
||||
var markers;
|
||||
var map = null;
|
||||
// var layerGroups = [];
|
||||
// var layerGroup = null;
|
||||
var lineColor = [];
|
||||
var polyline = null;
|
||||
|
||||
var icon = L.divIcon({
|
||||
className: 'embeded_icon',
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 30],
|
||||
html: '<img src="data:image/png;base64, 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"/>'
|
||||
});
|
||||
|
||||
function moveTest() {
|
||||
lat1 = 35.681382;
|
||||
long1 = 139.766084;
|
||||
var position = L.latLng(lat1, long1);
|
||||
map.panTo(position);
|
||||
}
|
||||
|
||||
//초기화 처리
|
||||
function init() {
|
||||
|
||||
//초기 위치(도쿄 역)WGS84
|
||||
lat1 = 35.681382;
|
||||
long1 = 139.766084;
|
||||
var position = L.latLng(lat1, long1);
|
||||
|
||||
//초기 줌 수준
|
||||
var zoom = 15;
|
||||
|
||||
//지리원 맵 타일·계층 생성
|
||||
var tl_std = new L.tileLayer(
|
||||
"http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
|
||||
{
|
||||
attribution:'<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html" target="_blank">地理院地図</a>',
|
||||
maxZoom: 18,
|
||||
}
|
||||
);
|
||||
|
||||
//OSM타일·레이어 생성
|
||||
var tl_osm = new L.tileLayer(
|
||||
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
{
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a>',
|
||||
maxZoom: 18,
|
||||
}
|
||||
);
|
||||
|
||||
//GoogleMAP레이어 생성
|
||||
//var tl_gmap = new L.Google('ROADMAP');
|
||||
|
||||
//지도 선택용 레이어 배열
|
||||
var Map_base = {
|
||||
"地理院地図": tl_std,
|
||||
"OpenStreetMap": tl_osm
|
||||
//"GoogleMAP": tl_gmap
|
||||
};
|
||||
|
||||
//맵 객체의 생성(센터 위치, 줌 수준, 지도 층 지정 부)
|
||||
map = L.map('basicMap',{
|
||||
center: [lat1, long1],
|
||||
zoom: zoom,
|
||||
layers:[tl_osm],
|
||||
attributionControl:false
|
||||
}
|
||||
);
|
||||
|
||||
tl_osm.addTo(map);
|
||||
L.control.attribution({prefix: '<a href="https://leafletjs.com/" target="_blank">Leaflet</a>'}).addTo(map);
|
||||
|
||||
|
||||
//지도 스타일 선택 컨트롤을 map개체에 추가
|
||||
L.control.layers(Map_base, null,
|
||||
{
|
||||
collapsed: true
|
||||
}
|
||||
).addTo(map);
|
||||
|
||||
|
||||
|
||||
//자기 마커 추가
|
||||
markers = L.marker(position, { icon: icon }).addTo(map);
|
||||
|
||||
//속도에 따른 궤적의 색의 테이블 생성
|
||||
initLineColor();
|
||||
}
|
||||
|
||||
//주행 궤적 색 테이블
|
||||
function initLineColor() { //14단계
|
||||
lineColor.push('#7FED11');
|
||||
lineColor.push('#35ED11');
|
||||
lineColor.push('#11ED3C');
|
||||
lineColor.push('#11ED7F');
|
||||
lineColor.push('#11EDC8');
|
||||
lineColor.push('#11C8ED');
|
||||
lineColor.push('#117FED');
|
||||
lineColor.push('#1135ED');
|
||||
lineColor.push('#3511ED');
|
||||
lineColor.push('#7F11ED');
|
||||
lineColor.push('#C811ED');
|
||||
lineColor.push('#ED11C8');
|
||||
lineColor.push('#ED117F');
|
||||
lineColor.push('#ED1135');
|
||||
}
|
||||
|
||||
//function loaded() {
|
||||
// if(layerGroup)
|
||||
// {
|
||||
// layerGroups.push(layerGroup);
|
||||
// layerGroup = null;
|
||||
// polyline = null;
|
||||
// }
|
||||
// layerGroup = L.layerGroup().addTo(map);
|
||||
//}
|
||||
|
||||
// API
|
||||
// 이동하면서 PATH 를 그린다. .. 처음부터 다 그리는 방식이 아님.
|
||||
function setLatLag(Latitude, Longitude, speed, bFirst, bDistance) {
|
||||
|
||||
if(map == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var lat0, long0;
|
||||
lat0 = lat1;
|
||||
long0 = long1;
|
||||
|
||||
lat1 = Latitude;
|
||||
long1 = Longitude;
|
||||
|
||||
//주행 궤적 표시
|
||||
if ((bFirst == 0) && (bDistance == 0)) {
|
||||
|
||||
var points = [
|
||||
[lat0, long0],
|
||||
[lat1, long1]
|
||||
];
|
||||
|
||||
// select line color by speed
|
||||
var color_num = speed;
|
||||
|
||||
if (color_num < 0)
|
||||
color_num = 0;
|
||||
else if (color_num > 13)
|
||||
color_num = 13;
|
||||
|
||||
|
||||
if(color1 == color_num && polyline != null)
|
||||
{
|
||||
polyline.addLatLng([lat1, long1]);
|
||||
}
|
||||
else
|
||||
{
|
||||
// draw line
|
||||
polyline = L.polyline(points,
|
||||
{
|
||||
color: lineColor[color_num],
|
||||
weight: 4,
|
||||
opacity: 1.0,
|
||||
smoothFactor: 4.0,
|
||||
lineCap: "square",
|
||||
lineJoin: "square",
|
||||
interactive: false
|
||||
}
|
||||
).addTo(map);
|
||||
}
|
||||
|
||||
// 저장
|
||||
color1 = color_num;
|
||||
}
|
||||
else
|
||||
{
|
||||
polyline = null;
|
||||
}
|
||||
|
||||
//마커를 이동
|
||||
var position = L.latLng(lat1, long1);
|
||||
markers.setLatLng( position );
|
||||
|
||||
//맵을 센터링
|
||||
map.panTo(position);
|
||||
|
||||
}
|
||||
</script>
|
||||
<head>
|
||||
<title>OSM, 地理院地図 by leaflet.js</title>
|
||||
<style type="text/css">
|
||||
html, body, #basicMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!--<body onload="init();">-->
|
||||
<body onload="init();" oncontextmenu="return false;">
|
||||
|
||||
<div id="basicMap"></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user