maptalks / maptalks.three

A maptalks layer to render with three.js.
https://deyihu.github.io/maptalks.three.website/
MIT License
572 stars 131 forks source link

Uncaught TypeError: polygon.getShell is not a function #437

Open bonapartecaesa opened 2 years ago

bonapartecaesa commented 2 years ago

maptalks v0.44.2 maptalks.three.js:24 maptalks.registerWorkerAdapter is not defined,If you need to use ThreeVectorTileLayer,you can npm i maptalks@next,more https://github.com/maptalks/maptalks.js/tree/next define @ maptalks.three.js:24 (匿名) @ maptalks.three.js:46 (匿名) @ maptalks.three.js:9 (匿名) @ maptalks.three.js:10 maptalks.three.js:9600 maptalks.three v0.10.1, requires maptalks@>=0.39.0. DevTools 无法加载来源映射:无法加载 http://localhost:8080/plugin/maptalks.three.js.map 的内容:HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE

maptalks.three.js:8659 Uncaught TypeError: polygon.getShell is not a function at ThreeLayer.toShape (maptalks.three.js:8659:33) at ThreeLayer.toExtrudeMesh (maptalks.three.js:8710:30) at MengTest:5061:23 at Array.forEach () at ThreeLayer.threeLayer.prepareToDraw (MengTest:5052:18) at ThreeRenderer.prepareDrawContext (maptalks.js:25967:54) at ThreeRenderer.draw (maptalks.js:25885:12) at ThreeRenderer._drawAndRecord (maptalks.js:6209:12) at ThreeRenderer._tryToDraw (maptalks.js:6198:12) at ThreeRenderer.render (maptalks.js:5730:14) toShape @ maptalks.three.js:8659 toExtrudeMesh @ maptalks.three.js:8710 (匿名) @ MengTest:5061 threeLayer.prepareToDraw @ MengTest:5052 prepareDrawContext @ maptalks.js:25967 draw @ maptalks.js:25885 _drawAndRecord @ maptalks.js:6209 _tryToDraw @ maptalks.js:6198 render @ maptalks.js:5730 drawLayers @ maptalks.js:29834 renderFrame @ maptalks.js:29732 _frameLoop @ maptalks.js:30237 (匿名) @ maptalks.js:30239 requestAnimationFrame(异步) requestAnimFrame @ maptalks.js:139 _frameLoop @ maptalks.js:30238 onLoad @ maptalks.js:29692 _Load @ maptalks.js:8468 Map @ maptalks.js:7267 (匿名) @ MengTest:5004

` var resolutions = []; var d = 2 6378137 Math.PI; for (var i = 0; i < 30; i++) { resolutions[i] = d / (256 * Math.pow(2, i)); }

    //实例化地图对象
    var map = new maptalks.Map("map",{
    center: [115.45306, 38.87128],   //地图的初始中心
    zoom: 20,   //地图的初始缩放。
    pitch: 60,
    bearing:20,
    centerCross: true,
    spatialReference : {
    projection : 'EPSG:3857', // geo projection, can be a string or a function
    resolutions : resolutions,
    fullExtent : {         // map's full extent
    'top': 6378137 * Math.PI,
    'left': -6378137 * Math.PI,
    'bottom': -6378137 * Math.PI,
    'right': 6378137 * Math.PI
    }
},

    baseLayer: new maptalks.TileLayer('base', { //将被设置为初始映射的基本图层。
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', //地图基础层网址模板
    subdomains: ['a','b','c','d'],  //在urlTemplate中替换“{a,b,c,d}”的子域
    attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>' //这一层的属性,可以指定公司或这一层的其他信息。
    })
});

    map.on('zoomend moving moveend', getStatus);
    // features to draw
    //将Buildings中的数据,添加到features数组中
    var features = [];

    buildings.forEach(function (b) {
    console.log(b.features);
    features = features.concat(b.features);
});

    // the ThreeLayer to draw buildings
    var threeLayer = new maptalks.ThreeLayer('t', {
    forceRenderOnMoving : true,
    forceRenderOnRotating : true
});

    threeLayer.prepareToDraw = function (gl, scene, camera) {

    var me = this;
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, -10, 10).normalize();
    scene.add(light);

    features.forEach(function (g) {
    var heightPerLevel = 1;
    var levels = g.properties.levels || 1;
    var color = g.properties.colour;

    var m = new THREE.MeshPhongMaterial({color: color, opacity : 1});
    //change to back side with THREE <= v0.94
    // m.side = THREE.BackSide;

    var mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), heightPerLevel, m,  heightPerLevel);
    if (Array.isArray(mesh)) {
    scene.add.apply(scene, mesh);
} else {
    scene.add(mesh);
}
});
};
    threeLayer.addTo(map);
    getStatus();
    function getStatus() {
    var extent = map.getExtent(),
    ex = [
    '{',
    'xmin:' + extent.xmin.toFixed(5),
    ', ymin:' + extent.ymin.toFixed(5),
    ', xmax:' + extent.xmax.toFixed(5),
    ', ymax:' + extent.xmax.toFixed(5),
    '}'
    ].join('');
    var center = map.getCenter();
    var mapStatus = [
    'Center : [' + [center.x.toFixed(5), center.y.toFixed(5)].join() + ']',
    'Extent : ' + ex,
    'Size : ' + map.getSize().toArray().join(),
    'Zoom : '   + map.getZoom(),
    'MinZoom : ' + map.getMinZoom(),
    'MaxZoom : ' + map.getMaxZoom(),
    'Projection : ' + map.getProjection().code
    ];

    document.getElementById('status').innerHTML = '<div>' + mapStatus.join('<br>') + '</div>';
}`

image

image

deyihu commented 2 years ago

@bonapartecaesa Please provide a complete example of the code package, including your test data