[Original. Data visualization series bis] using cesium three-dimensional map to show the distribution of American global military bases

Browser-based three-dimensional map is also a relatively high-cold things, the main technical difficulty is how to display three-dimensional data in the browser M.F.B. s, unfortunately, there is really no good plan, can only say that there are feasible solutions.

A long time ago used skyline, the use of CS mostly, you can also use the Actviex plugin in the browser display, and also the ArcGIS Globe, I do not see in the project. Then Google has a globe, which is a far worse.

One day, to see the map of Nokia, yes, that is the Nokia to do the phone, they do that a here.com map, can see three-dimensional map, using WebGL in the browser rendering, for me at that time, is simply a surprise for the human nature, smooth, good effect; pull the code down and look at it. Code to encrypt more than 8,000 lines of code, this is crazy, and flex, there is no, there is a webglearth, the effect is not very good, now directly modified to another engine.

The next point is to see a project cesiumon git a few years ago. An open-source three-dimensional map engine, the author once wrote a book, C # three-dimensional Earth. Later changed JS, make this open source project, has been released, now for several years.

This engine is the most effective and most complete open source three-dimensional map engine I have seen at the moment. Basically you can display a three-dimensional map with just 1 words.

Below, we show the cesium of American imperialism at the global and domestic bases, involving the basic basemap, the addition of features, and the ability to interact with features:

1: Initialize the Cesium object:

Initialize Map
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
}),//initial background
Animation:false,
Fullscreenbutton:false,
Geocoder:false,
Homebutton:false,
Infobox:true,
Scenemodepicker:false,
Selectionindicator:false,
Timeline:false,
Navigationhelpbutton:false,
Navigationinstructionsinitiallyvisible:false

}
);

2: Add features on the map:

$.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
});
});

});

3: The effect is as follows:

The same ritual: source code: Http://dataxiu.com/xius/www/admin/js/map3d.js

In addition, you can focus on the latest WebGL three-dimensional map of ArcGIS; WorldWind's map WebGL version.

[Original. Data visualization series bis] using cesium three-dimensional map to show the distribution of American global military bases