osm建筑模型叠加测试echarts map3D配置项内容和展示
在osm下载地图后，用Python提取其中的建筑物信息，构建shp后可视化效果测试。osm上部分建筑信息没有
配置项如下
var uploadedDataURL = '/asset/get/s/data-1590291019662-Pukz5wykJ.json';
mapboxgl.accessToken = mapboxglToken;
var ENCODE_SCALE = 1e6;
var geoJSON = {
features: [],
};
var regions = [];
var readShp = new Promise(function (resolve, reject) {
shapefile
.open('/asset/get/s/data-1628263403232-XyuuH7p_0.shp', '/asset/get/s/data-1628263416060-SwJ3licwd.dbf')
.then((source) =>
source.read().then(function append(result) {
if (result.done) {
resolve();
return;
}
var feature = result.value;
feature.properties.name = geoJSON.features.length + '';
regions.push({
name: geoJSON.features.length + '',
value: 1,
height: feature.properties.SHAPE_leng * 7,
});
geoJSON.features.push(feature);
return source.read().then(append);
})
);
});
myChart.showLoading();
Promise.all([$.getJSON('/asset/get/s/data-1590291019662-Pukz5wykJ.json'), readShp]).then(function ([
data,
lastFeature,
]) {
myChart.hideLoading();
echarts.registerMap('buildings', geoJSON);
myChart.setOption({
mapbox3D: {
center: [121.4953, 31.23807],
zoom: 16,
pitch: 50,
bearing: 90,
style: 'mapbox://styles/mapbox/light-v9',
// altitudeScale: 1,
postEffect: {
enable: true,
FXAA: {
enable: true,
},
},
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high',
},
ambient: {
intensity: 0,
},
ambientCubemap: {
texture: '/asset/get/s/data-1491838644249-ry33I7YTe.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2,
},
},
},
series: [
{
type: 'map3D',
map: 'buildings',
coordinateSystem: 'mapbox3D',
shading: 'realistic',
silent: true,
instancing: true,
data: regions,
realisticMaterial: {
metalness: 0.9,
roughness: 0.2,
},
},
{
type: 'lines3D',
shading: 'realistic',
coordinateSystem: 'mapbox3D',
barSize: 0.4,
silent: true,
data: [
[//地铁二号线
[121.296604, 31.191232],
[121.300943, 31.19353],
[121.303647, 31.194449],
[121.305471, 31.194793],
[121.309143, 31.195279],
[121.313226, 31.195802],
[121.31698, 31.195925],
[121.31698, 31.195925],
[121.318458, 31.195981],
[121.318879, 31.196036],
[121.320854, 31.196536],
[121.321112, 31.196564],
[121.321726, 31.196596],
[121.321726, 31.196596],
[121.322471, 31.196596],
[121.326923, 31.196462],
[121.327737, 31.196517],
[121.328612, 31.196848],
[121.328998, 31.197225],
[121.329783, 31.198669],
[121.330139, 31.199585],
[121.330013, 31.20037],
[121.327935, 31.204793],
[121.326896, 31.207268],
[121.326411, 31.209887],
[121.326782, 31.214258],
[121.327245, 31.216546],
[121.327887, 31.218142],
[121.328369, 31.21861],
[121.32878, 31.218876],
[121.329619, 31.219317],
[121.33112, 31.219697],
[121.332201, 31.219881],
[121.333352, 31.220158],
[121.334505, 31.220331],
[121.33562, 31.220499],
[121.336968, 31.220627],
[121.338841, 31.220706],
[121.339788, 31.220634],
[121.342723, 31.220568],
[121.347113, 31.220444],
[121.348782, 31.220373],
[121.351066, 31.220334],
[121.35463, 31.220042],
[121.35463, 31.220042],
[121.35894, 31.219793],
[121.363002, 31.219513],
[121.363521, 31.219463],
[121.365688, 31.219084],
[121.368001, 31.218656],
[121.369405, 31.218306],
[121.369405, 31.218306],
[121.370639, 31.218016],
[121.370914, 31.217975],
[121.37134, 31.217916],
[121.372058, 31.217866],
[121.373955, 31.217794],
[121.375115, 31.217714],
[121.378066, 31.217465],
[121.379166, 31.217343],
[121.380736, 31.217043],
[121.381547, 31.216864],
[121.382427, 31.216667],
[121.382427, 31.216667],
[121.384587, 31.216203],
[121.388258, 31.215425],
[121.391271, 31.214785],
[121.393272, 31.214376],
[121.395603, 31.213657],
[121.398205, 31.213166],
[121.399631, 31.212907],
[121.399631, 31.212907],
[121.40049, 31.21278],
[121.400765, 31.212772],
[121.401542, 31.212819],
[121.404194, 31.214153],
[121.405845, 31.21578],
[121.406825, 31.216591],
[121.410093, 31.219444],
[121.411029, 31.219845],
[121.413338, 31.220313],
[121.413338, 31.220313],
[121.415436, 31.220761],
[121.419458, 31.220828],
[121.423519, 31.220609],
[121.424519, 31.220638],
[121.426032, 31.220987],
[121.427014, 31.221441],
[121.427893, 31.221692],
[121.427893, 31.221692],
[121.428999, 31.221999],
[121.42993, 31.222107],
[121.430647, 31.221997],
[121.430921, 31.221923],
[121.431886, 31.221357],
[121.432356, 31.221312],
[121.432877, 31.221407],
[121.435247, 31.22243],
[121.435819, 31.222676],
[121.436303, 31.222814],
[121.437783, 31.223093],
[121.438798, 31.223563],
[121.44139, 31.224958],
[121.441679, 31.225084],
[121.441679, 31.225084],
[121.444177, 31.226207],
[121.444948, 31.226606],
[121.448864, 31.228715],
[121.454454, 31.231433],
[121.454656, 31.231518],
[121.455742, 31.231861],
[121.455742, 31.231861],
[121.457895, 31.232537],
[121.459104, 31.232763],
[121.463471, 31.233232],
[121.465361, 31.233473],
[121.466207, 31.233781],
[121.468212, 31.234777],
[121.468212, 31.234777],
[121.469934, 31.235681],
[121.470226, 31.235854],
[121.47118, 31.23641],
[121.472291, 31.236874],
[121.476988, 31.238234],
[121.479244, 31.239115],
[121.479244, 31.239115],
[121.48378, 31.240685],
[121.485576, 31.240945],
[121.491759, 31.241085],
[121.493863, 31.240985],
[121.496283, 31.240506],
[121.49779, 31.240017],
[121.49779, 31.240017],
[121.499824, 31.239343],
[121.507451, 31.236578],
[121.508734, 31.236134],
[121.511038, 31.235389],
[121.511038, 31.235389],
[121.516218, 31.233702],
[121.516909, 31.233443],
[121.520468, 31.232122],
[121.52083, 31.231933],
[121.521489, 31.231561],
[121.522564, 31.231001],
[121.522564, 31.231001],
[121.528114, 31.228172],
[121.533478, 31.225261],
[121.533821, 31.225053],
[121.53494, 31.224394],
[121.537746, 31.222634],
[121.53982, 31.221357],
[121.53982, 31.221357],
[121.542492, 31.219727],
[121.544139, 31.218633],
[121.544435, 31.217986],
[121.545952, 31.213977],
[121.54622, 31.213023],
[121.546484, 31.211772],
[121.546484, 31.211772],
[121.546714, 31.210812],
[121.547617, 31.209028],
[121.55011, 31.20647],
[121.55122, 31.20549],
[121.551552, 31.205322],
[121.553154, 31.205246],
[121.553154, 31.205246],
[121.554143, 31.20521],
[121.559505, 31.204979],
[121.561176, 31.204989],
[121.567058, 31.205078],
[121.56844, 31.204868],
[121.574357, 31.203141],
[121.575618, 31.202906],
[121.57719, 31.203014],
[121.582329, 31.203868],
[121.583367, 31.204046],
[121.583367, 31.204046],
[121.584532, 31.204233],
[121.595736, 31.205987],
[121.597799, 31.206361],
[121.597799, 31.206361],
[121.599739, 31.206713],
[121.603577, 31.207439],
[121.60657, 31.208258],
[121.611515, 31.211388],
[121.613271, 31.212319],
[121.614725, 31.21303],
[121.614895, 31.213091],
[121.616368, 31.213266],
[121.616368, 31.213266],
[121.618306, 31.213442],
[121.636463, 31.214046],
[121.649569, 31.215318],
[121.651883, 31.215858],
[121.651883, 31.215858],
[121.654697, 31.216516],
[121.658491, 31.217573],
[121.660129, 31.217793],
[121.662099, 31.217952],
[121.663332, 31.217897],
[121.664357, 31.217784],
[121.665355, 31.217532],
[121.666497, 31.217101],
[121.668061, 31.216393],
[121.668621, 31.216134],
[121.66964, 31.215552],
[121.66964, 31.215552],
[121.670909, 31.214826],
[121.671941, 31.214124],
[121.672732, 31.213473],
[121.673415, 31.21269],
[121.67381, 31.212009],
[121.674101, 31.211244],
[121.675364, 31.206508],
[121.676236, 31.201074],
[121.676586, 31.198913],
[121.676586, 31.198913],
[121.676685, 31.198311],
[121.676719, 31.198103],
[121.67748, 31.194213],
[121.677677, 31.193596],
[121.677929, 31.192955],
[121.678288, 31.192114],
[121.679114, 31.190545],
[121.679903, 31.189434],
[121.680549, 31.188618],
[121.681015, 31.18811],
[121.681768, 31.187619],
[121.682431, 31.187329],
[121.683469, 31.187118],
[121.685564, 31.186846],
[121.686231, 31.186795],
[121.686512, 31.186792],
[121.686986, 31.186842],
[121.688229, 31.187194],
[121.691678, 31.188178],
[121.693732, 31.188758],
[121.693732, 31.188758],
[121.695769, 31.189338],
[121.700317, 31.190303],
[121.706837, 31.191743],
[121.713698, 31.193202],
[121.715964, 31.1937],
[121.719386, 31.194884],
[121.719386, 31.194884],
[121.7262, 31.197203],
[121.737444, 31.199712],
[121.746925, 31.201095],
[121.751226, 31.201479],
[121.751226, 31.201479],
[121.759023, 31.201888],
[121.761588, 31.202077],
[121.76491, 31.202333],
[121.766604, 31.202433],
[121.768149, 31.202151],
[121.769674, 31.20163],
[121.771415, 31.200446],
[121.772921, 31.19855],
[121.777235, 31.190266],
[121.780523, 31.187142],
[121.783712, 31.183605],
[121.78745, 31.178061],
[121.790599, 31.173417],
[121.792524, 31.170681],
[121.792524, 31.170681],
[121.794208, 31.168282],
[121.79836, 31.161429],
[121.799474, 31.159376],
[121.800587, 31.156806],
[121.801317, 31.154597],
[121.802403, 31.151622],
[121.802403, 31.151622],
],
],
polyline: true,
lineStyle: {
width: 6,
color: '#00c800',
opacity: 0.8,
},
},
],
});
if (option && typeof option === 'object') {
myChart.setOption(option, true);
}
//Mapbox实例获取
var map = myChart.getModel()
.getComponent("mapbox3D")
.getMapbox();
//map.addControl(new mapboxgl.NavigationControl());
console.log(map)
//相机旋转
function rotate() {
map.easeTo({ bearing: 0, duration: 8000, pitch: 0, zoom: 13 });
t = window.setTimeout(() => {
map.easeTo({ bearing: 180, duration: 10000, pitch: 80, zoom: 15 });
t2 = window.setTimeout(() => {
map.easeTo({ bearing: -120, duration: 10000, pitch: 60, zoom: 14 });
t3 = window.setTimeout(() => {
rotate();
}, 10000);
}, 10000);
}, 10000);
}
rotate()
});
截图如下
