Map pins
程序员文章站
2022-05-27 14:41:42
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>day01</title>
<script src="./Cesium/Cesium.js"></script>
<link rel="stylesheet " href="./Cesium/Widgets/widgets.css">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
//----加载中国谷歌影像地图
var guge=new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/[email protected]&x={x}&y={y}&z={z}',
tilingScheme:new Cesium.WebMercatorTilingScheme(),
minimumLevel:1,
maximumLevel:20
});
var viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});
//一个实用程序类，用于生成自定义映射管脚作为画布元素。
var pinBuilder = new Cesium.PinBuilder();
//给实体添加蓝色选框
var bluePin = viewer.entities.add({
name : 'Blank blue pin',
position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard : {
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
//将垂直原点设置为顶部或底部将在锚定位置的上方或下方（在屏幕空间中）显示一个广告牌。
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
//给实体添加图片，以及固定位置
var questionPin = viewer.entities.add({
name : 'Question mark',
//从给定的经度和纬度值中返回Cartesian3位置
position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
billboard : {
image : pinBuilder.fromText('?', Cesium.Color.BLACK, 48).toDataURL(),
//原点在对象的底部。
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
//设置模块的位置
var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
return viewer.entities.add({
name : 'Grocery store',
position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard : {
image : canvas.toDataURL(),
//原点在对象的底部。
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
});
//从maki图标集创建表示医院的红色pin。
var hospitalPin = Cesium.when(pinBuilder.fromMakiIconId('hospital', Cesium.Color.RED, 48), function(canvas) {
return viewer.entities.add({
name : 'Hospital',
position : Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275),
billboard : {
image : canvas.toDataURL(),
//原点在对象的底部。
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
});
//由于有些管脚是异步创建的，在缩放之前请等待它们全部加载
Cesium.when.all([bluePin, questionPin, groceryPin, hospitalPin], function(pins){
viewer.zoomTo(pins);
});
</script>
</body>
</html>
下一篇： cesium------常用笔记