计算机地图综合制图gdp,GDP地图可视化01: 加载地图数据

本节主要完成地图的初始化加载。

d17c870619fd364639a9d659849b5aea.png

主要思路

将摄像头调整好。

读取坐标文件;

绘制；

调整位置，场景大小等，使得地图居中。

原生js读取json文件

略

使用FileLoader读取json

var loader = new THREE.FileLoader();

loader.load(

// resource URL

'./data/china.json',

// onLoad回调

function (data) {

// output the text to the console

}

)

注意读出来的是字符串，需要转为json对象。

FileLoader

使用XMLHttpRequest来加载资源的低级类，并由大多数加载器内部使用。 它也可以直接用于加载任何没有对应加载器的文件类型。

形状(Shape)

继承关系是 Curve -> CurvePath -> Path -> shape.

Shape 使用路径以及可选的孔洞来定义一个二维形状平面。

需要配合 ExtrudeGeometry、ShapeGeometry一起使用。

ShapeGeometry 与 ExtrudeGeometry

ShapeGeometry 使用 shape 创建一个单面多边形几何体，是二维的。

而 ExtrudeGeometry 从一条形状路径中，挤压出一个Geometry，是三维的。

利用 边缘几何体(EdgesGeometry)添加省界线

源码

```html地图GDP

body {

margin: 0;

overflow: hidden;

/* 隐藏body窗口区域滚动条 */

}

var scene, camera, renderer, controls, points;

var stats = initStats();

var loader, house;

var lastSelectedObject = undefined;

var lastMeterial = undefined;

var mapScale = 360 / 100;

var mapCenter = [90, 30];

/* 初始加载 */

(function () {

console.log("three init start...");

init();

animate();

console.log("three init send...");

})();

/* 初始化 */

function init() {

initScene();

initCamera();

initRender();

initLight();

initControls();

initContent();

initMap();

// addEventListener('click', onMouseDblclick, false);

/* 监听事件 */

window.addEventListener('resize', onWindowResize, false);

}

/* 场景 */

function initScene() {

scene = new THREE.Scene();

}

function initMap() {

var loader = new THREE.FileLoader();

loader.load(

// resource URL

'./data/china.json',

// onLoad回调

function (data) {

// output the text to the console

var json = eval("(" + data + ")");

console.log(json)

console.log(json['features']);

json['features'].forEach(function (province) {

// console.log(province['geometry'])

var coordinates = province['geometry']['coordinates'][0];

console.log(coordinates)

var shape = new THREE.Shape();

var lon = (coordinates[0][0] - mapCenter[0]) / mapScale;

var lat = (coordinates[0][1] - mapCenter[1]) / mapScale;

if (lon && lat) {

shape.moveTo(lon, lat);

console.log(lon, lat)

}

coordinates.forEach(function (item) {

var lon = (item[0] - mapCenter[0]) / mapScale;

var lat = (item[1] - mapCenter[1]) /mapScale;

shape.lineTo(lon, lat);

})

var extrudeSettings = {

steps: 2,

depth: 0.5,

bevelEnabled: false,

};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());

scene.add(mesh)

var edges = new THREE.EdgesGeometry( geometry );

var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {

color: 0x000000 ,

linewidth: 30

} ) );

scene.add( line );

})

})

}

/**

* 相机设置

*/

function initCamera() {

var width = window.innerWidth; //窗口宽度

var height = window.innerHeight; //窗口高度

var k = width / height; //窗口宽高比

var s = 10; //三维场景显示范围控制系数，系数越大，显示的范围越大

//创建相机对象, 正交相机

camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

camera.position.set(0, -30,40 ); //设置相机位置

camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

}

/* 渲染器 */

function initRender() {

var width = window.innerWidth; //窗口宽度

var height = window.innerHeight; //窗口高度

renderer = new THREE.WebGLRenderer();

renderer.setSize(width, height);//设置渲染区域尺寸

renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

}

/* 数据更新 */

function update() {

stats.update();

}

/* 灯光 */

function initLight() {

var point = new THREE.PointLight(0xffffff);

point.position.set(400, 200, 300); //点光源位置

scene.add(point); //点光源添加到场景中

//环境光

var ambient = new THREE.AmbientLight(0x444444);

scene.add(ambient);

}

/* 控制器 */

function initControls() {

controls = new THREE.OrbitControls(camera, renderer.domElement);

/* 属性参数默认 */

}

/* 创建字体精灵 */

function makeTextSprite(message, parameters) {

if (parameters === undefined) parameters = {};

var fontface = parameters.hasOwnProperty("fontface") ?

parameters["fontface"] : "Arial";