美文网首页
[原创.数据可视化系列之二]使用CESIUM三维地图展示美国全球

[原创.数据可视化系列之二]使用CESIUM三维地图展示美国全球

作者: 数据秀 | 来源:发表于2017-01-23 14:59 被阅读0次

    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案。

    很久之前用过skyline,使用CS居多,也可以在浏览器使用actviex插件显示;另外就是arcgis globe,我没看到在项目中用的。后来google有一个globe,算是差的比较远。

    一直到有一天,看到nokia的地图,没错,就是那个做手机的nokia,他们做的那个一个here.com 的地图,能够看三维地图,使用webgl在浏览器渲染,对当时的我来说,简直是惊为天人,流畅,效果好,百度也在用,对,就是百度,我是搞不明白,这么大一个公司,每年这么多研发费用,不能自己搞一个吗,去用here.com的东西?难道都去搞外卖了?我就hehe了;这是题外的牢骚,回归正题把代码拔下来看一下,代码加密了8000多行的代码,这下就懵逼了;flex的也有了,无疾而终;另外还有个webglearth,效果也不太好,现在直接修改成另一个引擎。

    接下来才是重点,几年前在git上看到一个项目cesium.一个开源的三维地图引擎,作者曾经写过一本书,c#的三维地球的。后来改JS了,做出这个开源项目,一直一直发布,现在好几年了。

    这个引擎是我目前看到的效果最好、功能最完整的开源的三维地图引擎了。基本上你只要1句话,就可以显示一个三维地图了。

    下面,我们把美帝国主义在全球和国内的军事基地在cesium上展示,涉及到基础底图、增加要素、和要素交互的功能:

    代码如下:

    1:初始化cesium对象:

    //初始化地图

    this.viewer = new Cesium.Viewer('map', {

    scene3DOnly: true,

    baseLayerPicker: false,

    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({

    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",

    layer: "tdtBasicLayer",

    style: "default",

    format: "image/jpeg",

    tileMatrixSetID: "GoogleMapsCompatible",

    show: true

    }), //初始背景

    animation: false,

    fullscreenButton: false,

    geocoder: false,

    homeButton: false,

    infoBox: true,

    sceneModePicker: false,

    selectionIndicator: false,

    timeline: false,

    navigationHelpButton: false,

    navigationInstructionsInitiallyVisible: false

    }

    );

    2:在地图上增加要素:

    $.getJSON(options.url, function(result) {

    $(result).each(function(i, val) {

    that.viewer.entities.add(

    {

    parent:layer,

    name: "jd"+i,

    position : Cesium.Cartesian3.fromDegrees(val.lat, val.lng),

    point : {

    pixelSize : 10,

    color : Cesium.Color.RED

    },

    data:val

    });

    });

    });

    相关文章

      网友评论

          本文标题:[原创.数据可视化系列之二]使用CESIUM三维地图展示美国全球

          本文链接:https://www.haomeiwen.com/subject/zpyabttx.html