3D建筑.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>3d</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="css/mapbox-gl.css" type="text/css"/>
    <script type="text/javascript" src="js/mapbox-gl.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id="map"></div>
<script>

  var map = new mapboxgl.Map({
            container: 'map', // container id
            style: { // stylesheet location
                "version": 8,
                "sources": {},
                "layers": []
            }, 
            center: [118.7725,32.0509],
            zoom: 10, // starting zoom
            pitch: 40,
            bearing: -20
        });
        map.on("load",function(){
            var arcgis_wmts ='http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/WMTS?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ChinaOnlineCommunity&STYLE=default&TILEMATRIXSET=default028mm&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png'
            var arcgis_layer = {
                "id": "arcgis_wmts",
                "type": "raster",
                "source": {
                    "type": "raster",
                    "tiles": [arcgis_wmts],
                    "zoomOffset": 0,//wmts Capabilities信息中TileMatrix第一个对应的实际多少级
                    "tileSize": 256
                }
            };
            map.addLayer(arcgis_layer);
        })
        

map.on("load", function() {
    map.addSource("3d", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {
                    "level": 1,
                    "name": "Bird Exhibit",
                    "height": 5000,
                    "base_height": 0,
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [118.7739, 32.1212],
                            [118.7427, 32.1109],
                            [118.7258, 32.0811],
                            [118.7248, 32.0543],
                            [118.7008, 31.9942],
                            [118.6654, 31.9722],
                            [118.7176, 31.9520],
                            [118.7914 ,31.9709],
                            [118.8783, 32.0340],
                            [118.8834, 32.0962],
                            [118.8062, 32.1181],
                        ]
                    ]
                }          
            }]
        }
        
    });

    map.addLayer({
        "id": "park-boundary",
        "type": "fill-extrusion",
        "source": "3d",
        "paint": {
            'fill-extrusion-color': '#FFA54F',
            'fill-extrusion-height': ['get', 'height'],
            'fill-extrusion-base': ['get', 'base_height'],
            'fill-extrusion-opacity': 0.6
        },
        // "filter": ["==", "$type", "Polygon"]
    });

  map.on('mousemove',function(e){
        var features=map.queryRenderedFeatures(e.point,{layers:['park-boundary']})
        if(features.length>0){
            map.setPaintProperty('park-boundary','fill-extrusion-color','#faafee')
        }else{
            map.setPaintProperty('park-boundary',"fill-extrusion-color" ,'#FFA54F')
        }
    })


});
</script>

</body>
</html>