/**
|
* 高德地图3D图形绘制相关
|
*/
|
|
import { map, object3Dlayer } from './index_old';
|
|
// 3d图形
|
var _cylinder = undefined,
|
// 当前绘制的图形中的最小高度
|
_minH = -1,
|
// 当前绘制的图形中的最大高度
|
_maxH = -1;
|
|
//监测数据
|
var _factorDatas = {
|
lnglats: [],
|
heights: [],
|
type: ''
|
},
|
//当前选中的监测因子数据
|
_factor = {},
|
_zoomFirst = true;
|
|
function onMapZoom() {
|
// 首次地图缩放监听不执行（因为设定监听函数后会立即执行一次，可能官方函数有相关参数，后续待修改）
|
if (_zoomFirst) {
|
_zoomFirst = false;
|
return;
|
}
|
const fDatas = _factorDatas;
|
const factor = _factor;
|
drawMesh(fDatas, factor);
|
}
|
|
var _maxHeight = 1000,
|
_minHeight = 100,
|
_lastZoom = -1;
|
/**
|
* 获取当前地图缩放等级下的绘制高度缩放比例
|
* @param {*} minH 当前监测数据的最小高度
|
* @param {*} maxH 当前监测数据的最大高度
|
*/
|
function _getScale(minH, maxH) {
|
var zoom = map.getZoom();
|
if (_lastZoom == -1) {
|
_lastZoom = zoom;
|
} else if (_lastZoom <= 8) {
|
_lastZoom = zoom;
|
return;
|
} else if (_lastZoom >= 18) {
|
_lastZoom = zoom;
|
return;
|
}
|
if (zoom <= 8) {
|
_maxHeight = 10000;
|
_minHeight = 1000;
|
} else if (zoom <= 9) {
|
_maxHeight = 9000;
|
_minHeight = 900;
|
} else if (zoom <= 10) {
|
_maxHeight = 8000;
|
_minHeight = 800;
|
} else if (zoom <= 11) {
|
_maxHeight = 7000;
|
_minHeight = 700;
|
} else if (zoom <= 12) {
|
_maxHeight = 6000;
|
_minHeight = 600;
|
} else if (zoom <= 14) {
|
_maxHeight = 5000;
|
_minHeight = 500;
|
} else if (zoom <= 15) {
|
_maxHeight = 4500;
|
_minHeight = 450;
|
} else if (zoom <= 16) {
|
_maxHeight = 4000;
|
_minHeight = 400;
|
} else if (zoom <= 17) {
|
_maxHeight = 2500;
|
_minHeight = 250;
|
} else if (zoom > 17) {
|
_maxHeight = 1000;
|
_minHeight = 100;
|
}
|
|
var scale = (_maxHeight - _minHeight) / (maxH - minH);
|
return scale;
|
}
|
|
/**
|
* 绘图
|
*/
|
function drawMesh(fDatas, factor, center, merge) {
|
const lnglats_GD = fDatas.lnglats_GD;
|
const coors = fDatas.coors_GD;
|
const heights = factor.heights;
|
const colors = factor.colors;
|
const bColor = factor.bottomColor;
|
if (center) {
|
map.setZoomAndCenter(16, center);
|
}
|
|
// eslint-disable-next-line no-undef
|
var cylinder = new AMap.Object3D.Mesh();
|
cylinder.backOrFront = 'both';
|
cylinder.transparent = true;
|
|
var geometry = cylinder.geometry;
|
|
const scale = _getScale(_minH, _maxH);
|
for (let i = 0; i < coors.length; i++) {
|
var r = lnglats_GD[i];
|
var lastP = lnglats_GD[i - 1];
|
var p = coors[i];
|
var h = (heights[i] - _minH) * scale + _minHeight;
|
if (heights[i] == -1) {
|
h = -1;
|
}
|
|
geometry.vertices.push(p.x, p.y, 0); //底部顶点
|
geometry.vertices.push(p.x, p.y, 0 - h); //顶部顶点
|
|
if (i > 0) {
|
// eslint-disable-next-line no-undef
|
var distance = AMap.GeometryUtil.distance(r, lastP);
|
//两个数据点最小间隔时间为4s，假设车速按照120km/h计算，4s行驶最大距离作为132米，
|
//设定超过1分钟的数据绘制特殊的连线
|
if (distance <= 500 && h != -1) {
|
var bottomIndex = i * 2;
|
var topIndex = bottomIndex + 1;
|
var lastBottomIndex = bottomIndex - 2;
|
var lastTopIndex = bottomIndex - 1;
|
geometry.faces.push(bottomIndex, topIndex, lastTopIndex);
|
geometry.faces.push(bottomIndex, lastBottomIndex, lastTopIndex);
|
}
|
}
|
|
// var bColor = bColor
|
var tColor = colors[i];
|
geometry.vertexColors.push.apply(geometry.vertexColors, bColor); //底部顶点颜色
|
geometry.vertexColors.push.apply(geometry.vertexColors, tColor); //顶部顶点颜色
|
}
|
|
// 7.根据合并选项重置或新增当前缓存数据
|
if (merge != true) {
|
_factorDatas = fDatas;
|
_factor = factor;
|
if (_cylinder != undefined) {
|
object3Dlayer.remove(_cylinder);
|
}
|
} else {
|
// _factorDatas.lnglats.push.apply(
|
// _factorDatas.lnglats,
|
// lnglats_GD
|
// );
|
// _factorDatas.coors.push.apply(_factorDatas.coors, coors);
|
// _factorDatas.heights.push.apply(_factorDatas.heights, heights);
|
// _factorDatas.colors.push.apply(_factorDatas.colors, colors);
|
// _factorDatas.bottomColor = bColor;
|
}
|
object3Dlayer.add(cylinder);
|
/**************test ****************/
|
// object3Dlayer.on('mouseover', function (e) {
|
// console.log(
|
// `鼠标移入覆盖物! [${e.lnglat.getlng()}, ${e.lnglat.getLat()}]`
|
// );
|
// });
|
/**************test ****************/
|
_cylinder = cylinder;
|
}
|
|
export default {
|
/**
|
* 绘制3D走行路线图
|
* @param fDatas 完整监测数据
|
* @param factor 当前展示的监测因子对象
|
* @param merge 是否和之前绘制的图形合并
|
* @param setCenter 镜头是否自动移动至图形中心
|
*/
|
drawRoadMap(fDatas, factor, merge, setCenter) {
|
const lnglats_GD = fDatas.lnglats_GD;
|
const heights = factor.heights;
|
|
// 1.关闭地图缩放监听
|
map.off('zoomend', onMapZoom);
|
|
// 2.计算绘图高度的边界值
|
if (merge != true) {
|
var minH = _minH < 0 ? heights[0] : _minH;
|
var maxH = _maxH < 0 ? heights[0] : _maxH;
|
for (let i = 0; i < heights.length; i++) {
|
const h = heights[i];
|
minH = Math.min(minH, h);
|
maxH = Math.max(maxH, h);
|
}
|
_minH = minH;
|
_maxH = maxH;
|
}
|
|
// 3.确定定位坐标点
|
var center;
|
if (setCenter && lnglats_GD.length > 0) {
|
var p = lnglats_GD[0];
|
for (let i = 0; i < lnglats_GD.length; i++) {
|
const e = lnglats_GD[i];
|
if (e[0] != 0) {
|
p = e;
|
break;
|
}
|
}
|
// eslint-disable-next-line no-undef
|
center = new AMap.LngLat(...p);
|
}
|
|
// 5.绘制3D图形
|
drawMesh(fDatas, factor, center, merge);
|
|
// 缩放地图到合适的视野级别
|
// map.setFitView()
|
|
// 6.开启地图缩放监听
|
if (lnglats_GD.length > 0) {
|
map.on('zoomend', onMapZoom);
|
}
|
}
|
};
|
