270 lines
11 KiB
HTML
270 lines
11 KiB
HTML
<!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 = null;
|
|
var map = null;
|
|
// var layerGroups = [];
|
|
// var layerGroup = null;
|
|
var lineColor = [];
|
|
var polyline = null;
|
|
var polylines = [];
|
|
|
|
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);
|
|
}
|
|
|
|
// 차량 이동 (==GoogleMap)
|
|
function moveToMap(Latitude, Longitude) {
|
|
if(map == null) {
|
|
return;
|
|
}
|
|
|
|
var position = L.latLng(Latitude, Longitude); //좌표 이동
|
|
if(!map.hasLayer(markers)) { // 지도에서 제거 되었을 경우 추가
|
|
map.addLayer(markers);
|
|
}
|
|
markers.setLatLng( position ); // 차량 표시 이동
|
|
|
|
map.panTo(position); // 지도 센터 이동
|
|
}
|
|
|
|
// 경로 그리기 (==GoogleMap)
|
|
function drawPaths(pathArray)
|
|
{
|
|
var first = null;
|
|
clearPath();
|
|
|
|
//moveToMap(pathArray[0][0]["lat"],pathArray[0][0]["lng"]);
|
|
|
|
var points = [];
|
|
// GPS가 연결, 끊어짐을 반복하여 몇개의 POLYLINE으로 구성 될 수 있음
|
|
// [[{lat:y,lng:x}],[{lat:y,lng:x}]]
|
|
for(var idx in pathArray) {
|
|
var path = pathArray[idx];
|
|
if(first == null) {
|
|
first = path[0];
|
|
}
|
|
for(var idx2 in path) {
|
|
var point = path[idx2];
|
|
points.push([point["lat"],point["lng"]]);
|
|
}
|
|
|
|
// 각 경로를 추가
|
|
var line = L.polyline(points, { color: "#FF0000",
|
|
weight: 4,
|
|
opacity: 1.0,
|
|
smoothFactor: 4.0,
|
|
lineCap: "square",
|
|
lineJoin: "square",
|
|
interactive: false
|
|
}
|
|
).addTo(map);
|
|
|
|
|
|
polylines.push(line); // 리스트에 추가
|
|
}
|
|
if(first != null)
|
|
{
|
|
moveToMap(first["lat"], first["lng"]);
|
|
}
|
|
}
|
|
|
|
// 경로 제거 (==GoogleMap)
|
|
function clearPath()
|
|
{
|
|
for(var idx in polylines) {
|
|
var line = polylines[idx];
|
|
map.removeLayer(line);
|
|
}
|
|
polylines = [];
|
|
clearCarMarker();
|
|
}
|
|
// 차량표시 제거 (==GoogleMap)
|
|
function clearCarMarker()
|
|
{
|
|
if(map == null) {
|
|
return;
|
|
}
|
|
map.removeLayer(markers);
|
|
}
|
|
|
|
//초기화 처리
|
|
function init() {
|
|
|
|
//초기 위치(서울)WGS84, 37.5548599, 126.9681692
|
|
// 도쿄 35.6585848,139.7432389
|
|
lat1 = 35.6585848;
|
|
long1 = 139.7432389;
|
|
var position = L.latLng(lat1, long1);
|
|
|
|
//초기 줌 수준
|
|
var zoom = 16;
|
|
|
|
//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 = {
|
|
"OpenStreetMap": tl_osm
|
|
};
|
|
|
|
//맵 객체의 생성(센터 위치, 줌 수준, 지도 층 지정 부)
|
|
//layers:[tl_osm],
|
|
map = L.map('basicMap',{
|
|
center: [lat1, long1],
|
|
zoom: zoom,
|
|
attributionControl:false
|
|
}
|
|
);
|
|
|
|
tl_osm.addTo(map);
|
|
L.control.attribution({prefix: '<a href="https://leafletjs.com/" target="_blank">Leaflet</a>'}).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');
|
|
}
|
|
|
|
|
|
// 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>
|