跳到主要内容
版本：9.1.1

三维地理围栏

构建三维地理围栏模型。

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>三维地理围栏</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.1/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.673884481865016, 31.31845122412421], 
        zoom: 16.810035105070947, 
        pitch: 60, 
        bearing: 0, 
        userId: '***', // 授权码
    });

    map.on('load', function () {
        let options = {
            id: 'model_id',
            type: 'model',
            callback: function (group, layer) {

                let GeoFencing_diffuse = layer.addGeoFencing({
                    type: "diffuse",
                    color: "#fff60c",
                    speed: 3,
                    opacity: 0.8,
                    height: 29.6,
                    data: {
                        name: "name1",
                        coordinate: [[120.673884481865016, 31.31845122412421], [120.673892295086972, 31.318434601677584], [120.673896695221984, 31.318416044287087], [120.673913297536004, 31.318339436152087], [120.674082076222007, 31.317560383984098], [120.674092208738983, 31.317513596952608], [120.674092544902976, 31.317513575973205], [120.674092248486957, 31.317513413834792], [120.674114339794002, 31.3174114145468], [120.674133772730016, 31.3172990648631], [120.674138336678965, 31.317280533502089], [120.674136780698007, 31.317261641146704], [120.67413291789299, 31.317242993022695], [120.674126800988986, 31.3172247956329], [120.674069687146002, 31.317081425615989], [120.674061688150971, 31.317064871035488], [120.674050122992014, 31.317049971268013], [120.674035356786987, 31.317037325834697], [120.674017972025965, 31.317027434893685], [120.673998654048987, 31.317020686692903], [120.673978163716995, 31.31701734676669], [120.673957309044013, 31.317017548034293], [120.673936922079989, 31.31702129171839], [120.673916040437007, 31.317027403287902], [120.673874289783996, 31.317039661582609], [120.673853411291972, 31.317045780354995], [120.673832529656991, 31.317051910851198], [120.673811665885012, 31.317058048546887], [120.673790790545993, 31.317064177228012], [120.673779359312988, 31.317067534031509], [120.673686283589007, 31.317094872984995], [120.673644169482984, 31.317108354463102], [120.673623265836994, 31.317115680888001], [120.673602604145998, 31.31712335347888], [120.673582131897007, 31.317131388507008], [120.673561855391, 31.317139785066207], [120.673541786179996, 31.317148537736788], [120.673521930565016, 31.317157643808912], [120.673502274894972, 31.317167110507373], [120.673476624890981, 31.31718016740669], [120.67341994820498, 31.317212036474697], [120.673365681123016, 31.317246860343101], [120.673350470397992, 31.317257449531301], [120.673333601297017, 31.317269667835788], [120.673317031875001, 31.317282172741084], [120.673300758977007, 31.317294961543883], [120.673284789956, 31.317308032435196], [120.673275876809996, 31.317317995824293], [120.673271483027008, 31.317329979089106], [120.673274792006538, 31.317343165020784], [120.673148540635495, 31.317479895341197], [120.673129966736013, 31.317469981319686], [120.673106528409988, 31.317502434231791], [120.673073829784997, 31.317553376615006], [120.673063654601989, 31.317570910686104], [120.673054033029004, 31.317588401983198], [120.673044834974988, 31.317606043607501], [120.673035808223005, 31.317623750051002], [120.673027622208991, 31.317641755350405], [120.673022565232998, 31.317653490134308], [120.67301981450602, 31.317659874029701], [120.673012340988976, 31.317678104315785], [120.673005305678984, 31.317696462371284], [120.672998712772994, 31.317714940978099], [120.672992565414987, 31.317733532016696], [120.672986864647001, 31.317752227369194], [120.672981506809009, 31.317771395091196], [120.672976628115009, 31.317790649968099], [120.672972215977012, 31.317810013654881], [120.672926435177374, 31.317991409557113], [120.67287109233034, 31.318246842944294], [120.672863295154968, 31.31826336733458], [120.672865522600986, 31.31828154311409], [120.672871856100983, 31.318298990915391], [120.672882049186001, 31.318315036271002], [120.672895707305997, 31.318329054421188], [120.672912300458009, 31.31834050367619], [120.672931185265995, 31.318348938930185], [120.672951454108997, 31.318354841208428], [120.673111309844998, 31.318380367794248], [120.673115117320989, 31.31838014180779], [120.673113944696993, 31.318385554145401], [120.673118060423604, 31.318386190964105], [120.673818047091601, 31.318497939684324], [120.673819242701015, 31.318492420692905], [120.673839171470007, 31.318487079143608], [120.673857258282979, 31.318478117663702], [120.673872609499966, 31.318465968897879], [120.673884481865016, 31.31845122412421]]
                    }
                });

                let GeoFencing_fade = layer.addGeoFencing({
                    type: "fade",
                    color: "#ffb520",
                    speed: 3,
                    opacity: 0.8,
                    height: 29.6,
                    data: {
                        name: "name2",
                        coordinate: [[120.675218826732007, 31.319237238621302], [120.675091923029996, 31.319822910826701], [120.674061887614002, 31.319658417846], [120.674188797477001, 31.319072746631601], [120.675218826732007, 31.319237238621302]],
                    }
                });
            }
        };
        map.addLayer(options);
    })
</script>
</body>

</html>