Map pins

最新推荐文章于 2022-06-06 15:49:37 发布

三星程序饲养员

最新推荐文章于 2022-06-06 15:49:37 发布

阅读量301

点赞数

分类专栏： gis方向文章标签： cesium

原文链接：https://mp.csdn.net/mdeditor/102524658

版权

gis方向专栏收录该内容

41 篇文章 3 订阅

订阅专栏

<!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/vt?lyrs=s@800&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>

三星程序饲养员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Map pins

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="x-ua-compatibl...
复制链接

扫一扫

专栏目录