<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="/templates/bmgl-header.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none
}
#toolbar {
position: absolute;
background: rgba(212, 212, 212, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
#toolbar .header {
font-weight: bold;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id='container'></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td class="header">模型顏色r</td>
</tr>
<tr>
<td>模型</td>
<td>
<select data-bind="options: colorBlendModes, value: colorBlendMode"></select>
</td>
</tr>
<tr>
<td>顏色</td>
<td><select data-bind="options: colors, value: color"></select></td>
</tr>
<tr>
<td>透明度</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01"
data-bind="value: alpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: alpha">
</td>
</tr>
<tr>
<td data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">
最大值
</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01"
data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled">
<input type="text" size="5"
data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled">
</td>
</tr>
<tr>
<td class="header">模型輪廓</td>
</tr>
<tr>
<td>顏色</td>
<td>
<select data-bind="options: silhouetteColors, value: silhouetteColor"></select>
</td>
</tr>
<tr>
<td>透明度</td>
<td>
<input type="range" min="0.0" max="1.0" step="0.01"
data-bind="value: silhouetteAlpha, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: silhouetteAlpha">
</td>
</tr>
<tr>
<td>尺寸大小</td>
<td>
<input type="range" min="0.0" max="10.0" step="0.01"
data-bind="value: silhouetteSize, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: silhouetteSize">
</td>
</tr>
</tbody>
</table>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu',requestRenderMode:false});
var entity;
//獲取混色
function getColorBlendMode(colorBlendMode) {
return bmgl.ColorBlendMode[colorBlendMode.toUpperCase()];
}
//獲取顏色
function getColor(colorName, alpha) {
var color = bmgl.Color[colorName.toUpperCase()];
return bmgl.Color.fromAlpha(color, parseFloat(alpha));
}
// The viewModel tracks the state of our mini application.
//綁定參數(shù)
var viewModel = {
color: "Red",
colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
alpha: 1.0,
colorBlendMode: "Highlight",
colorBlendModes: ["Highlight", "Replace", "Mix"],
colorBlendAmount: 0.5,
colorBlendAmountEnabled: false,
silhouetteColor: "Red",
silhouetteColors: ["Red", "Green", "Blue", "Yellow", "Gray"],
silhouetteAlpha: 1.0,
silhouetteSize: 2.0,
};
// Convert the viewModel members into knockout observables.
bmgl.knockout.track(viewModel);
// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById("toolbar");
bmgl.knockout.applyBindings(viewModel, toolbar);
bmgl.knockout
.getObservable(viewModel, "color")
.subscribe(function (newValue) {
entity.model.color = getColor(newValue, viewModel.alpha);
});
bmgl.knockout
.getObservable(viewModel, "alpha")
.subscribe(function (newValue) {
entity.model.color = getColor(viewModel.color, newValue);
});
bmgl.knockout
.getObservable(viewModel, "colorBlendMode")
.subscribe(function (newValue) {
var colorBlendMode = getColorBlendMode(newValue);
entity.model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled =
colorBlendMode === bmgl.ColorBlendMode.MIX;
});
bmgl.knockout
.getObservable(viewModel, "colorBlendAmount")
.subscribe(function (newValue) {
entity.model.colorBlendAmount = parseFloat(newValue);
});
bmgl.knockout
.getObservable(viewModel, "silhouetteColor")
.subscribe(function (newValue) {
entity.model.silhouetteColor = getColor(
newValue,
viewModel.silhouetteAlpha
);
});
bmgl.knockout
.getObservable(viewModel, "silhouetteAlpha")
.subscribe(function (newValue) {
entity.model.silhouetteColor = getColor(
viewModel.silhouetteColor,
newValue
);
});
bmgl.knockout
.getObservable(viewModel, "silhouetteSize")
.subscribe(function (newValue) {
entity.model.silhouetteSize = parseFloat(newValue);
});
createModel(
"/templates/glb/bmgl_Air.glb",
5000.0
);
// 添加模型
function createModel(url, height) {
viewer.entities.removeAll();
var position = bmgl.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
height
);
var heading = bmgl.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new bmgl.HeadingPitchRoll(heading, pitch, roll);
var orientation = bmgl.Transforms.headingPitchRollQuaternion(
position,
hpr
);
entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
color: getColor(viewModel.color, viewModel.alpha),
colorBlendMode: getColorBlendMode(viewModel.colorBlendMode),
colorBlendAmount: parseFloat(viewModel.colorBlendAmount),
silhouetteColor: getColor(
viewModel.silhouetteColor,
viewModel.silhouetteAlpha
),
silhouetteSize: parseFloat(viewModel.silhouetteSize),
},
});
viewer.trackedEntity = entity;
viewer.zoomTo(entity)
}
var options = [
{
text: "飛機",
onselect: function () {
createModel(
"/templates/glb/bmgl_Air.glb",
5000.0
);
},
},
{
text: "運輸車",
onselect: function () {
createModel(
"/templates/glb/GroundVehicle.glb",
0
);
},
},
{
text: "熱氣球",
onselect: function () {
createModel(
"/templates/glb/bmglBalloon.glb",
1000.0
);
},
},
{
text: "牛奶卡車",
onselect: function () {
createModel(
"/templates/glb/bmglMilkTruck.glb",
0
);
},
},
{
text: "個性人物",
onselect: function () {
createModel(
"/templates/glb/bmgl_Man.glb",
0
);
},
},
];
Sandcastle.addToolbarMenu(options);
</script>
</body>
</html>
源碼