mapbox 3D wms

作者: 无我_a50f | 来源:发表于2020-01-14 14:02 被阅读0次

mapbox 3D wms
iOS高德地图WMS服务&&mapbox地图WMS服务
地理空间数据的web可视化
mapbox注销事件问题
iOS dyld: Library not loaded: @r
MapBox_加载地图
地图开发培训（mapBox）
Leaflet 调用Mapbox Studio中定制的瓦片风格
WMS:概述
mapbox+three做3D可视化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
<!--<script type="text/javascript" src="js/src/jquery.min.js"></script>-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<script type="text/javascript">
    mapboxgl.accessToken = "官网申请的token";
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [117.15022, 39.10378],
        zoom: 13
    });
    map.on('load', function () {
//layername自己在addSource这里定义好，底下addLayer就直接用
        map.addSource('layername', {
            'type': 'vector',
            'scheme': 'tms',
            'tiles': ['http://192.168.9.123:9096/geoserver/gwc/service/tms/1.0.0/mapbox%3Aconstruction@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']
//http://192.168.9.123:9096/geoserver/gwc/service/tms/1.0.0/mapbox%3Aconstruction@EPSG%3A900913@pbf是在geoserver首页TMS处找到的图层链接，
//后边的 /{z}/{x}/{y}.pbf为固定格式，不可去掉
 
        });
 
        map.addLayer({
            'id': '3d-buildings',
            'source': 'layername',
//就是你调的geoserver服务发布的图层名称
            'source-layer': 'construction',
            'type': 'fill-extrusion',
            'paint': {
                'fill-extrusion-color': [
                    'interpolate',
                    ['linear'],
//获取图层中某个属性值，并根据这个数值来给3D模型配色
                    ['get', 'leqd'],
//<30的数值配色
                    30, '#267300',
//30-35之间的数值配色，后边以此类推
                    35, '#5E8C00',
                    40, "#A8A800",
                    45, "#C48300",
                    50, "#E04B00",
                    55, "#FF0000",
                    60, "#D41923",
                    65, "#A82236",
                    70, "#7D254A",
                    75, "#4F275E",
                    80, "#002673"
                ],
//根据图层里的height属性来加载模型
                'fill-extrusion-height': ['get', 'height'],
//设置模型透明度
                'fill-extrusion-opacity': 1
            }
        });
 
    });
   
 
 
 
</script>
</html>

参考 https://blog.csdn.net/du_5pet/article/details/89881044