使用了两个文件，以便可以在嵌入的 html 页面上公开跟踪 traccar gps 设备，该页面带有从 traccar 服务器生成的 traccar 用户令牌的开放层地图。
现在我看到 Open Layers 也在使用 Bing 地图，那么我可以使用 Bing 地图作为 traccar 的默认嵌入地图，而不是这个默认的开放层地图吗？
这是用于在 html 页面上获取嵌入地图的 traccar的原始两个文件（一个是js文件，第二个是html文件）：
app.js 第一个文件
* Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, "find", {
value: function(predicate) {
var value;
for (var i = 0; i < this.length; i++) {
value = this[i];
if (predicate.call(arguments[1], value, i, this)) {
return value;
}
}
return undefined;
}
});
}
var getQueryParameter = function(name) {
return (window.location.search.match('[?&]' + name + '=([^&]*)') || [])[1];
};
var url = window.location.protocol + '//' + window.location.host;
var token = getQueryParameter('token');
var style = function (label) {
return new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'teal'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 2
}),
radius: 7
}),
text: new ol.style.Text({
text: label,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
font: 'bold 12px sans-serif',
offsetY: -16
})
});
};
var source = new ol.source.Vector();
var markers = {};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
var ajax = function (method, url, callback) {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback(JSON.parse(xhr.responseText));
}
};
if (method == 'POST') {
xhr.setRequestHeader('Content-type', 'application/json');
}
xhr.send()
};
ajax('GET', url + '/api/server', function(server) {
ajax('GET', url + '/api/session?token=' + token, function(user) {
map.getView().setCenter(ol.proj.fromLonLat([
parseFloat(getQueryParameter('longitude')) || user.longitude || server.longitude || 0.0,
parseFloat(getQueryParameter('latitude')) || user.latitude || server.latitude || 0.0
]));
map.getView().setZoom(parseFloat(getQueryParameter('zoom')) || user.zoom || server.zoom || 2);
ajax('GET', url + '/api/devices', function(devices) {
var socket = new WebSocket('ws' + url.substring(4) + '/api/socket');
socket.onclose = function (event) {
console.log('socket closed');
};
socket.onmessage = function (event) {
var data = JSON.parse(event.data);
if (data.positions) {
for (i = 0; i < data.positions.length; i++) {
var position = data.positions[i];
var marker = markers[position.deviceId];
var point = new ol.geom.Point(ol.proj.fromLonLat([position.longitude, position.latitude]));
if (!marker) {
var device = devices.find(function (device) { return device.id === position.deviceId });
marker = new ol.Feature(point);
marker.setStyle(style(device.name));
markers[position.deviceId] = marker;
source.addFeature(marker);
} else {
marker.setGeometry(point);
}
}
}
};
});
});
});
第二个文件是 index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Traccar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css">
</head>
<body style="margin: 0; padding: 0;">
<div id="map" style="width: 100%; height: 100%; position:fixed;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js" type="text/javascript"></script>
<script id="loadScript" src="app.js"></script>
</body>
</html>
这是我想将其用作嵌入式 html 页面上的默认地图的 Open Layers Bing Map，有三个文件（来源：Open Layers Bing Map）
第一个文件是 main.js 文件
import BingMaps from 'ol/source/BingMaps';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
var styles = [
'RoadOnDemand',
'Aerial',
'AerialWithLabelsOnDemand',
'CanvasDark',
'OrdnanceSurvey' ];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
layers.push(
new TileLayer({
visible: false,
preload: Infinity,
source: new BingMaps({
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
imagerySet: styles[i],
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
})
);
}
var map = new Map({
layers: layers,
target: 'map',
view: new View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 13,
}),
});
var select = document.getElementById('layer-select');
function onChange() {
var style = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(styles[i] === style);
}
}
select.addEventListener('change', onChange);
onChange();
第二个文件是 index.html
<html lang="en">
<head>
<title>Bing Maps</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
<option value="RoadOnDemand">Road</option>
<option value="CanvasDark">Road dark</option>
<option value="OrdnanceSurvey">Ordnance Survey</option>
</select>
<script src="main.js"></script>
</body>
</html>
第三个文件是 .json 文件
"name": "bing-maps",
"dependencies": {
"ol": "6.4.3"
},
"devDependencies": {
"parcel": "1.11.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
}
}
我的问题是如何将 Open Layers Bing Map 用于 traccar 嵌入的 html 页面？