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

你的名字 2022-08-31 01:00 2阅读 0赞

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

![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";

[d17c870619fd364639a9d659849b5aea.png]: /images/20220829/878b80c1a1ff4cc5bb9afb9855ac2fd8.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关探索规律：Python地图数据可视化艺术

相关数据可视化——如何绘制地图

相关 Superset可视化之制作地图

相关 echarts地图列表_利用Python画中国地图，实现各省数据可视化

相关【数据可视化】项目分布地图设计之修改地图样式

相关【数据可视化】项目分布地图设计之显示省份地图

相关计算机地图制图的优势,从计算机地图制图到地理信息系统

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

相关 Python可视化-地图染色

相关百度地图之加载地图