231 lines
6.3 KiB
PHP
231 lines
6.3 KiB
PHP
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
|
|
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
|
<link rel="icon" href="../dist/images/fav.ico" type="image/ico" sizes="16x16" />
|
|
<title>نقشه 3rd</title>
|
|
<!-- map links -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.css" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div id="mini-tokyo-3d" style="width: 400px; height: 400px;"></div>
|
|
</div>
|
|
</body>
|
|
<script src="../plugins/jquery/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.js"></script>
|
|
<script>
|
|
const options = {
|
|
container: 'mini-tokyo-3d',
|
|
accessToken: 'pk.eyJ1IjoieWFzaXUxMzc2IiwiYSI6ImNrejloaWhkcjA3ZHMydnMyNGZ4cDljdnMifQ.Rz3uYHxfd3xFTNUdg8vnNg'
|
|
};
|
|
const map = new mt3d.Map(options);
|
|
// $(function(e) {
|
|
// var map = new OSMBuildings({
|
|
// container: 'map',
|
|
// position: { latitude: 35.7065, longitude: 51.3477 },
|
|
// zoom: 16,
|
|
// minZoom: 15,
|
|
// maxZoom: 20,
|
|
// tilt: 40,
|
|
// rotation: 300,
|
|
// });
|
|
|
|
// map.addMapTiles('https://testmap.141.ir/141map/{z}/{x}/{y}.png');
|
|
// map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z}/{x}/{y}.json');
|
|
// map.on('change', function() {
|
|
// app.emit('MAP_CHANGED', getState());
|
|
// });
|
|
|
|
// map.on('pointerup', e => {
|
|
// if (!e.features) {
|
|
// map.highlight(feature => {});
|
|
// hideSidebar();
|
|
// return;
|
|
// }
|
|
|
|
// const featureIdList = e.features.map(feature => feature.id);
|
|
|
|
// map.highlight(feature => {
|
|
// if (featureIdList.indexOf(feature.id) > -1) {
|
|
// return '#ffcc00';
|
|
// }
|
|
// });
|
|
|
|
// showInfoPopup(e.features || []);
|
|
// });
|
|
// });
|
|
//
|
|
|
|
// var map;
|
|
|
|
// var Events;
|
|
|
|
|
|
// Events = function() {
|
|
// this.listeners = {};
|
|
// };
|
|
|
|
// Events.prototype.on = function(type, callback) {
|
|
// if (!this.listeners[type]) {
|
|
// this.listeners[type] = [];
|
|
// }
|
|
// this.listeners[type].push(callback);
|
|
// return this;
|
|
// };
|
|
|
|
// Events.prototype.off = function(type, callback) {
|
|
// if (this.listeners[type]) {
|
|
// this.listeners[type] = this.listeners[type].filter(function(listener) {
|
|
// return (listener !== callback);
|
|
// });
|
|
// }
|
|
// return this;
|
|
// };
|
|
|
|
// Events.prototype.emit = function(type, payload) {
|
|
// (this.listeners[type] || []).forEach(function(listener) {
|
|
// listener(payload);
|
|
// });
|
|
// return this;
|
|
// };
|
|
|
|
// var app = new Events();
|
|
// $(function(e) {
|
|
// map = new OSMBuildings({
|
|
// container: 'map',
|
|
// position: { latitude: 35.7065, longitude: 51.3477 },
|
|
// tilt: 30,
|
|
// zoom: 7,
|
|
// minZoom: 5,
|
|
// maxZoom: 20,
|
|
// attribution: '© Map & Geo Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> © 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
|
|
// });
|
|
|
|
// map.addMapTiles('https://testmap.141.ir/141map/{z}/{x}/{y}.png');
|
|
|
|
// map.addGeoJSONTiles('https://rms.rmto.ir/dist/osmbuildings.json');
|
|
|
|
// map.on('change', function() {
|
|
// console.log(":hijijiijiji");
|
|
// app.emit('MAP_CHANGED', getState());
|
|
// });
|
|
|
|
// map.on('pointerup', e => {
|
|
// if (!e.features) {
|
|
// map.highlight(feature => {});
|
|
// hideSidebar();
|
|
// return;
|
|
// }
|
|
|
|
// const featureIdList = e.features.map(feature => feature.id);
|
|
|
|
// map.highlight(feature => {
|
|
// if (featureIdList.indexOf(feature.id) > -1) {
|
|
// return '#ffcc00';
|
|
// }
|
|
// });
|
|
|
|
// showInfoPopup(e.features || []);
|
|
// });
|
|
|
|
// const $resultList = $('#search-results');
|
|
|
|
// function showInfoPopup(features) {
|
|
// $resultList.empty();
|
|
|
|
// features.forEach(feature => {
|
|
// $resultList.append(renderFeatureInfo(feature));
|
|
// });
|
|
|
|
// }
|
|
|
|
// function renderFeatureInfo (feature) {
|
|
// console.log(feature);
|
|
// let html = '';
|
|
|
|
// html += '<div class="search-result-type" style="display:inline">ID</div> ';
|
|
// html += feature.id + '<br/>';
|
|
|
|
// for (let key in feature.properties) {
|
|
// if (typeof feature.properties[key] === 'object') continue;
|
|
// html += '<div class="search-result-type" style="display:inline">' + key + '</div> ';
|
|
// html += feature.properties[key] + '<br/>'
|
|
// }
|
|
// console.log(html);
|
|
// return $('<li>' + html + '</li>');
|
|
// }
|
|
|
|
// app.on('PARAMS_READY', setState);
|
|
|
|
// app.on('GEOCODE_RESULT', function(data) {
|
|
// const targetOffsetSec = Math.round(parseFloat(data.lon) / 180 * 12) * 3600;
|
|
// const date = new Date();
|
|
// const localOffsetSec = -date.getTimezoneOffset()*60;
|
|
// const utcTime = date.getTime();
|
|
// date.setTime(utcTime + (targetOffsetSec - localOffsetSec)*1000);
|
|
|
|
// // console.log(date);
|
|
// map.setDate(date);
|
|
// }.bind(this));
|
|
|
|
// app.on('PLACE_SELECTED', function(params) {
|
|
// params.zoom = 16;
|
|
// setState(params);
|
|
// });
|
|
|
|
// app.emit('MAP_READY', getState());
|
|
// });
|
|
|
|
// //*****************************************************************************
|
|
|
|
// function setState(data) {
|
|
// data = data || {};
|
|
|
|
// if (data.lat !== undefined && data.lon !== undefined) {
|
|
// map.setPosition({ latitude: parseFloat(data.lat), longitude: parseFloat(data.lon) });
|
|
// }
|
|
|
|
// if (data.zoom !== undefined) {
|
|
// map.setZoom(parseFloat(data.zoom));
|
|
// }
|
|
|
|
// if (data.rotation !== undefined) {
|
|
// map.setRotation(parseFloat(data.rotation));
|
|
// }
|
|
|
|
// if (data.tilt !== undefined) {
|
|
// map.setTilt(parseFloat(data.tilt));
|
|
// }
|
|
// }
|
|
|
|
// function getState() {
|
|
// const data = {};
|
|
// const position = map.getPosition();
|
|
|
|
// data.lat = parseFloat(position.latitude);
|
|
// data.lon = parseFloat(position.longitude);
|
|
// data.zoom = parseFloat(this.map.getZoom());
|
|
|
|
// const rotation = Math.round(map.getRotation());
|
|
// if (rotation) {
|
|
// data.rotation = rotation;
|
|
// }
|
|
|
|
// const tilt = Math.round(map.getTilt());
|
|
// if (tilt) {
|
|
// data.tilt = tilt;
|
|
// }
|
|
|
|
// return data;
|
|
// }
|
|
|
|
</script>
|
|
</html>
|