maptalks,mapboxgl實現3D樓宇,攝像頭懸浮

效果圖

<!DOCTYPE html>
<html>
<head>
    <title>maptalks.mapboxgl demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet' />
    <script type="text/javascript" src="maptalks.mapboxgl.js"></script>
	<script type="text/javascript" src="build.js"></script>
    <style>
        html,body{
            margin:0px;
			height:100%;
        }
        #map {
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" >
    mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1bGlwaWFvIiwiYSI6ImNqemtsbXZwdzBtNjAzZG9hOWt4Z21ocHUifQ.dsdPomNsO7w4Q-rRduoBcg';

    var baseLayer = new maptalks.MapboxglLayer('tile',{
        glOptions : {
            'style' : 'mapbox://styles/mapbox/dark-v10'
        }
    });

    var map = new maptalks.Map("map",{
        //limit max pitch to 60 as mapbox-gl-js required
        maxPitch : 60,
        center:   [121.57792019,31.26885962],
        zoom   :  16,
		pitch: 56,
		bearing: 0,
        baseLayer : baseLayer
    });
	var markers=[];//所有攝像頭
	let cameraWidth=15,cameraHeight=15,textSize=4;
	 //根據層級來控制攝像頭大小
	 map.on('zoomend',function(zoom){
		let temp=zoom.from-zoom.to;
		if(temp>0){
		    temp=1.5*temp;
			cameraWidth=cameraWidth/temp;
			cameraHeight=cameraHeight/temp;
			textSize=textSize/temp;
		}else if(temp<0){
		    temp=Math.abs(temp)*1.5;
			cameraWidth=cameraWidth*temp;
			cameraHeight=cameraHeight*temp;
			textSize=textSize*temp;
		}
		markers.forEach(function(g){
			g.updateSymbol({
            'markerWidth' : cameraWidth,
			'markerHeight' : cameraHeight,
			'textSize' : textSize
          });
		});
	 });
	 
     var layer=new maptalks.VectorLayer('vector',{
        enableAltitude : true,        // enable altitude
        altitudeProperty : 'altitude' // altitude property in properties, default by 'altitude'
      }).addTo(map);
	  
	  
	  var marker1 = new maptalks.Marker(
        [121.57792019,31.26885962],
        {
          symbol: 
		  {
            'markerFile'   : '1.png',//攝像頭圖片
            'markerWidth'  : cameraWidth,
            'markerHeight' : cameraHeight,
            'markerDx'     : 0,
            'markerDy'     : 0,
            'markerOpacity': 1,
			'textFaceName' : 'sans-serif',
            'textName' : '{name}',
            'textSize' : textSize,
            'textDy'   : 3
          },
		  properties : {
            altitude : 50,
			name:'攝像頭1'
          }
        }
      );
	  var marker2 = new maptalks.Marker(
        [121.57880035,31.26726501],
        {
          symbol: 
		  {
            'markerFile'   : '2.png',//攝像頭圖片
            'markerWidth'  : cameraWidth,
            'markerHeight' : cameraHeight,
            'markerDx'     : 0,
            'markerDy'     : 0,
            'markerOpacity': 1,
			'textFaceName' : 'sans-serif',
            'textName' : '{name}',
            'textSize' : textSize,
            'textDy'   : 3
          },
		  properties : {
            altitude : 50,
			name:'攝像頭2'
          }
        }
      );
	  marker1.on('click',function(){
	  });
	  markers.push(marker1);
	  markers.push(marker2);
	  
	  var multiPolygon = new maptalks.MultiPolygon([
                    [
                        [
                            [
                                121.57791602,
                                31.26885628
                            ],
                            [
                                121.57559574,
                                31.2672609
                            ],
                            [
                                121.57405076,
                                31.26650217
                            ],
                            [
                                121.57531057,
                                31.26453833
                            ],
                            [
                                121.57501869,
                                31.2643849
                            ],
                            [
                                121.57525944,
                                31.26404894
                            ],
                            [
                                121.57639994,
                                31.26319769
                            ],
                            [
                                121.57685333,
                                31.26344285
                            ],
                            [
                                121.57791642,
                                31.26454417
                            ],
                            [
                                121.57824748,
                                31.26493524
                            ],
                            [
                                121.57754657,
                                31.26540716
                            ],
                            [
                                121.57655069,
                                31.26546411
                            ],
                            [
                                121.57665163,
                                31.26625151
                            ],
                            [
                                121.57877251,
                                31.26606947
                            ],
                            [
                                121.57880035,
                                31.26726501
                            ],
                            [
                                121.57845355,
                                31.26765787
                            ],
                            [
                                121.57894712,
                                31.2680297
                            ],
                            [
                                121.57812851,
                                31.26882507
                            ],
                            [
                                121.57791602,
                                31.26885628
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                121.57792019,
                                31.26885962
                            ],
                            [
                                121.57812435,
                                31.26882937
                            ],
                            [
                                121.5780214,
                                31.26892802
                            ],
                            [
                                121.57792019,
                                31.26885962
                            ]
                        ]
                    ]
                ], {
        visible : true,
        editable : true,
        cursor : null,
        shadowBlur : 0,
        shadowColor : 'black',
        draggable : false,
        dragShadow : false, // display a shadow during dragging
        drawOnAxis : null,  // force dragging stick on a axis, can be: x, y
        symbol: {
          'polygonFill' : 'rgb(135,196,240)',
          'polygonOpacity' : 0.1,
		  'lineWidth' : 0
        },
		properties : {
          altitude : 60
        }
      });
	  
	  layer.addGeometry(markers);
	  //二樓樓面呈現(凸顯層)
	  layer.addGeometry(multiPolygon);
	  var glMap=baseLayer.getGlMap();
	  glMap.on('load',function(){
		glMap.addLayer({
				'id': 'buildings',
				'type': 'fill-extrusion',
				'minzoom': 1,
				'source': {
					'type': 'geojson',
					//樓宇座標,層級 json文件
					'data': build
				},
				'layout': {
					'visibility': 'visible'
				},
				'paint': {
					'fill-extrusion-color': ['get', 'color'],
					'fill-extrusion-height': ['get', 'height'],
					'fill-extrusion-base': ['get', 'baseHeight'],
					'fill-extrusion-opacity': 0.6
				}
			});
	  });
</script>
</body>
</html>

build.js

var build={
    "features":[
        {
            "type":"Feature",
            "properties":{
                "name":null,
                "type":"building",
                "key":"長征村|151號",
                "height":60,
                "color":"#00cec9",
                "baseHeight":0,
                "floor":"1"
            },
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                121.57791602,
                                31.26885628
                            ],
                            [
                                121.57559574,
                                31.2672609
                            ],
                            [
                                121.57405076,
                                31.26650217
                            ],
                            [
                                121.57531057,
                                31.26453833
                            ],
                            [
                                121.57501869,
                                31.2643849
                            ],
                            [
                                121.57525944,
                                31.26404894
                            ],
                            [
                                121.57639994,
                                31.26319769
                            ],
                            [
                                121.57685333,
                                31.26344285
                            ],
                            [
                                121.57791642,
                                31.26454417
                            ],
                            [
                                121.57824748,
                                31.26493524
                            ],
                            [
                                121.57754657,
                                31.26540716
                            ],
                            [
                                121.57655069,
                                31.26546411
                            ],
                            [
                                121.57665163,
                                31.26625151
                            ],
                            [
                                121.57877251,
                                31.26606947
                            ],
                            [
                                121.57880035,
                                31.26726501
                            ],
                            [
                                121.57845355,
                                31.26765787
                            ],
                            [
                                121.57894712,
                                31.2680297
                            ],
                            [
                                121.57812851,
                                31.26882507
                            ],
                            [
                                121.57791602,
                                31.26885628
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                121.57792019,
                                31.26885962
                            ],
                            [
                                121.57812435,
                                31.26882937
                            ],
                            [
                                121.5780214,
                                31.26892802
                            ],
                            [
                                121.57792019,
                                31.26885962
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type":"Feature",
            "properties":{
                "name":null,
                "type":"building",
                "key":"長征村|151號",
                "height":120,
                "color":"#00cec9",
                "baseHeight":60,
                "floor":"2"
            },
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                121.57791602,
                                31.26885628
                            ],
                            [
                                121.57559574,
                                31.2672609
                            ],
                            [
                                121.57405076,
                                31.26650217
                            ],
                            [
                                121.57531057,
                                31.26453833
                            ],
                            [
                                121.57501869,
                                31.2643849
                            ],
                            [
                                121.57525944,
                                31.26404894
                            ],
                            [
                                121.57639994,
                                31.26319769
                            ],
                            [
                                121.57685333,
                                31.26344285
                            ],
                            [
                                121.57791642,
                                31.26454417
                            ],
                            [
                                121.57824748,
                                31.26493524
                            ],
                            [
                                121.57754657,
                                31.26540716
                            ],
                            [
                                121.57655069,
                                31.26546411
                            ],
                            [
                                121.57665163,
                                31.26625151
                            ],
                            [
                                121.57877251,
                                31.26606947
                            ],
                            [
                                121.57880035,
                                31.26726501
                            ],
                            [
                                121.57845355,
                                31.26765787
                            ],
                            [
                                121.57894712,
                                31.2680297
                            ],
                            [
                                121.57812851,
                                31.26882507
                            ],
                            [
                                121.57791602,
                                31.26885628
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                121.57792019,
                                31.26885962
                            ],
                            [
                                121.57812435,
                                31.26882937
                            ],
                            [
                                121.5780214,
                                31.26892802
                            ],
                            [
                                121.57792019,
                                31.26885962
                            ]
                        ]
                    ]
                ]
            }
        }
    ],
    "type":"FeatureCollection"
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章