<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu' });
var pinBuilder = new bmgl.PinBuilder();
var bluePin = viewer.entities.add({
name: "点击摄像,固定视角",
position: bmgl.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard: {
image: pinBuilder.fromColor(bmgl.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
},
});
var questionPin = viewer.entities.add({
name: "点击摄像,固定视角",
position: bmgl.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
billboard: {
image: pinBuilder.fromText("?", bmgl.Color.BLACK, 48).toDataURL(),
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
},
});
var url = bmgl.buildModuleUrl("http://www.bigemap.com/templates/img/view.png");
var groceryPin = bmgl.when(
pinBuilder.fromUrl(url, bmgl.Color.GREEN, 48),
function (canvas) {
return viewer.entities.add({
name: "点击摄像,固定视角",
position: bmgl.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
},
});
}
);
//Create a red pin representing a hospital from the maki icon set.
var hospitalPin = bmgl.when(
pinBuilder.fromMakiIconId("hospital", bmgl.Color.RED, 48),
function (canvas) {
return viewer.entities.add({
name: "点击摄像,固定视角",
position: bmgl.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: bmgl.VerticalOrigin.BOTTOM,
},
});
}
);
//Since some of the pins are created asynchronously, wait for them all to load before zooming/
bmgl.when.all(
[bluePin, questionPin, groceryPin, hospitalPin],
function (pins) {
viewer.flyTo(pins);
}
);
</script>
</html>
源码