Vue通过npm集成maptalks详细步骤

布满荆棘的人生 2023-07-18 02:45 12阅读 0赞

1、创建Vue项目并添加maptalks的依赖

//1、构建Vue工程,"map"为项目名称，可自定义
    vue init webpack map
    //2、添加three.js依赖
    npm install three
    //3、添加maptalks.js依赖
    npm install maptalks
    //4、添加maptalks.three.js依赖
    npm install maptalks.three
    //到这里要使用maptalks所需的依赖添加完毕

2、在vue文件中引入maptalks.js

import 'maptalks/dist/maptalks.css';
    import * as THREE from 'three';
    import * as maptalks from 'maptalks';
    import {  ThreeLayer } from 'maptalks.three/dist/maptalks.three.js';

3、在mounted属性中添加加载地图的函数：

mounted: function(){ 
    
         let map = new maptalks.Map("map",{ 
    
                      center: [115.45258640222,38.87145556222],
                      zoom: 20,
                      dragPitch : true,
                      //allow map to drag rotating, true by default
                      dragRotate : true,
                      //enable map to drag pitching and rotating at the same time, false by default
                      dragRotatePitch : true,
                      baseLayer: new maptalks.TileLayer('base', { 
                          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                          subdomains: ['a','b','c','d'],
                          attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
                      })
                  });
    
        let buildings  = [
          { "type":"FeatureCollection","features":[{ "type":"Feature","id":"way/-39826","properties":{ "building":"yes","colour":"#C49C94","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45258640446,38.87145556602],[115.45258640446,38.87142473287],[115.45261637429,38.87142473287],[115.45261637429,38.87145556602],[115.45258640446,38.87145556602]]]}},{ "type":"Feature","id":"way/-39828","properties":{ "building":"yes","colour":"#D3D3D3","name":"术前术后观察室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45262119077,38.87149139921],[115.45262119077,38.87142473296],[115.4527057485,38.87142473296],[115.4527057485,38.87149139921],[115.45262119077,38.87149139921]]]}},{ "type":"Feature","id":"way/-39830","properties":{ "building":"yes","colour":"#EE8A31","name":"主任办公室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45271067212,38.87149139921],[115.45271067212,38.87146006608],[115.45279373137,38.87146006608],[115.45279373137,38.87149139921],[115.45271067212,38.87149139921]]]}},{ "type":"Feature","id":"way/-39832","properties":{ "building":"yes","colour":"#FDD1C5","name":"阅片","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45271045805,38.8714570661],[115.45271045805,38.87142473296],[115.45279373137,38.87142473296],[115.45279373137,38.8714570661],[115.45271045805,38.8714570661]]]}},{ "type":"Feature","id":"way/-39834","properties":{ "building":"yes","colour":"#BCBD22","name":"准备间","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45254947724,38.87142173297],[115.45254947724,38.87138356652],[115.45261583901,38.87138356652],[115.45261583901,38.87142173297],[115.45254947724,38.87142173297]]]}},{ "type":"Feature","id":"way/-39836","properties":{ "building":"yes","colour":"#FFBB78","name":"暗室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45262076263,38.87142156631],[115.45262076263,38.87138356652],[115.4527057485,38.87138356652],[115.4527057485,38.87142156631],[115.45262076263,38.87142156631]]]}},{ "type":"Feature","id":"way/-39838","properties":{ "building":"yes","colour":"#EDE39A","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45271045805,38.87142139964],[115.45271045805,38.87138373318],[115.45280614744,38.87138373318],[115.45280614744,38.87142139964],[115.45271045805,38.87142139964]]]}},{ "type":"Feature","id":"way/-39840","properties":{ "building":"yes","colour":"#CFF1D1","image":"images\\stair.png","name":"楼梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45279951126,38.87149139921],[115.45279951126,38.87142523295],[115.45283868611,38.87142523295],[115.45283868611,38.87149139921],[115.45279951126,38.87149139921]]]}},{ "type":"Feature","id":"way/-39842","properties":{ "building":"yes","colour":"#CA7C56","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45280914453,38.87142139956],[115.45280914453,38.8713837331],[115.45283932843,38.8713837331],[115.45283932843,38.87142139956],[115.45280914453,38.87142139956]]]}},{ "type":"Feature","id":"way/-39844","properties":{ "building":"yes","colour":"#BCBD22","name":"储片","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4528438238,38.87149123254],[115.4528438238,38.87142539962],[115.45288299865,38.87142539962],[115.45288299865,38.87149123254],[115.4528438238,38.87149123254]]]}},{ "type":"Feature","id":"way/-39846","properties":{ "building":"yes","colour":"#D3D3D3","name":"强电井","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4528438238,38.87142156631],[115.4528438238,38.87140523307],[115.45286865594,38.87140523307],[115.45286865594,38.87142156631],[115.4528438238,38.87142156631]]]}},{ "type":"Feature","id":"way/-39848","properties":{ "building":"yes","colour":"#FFBB78","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45284360973,38.87140106642],[115.45284360973,38.87138373318],[115.45286844187,38.87138373318],[115.45286844187,38.87140106642],[115.45284360973,38.87140106642]]]}},{ "type":"Feature","id":"way/-39850","properties":{ "building":"yes","colour":"#EE8A31","name":"机房","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45288749423,38.87149123246],[115.45288749423,38.87142481621],[115.45292934496,38.87142481621],[115.45292934496,38.87149123246],[115.45288749423,38.87149123246]]]}},{ "type":"Feature","id":"way/-39852","properties":{ "building":"yes","colour":"#FDD1C5","name":"登记分诊","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45288792226,38.87142173297],[115.45288792226,38.87138339985],[115.45292902374,38.87138339985],[115.45292902374,38.87142173297],[115.45288792226,38.87142173297]]]}},{ "type":"Feature","id":"way/-39854","properties":{ "building":"yes","colour":"#EDE39A","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45293244887,38.87149106588],[115.45293244887,38.87138339985],[115.45298147095,38.87138339985],[115.45298147095,38.87149106588],[115.45293244887,38.87149106588]]]}},{ "type":"Feature","id":"way/-39856","properties":{ "building":"yes","colour":"#CFF1D1","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4529983825,38.8715493988],[115.45299873144,38.87149506471],[115.45304154548,38.87149523137],[115.45304119654,38.87154956546],[115.4529983825,38.8715493988]]]}},{ "type":"Feature","id":"way/-39858","properties":{ "building":"yes","colour":"#CA7C56","name":"门厅","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45298382572,38.87149106588],[115.45298424853,38.87138309344],[115.45305446357,38.8713832601],[115.45305404075,38.87149123254],[115.45298382572,38.87149106588]]]}},{ "type":"Feature","id":"way/-39860","properties":{ "building":"yes","colour":"#BCBD22","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45305725181,38.87149106588],[115.45305775702,38.87138329119],[115.45311641226,38.87138345786],[115.45311590705,38.87149123254],[115.45305725181,38.87149106588]]]}},{ "type":"Feature","id":"way/-39862","properties":{ "building":"yes","colour":"#D3D3D3","name":"工友","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45311890414,38.87149106579],[115.45311890414,38.87147248258],[115.45314395035,38.87147248258],[115.45314395035,38.87149106579],[115.45311890414,38.87149106579]]]}},{ "type":"Feature","id":"way/-39864","properties":{ "building":"yes","colour":"#FFBB78","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4531206167,38.87146856594],[115.4531206167,38.87145256604],[115.45314330814,38.87145256604],[115.45314330814,38.87146856594],[115.4531206167,38.87146856594]]]}},{ "type":"Feature","id":"way/-39866","properties":{ "building":"yes","colour":"#EE8A31","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45312050966,38.87144848273],[115.45312050966,38.87143173283],[115.45314320111,38.87143173283],[115.45314320111,38.87144848273],[115.45312050966,38.87144848273]]]}},{ "type":"Feature","id":"way/-39868","properties":{ "building":"yes","colour":"#FDD1C5","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45312050966,38.87142814952],[115.45312050966,38.87140764964],[115.45315090763,38.87140764964],[115.45315090763,38.87142814952],[115.45312050966,38.87142814952]]]}},{ "type":"Feature","id":"way/-39870","properties":{ "building":"yes","colour":"#EDE39A","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4531206167,38.87140456632],[115.4531206167,38.87138356643],[115.45315101467,38.87138356643],[115.45315101467,38.87140456632],[115.4531206167,38.87140456632]]]}},{ "type":"Feature","id":"way/-39872","properties":{ "building":"yes","colour":"#CFF1D1","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45314823176,38.87149106579],[115.45314823176,38.87145964933],[115.45319596942,38.87145964933],[115.45319596942,38.87149106579],[115.45314823176,38.87149106579]]]}},{ "type":"Feature","id":"way/-39874","properties":{ "building":"yes","colour":"#CA7C56","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45314823176,38.87145689935],[115.45314833664,38.8714324831],[115.45315623695,38.87143247796],[115.45315636627,38.87142476966],[115.45318037337,38.87142483217],[115.45318042783,38.87145683275],[115.45314823176,38.87145689935]]]}},{ "type":"Feature","id":"way/-39876","properties":{ "building":"yes","colour":"#C49C94","name":"管道井","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45315636632,38.87142156631],[115.45315636632,38.87138373318],[115.45319596931,38.87138373318],[115.45319596931,38.87142156631],[115.45315636632,38.87142156631]]]}},{ "type":"Feature","id":"way/-39878","properties":{ "building":"yes","colour":"#BCBD22","image":"images\\stair.png","name":"楼梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4531996085,38.87149089921],[115.4531996085,38.87142523295],[115.45323963963,38.87142523295],[115.45323963963,38.87149089921],[115.4531996085,38.87149089921]]]}},{ "type":"Feature","id":"way/-39880","properties":{ "building":"yes","colour":"#D3D3D3","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45319982257,38.87142173297],[115.45319982257,38.87138373318],[115.45324006777,38.87138373318],[115.45324006777,38.87142173297],[115.45319982257,38.87142173297]]]}},{ "type":"Feature","id":"way/-39882","properties":{ "building":"yes","colour":"#FDD1C5","name":"强电井","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45324584778,38.87142164956],[115.45324584778,38.87140414966],[115.45327164324,38.87140414966],[115.45327164324,38.87142164956],[115.45324584778,38.87142164956]]]}},{ "type":"Feature","id":"way/-39884","properties":{ "building":"yes","colour":"#EDE39A","name":"弱电井","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45324563371,38.87140131634],[115.45324563371,38.8713837331],[115.45327164324,38.8713837331],[115.45327164324,38.87140131634],[115.45324563371,38.87140131634]]]}},{ "type":"Feature","id":"way/-39886","properties":{ "building":"yes","colour":"#FFBB78","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4532456336,38.87149123254],[115.4532456336,38.87145989941],[115.45332890692,38.87145989941],[115.45332890692,38.87149123254],[115.4532456336,38.87149123254]]]}},{ "type":"Feature","id":"way/-39888","properties":{ "building":"yes","colour":"#EE8A31","name":"造影","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45324584767,38.87145673277],[115.45324584767,38.87142523295],[115.45327431901,38.87142539962],[115.45327431901,38.87138406651],[115.45332933506,38.87138406651],[115.45332933506,38.87145673277],[115.45324584767,38.87145673277]]]}},{ "type":"Feature","id":"way/-39890","properties":{ "building":"yes","colour":"#CFF1D1","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4533340446,38.87149106588],[115.4533340446,38.87145989941],[115.45341860234,38.87145989941],[115.45341860234,38.87149106588],[115.4533340446,38.87149106588]]]}},{ "type":"Feature","id":"way/-39892","properties":{ "building":"yes","colour":"#CA7C56","name":"造影","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4533340446,38.8714565661],[115.4533340446,38.87138389985],[115.4534181742,38.87138389985],[115.4534181742,38.8714565661],[115.4533340446,38.8714565661]]]}},{ "type":"Feature","id":"way/-39894","properties":{ "building":"yes","colour":"#C49C94","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4534397954,38.87145573269],[115.4534397954,38.87142506621],[115.45345338886,38.87142506621],[115.45345338886,38.87145573269],[115.4534397954,38.87145573269]]]}},{ "type":"Feature","id":"way/-39896","properties":{ "building":"yes","colour":"#BCBD22","name":"库","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45343990243,38.8713842331],[115.45348967376,38.8713842331],[115.45348967376,38.87142164956],[115.45343990243,38.87142164956],[115.45343990243,38.8713842331]]]}},{ "type":"Feature","id":"way/-39898","properties":{ "building":"yes","colour":"#D3D3D3","image":"images\\stair.png","name":"楼梯 下","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45349384813,38.87141689959],[115.45349384813,38.87138714975],[115.45350894008,38.87138714975],[115.45350894008,38.87141689959],[115.45349384813,38.87141689959]]]}},{ "type":"Feature","id":"way/-39900","properties":{ "building":"yes","colour":"#FFBB78","image":"images\\stair.png","name":"楼梯 上","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45349374099,38.87138423318],[115.45349374099,38.87133556675],[115.45351386359,38.87133556675],[115.45351386359,38.87138423318],[115.45349374099,38.87138423318]]]}},{ "type":"Feature","id":"way/-39902","properties":{ "building":"yes","colour":"#EE8A31","name":"洗手","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45254969131,38.87137839988],[115.45254969131,38.87135606665],[115.45267406611,38.87135606665],[115.45267406611,38.87137839988],[115.45254969131,38.87137839988]]]}},{ "type":"Feature","id":"way/-39904","properties":{ "building":"yes","colour":"#FDD1C5","name":"无菌","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45254947724,38.87135256667],[115.45254947724,38.87130590021],[115.45261669529,38.87130590021],[115.45261669529,38.87135256667],[115.45254947724,38.87135256667]]]}},{ "type":"Feature","id":"way/-39906","properties":{ "building":"yes","colour":"#EDE39A","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45254969131,38.87130240022],[115.45254969131,38.87128706695],[115.45261712343,38.87128706695],[115.45261712343,38.87130240022],[115.45254969131,38.87130240022]]]}},{ "type":"Feature","id":"way/-39908","properties":{ "building":"yes","colour":"#CFF1D1","name":"数字减影主机","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4526209767,38.87135256667],[115.4526209767,38.87128690029],[115.45270617665,38.87128690029],[115.45270617665,38.87135256667],[115.4526209767,38.87135256667]]]}},{ "type":"Feature","id":"way/-39910","properties":{ "building":"yes","colour":"#CA7C56","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45270992298,38.87135264992],[115.45271014518,38.87128708513],[115.45275071149,38.87128716847],[115.45275048929,38.87135273325],[115.45270992298,38.87135264992]]]}},{ "type":"Feature","id":"way/-39912","properties":{ "building":"yes","colour":"#C49C94","name":"控制室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45275444959,38.87135273325],[115.45275444959,38.87128731687],[115.45279448072,38.87128731687],[115.45279448072,38.87135273325],[115.45275444959,38.87135273325]]]}},{ "type":"Feature","id":"way/-39914","properties":{ "building":"yes","colour":"#BCBD22","name":"阅片","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45279908312,38.87135256667],[115.45279894324,38.87128689494],[115.45292802758,38.87128672827],[115.45292816746,38.8713524],[115.45279908312,38.87135256667]]]}},{ "type":"Feature","id":"way/-39916","properties":{ "building":"yes","colour":"#D3D3D3","name":"主任办公","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4529322348,38.8713524],[115.4529322348,38.87132123348],[115.45299538551,38.87132123348],[115.45299538551,38.8713524],[115.4529322348,38.8713524]]]}},{ "type":"Feature","id":"way/-39918","properties":{ "building":"yes","colour":"#FFBB78","name":"值班","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4529322348,38.87131756683],[115.4529322348,38.87128706695],[115.45299495737,38.87128706695],[115.45299495737,38.87131756683],[115.4529322348,38.87131756683]]]}},{ "type":"Feature","id":"way/-39920","properties":{ "building":"yes","colour":"#EE8A31","name":"透视","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45304397945,38.87135323333],[115.45304397945,38.87128723362],[115.45310777238,38.87128723362],[115.45310777238,38.87135323333],[115.45304397945,38.87135323333]]]}},{ "type":"Feature","id":"way/-39922","properties":{ "building":"yes","colour":"#FDD1C5","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45311055529,38.87135323333],[115.45311055529,38.87128706695],[115.4531514427,38.87128706695],[115.4531514427,38.87135323333],[115.45311055529,38.87135323333]]]}},{ "type":"Feature","id":"way/-39924","properties":{ "building":"yes","colour":"#EDE39A","name":"照相2","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45315593818,38.87135306667],[115.45315632332,38.87130609084],[115.45321994517,38.87130579099],[115.45321994517,38.87134223339],[115.45316963867,38.87134206672],[115.45316963867,38.87135306667],[115.45315593818,38.87135306667]]]}},{ "type":"Feature","id":"way/-39926","properties":{ "building":"yes","colour":"#CA7C56","name":"暗室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45322315623,38.87135190001],[115.45322315623,38.87128706695],[115.45326233108,38.87128706695],[115.45326233108,38.87135190001],[115.45322315623,38.87135190001]]]}},{ "type":"Feature","id":"way/-39928","properties":{ "building":"yes","colour":"#C49C94","name":"照相1","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45326532806,38.87135190001],[115.45326532806,38.87130567454],[115.45332957063,38.87130552462],[115.4533297632,38.87135190001],[115.45326532806,38.87135190001]]]}},{ "type":"Feature","id":"way/-39930","properties":{ "building":"yes","colour":"#D3D3D3","name":"牙科照相","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45333361646,38.87135173334],[115.45333361646,38.87128706695],[115.45341924455,38.87128706695],[115.45341924455,38.87132256681],[115.45338697346,38.87132260847],[115.45338691995,38.87135173334],[115.45333361646,38.87135173334]]]}},{ "type":"Feature","id":"way/-39932","properties":{ "building":"yes","colour":"#FFBB78","image":"images\\lift.png","name":"电梯","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45339141553,38.87135173326],[115.45339141553,38.87132573338],[115.45341849541,38.87132573338],[115.45341849541,38.87135173326],[115.45339141553,38.87135173326]]]}},{ "type":"Feature","id":"way/-39934","properties":{ "building":"yes","colour":"#EE8A31","image":"images\\stair.png","name":"楼梯 上","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45342545259,38.87130240022],[115.45342520674,38.87126986128],[115.45346159868,38.87126969461],[115.45346184452,38.87130223356],[115.45342545259,38.87130240022]]]}},{ "type":"Feature","id":"way/-39936","properties":{ "building":"yes","colour":"#EE8A31","name":"消防控制中心","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45342288374,38.87135190001],[115.45342288374,38.87130556688],[115.45348967365,38.87130556688],[115.45348967365,38.87135190001],[115.45342288374,38.87135190001]]]}},{ "type":"Feature","id":"way/-39938","properties":{ "building":"yes","colour":"#FDD1C5","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4526209767,38.8712819003],[115.4526209767,38.87125306707],[115.45270425001,38.87125306707],[115.45270425001,38.8712819003],[115.4526209767,38.8712819003]]]}},{ "type":"Feature","id":"way/-39940","properties":{ "building":"yes","colour":"#D3D3D3","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45324606174,38.87128223364],[115.45324606174,38.87127123368],[115.45332869285,38.87127123368],[115.45332869285,38.87128223364],[115.45324606174,38.87128223364]]]}},{ "type":"Feature","id":"way/-39942","properties":{ "building":"yes","colour":"#FFBB78","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45333490088,38.87128206697],[115.45333490088,38.87127140034],[115.4534181742,38.87127140034],[115.4534181742,38.87128206697],[115.45333490088,38.87128206697]]]}},{ "type":"Feature","id":"way/-39944","properties":{ "building":"yes","colour":"#C49C94","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45284275323,38.87151406589],[115.45284275323,38.87149539935],[115.45299260239,38.87149539935],[115.45299260239,38.87151406589],[115.45284275323,38.87151406589]]]}},{ "type":"Feature","id":"way/-39946","properties":{ "building":"yes","colour":"#C49C94","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45314844551,38.87151373256],[115.45304440738,38.87151373256],[115.45304440738,38.87149539935],[115.45314844551,38.87149539935],[115.45314844551,38.87151373256]]]}},{ "type":"Feature","id":"way/-39948","properties":{ "building":"yes","colour":"#EDE39A","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.4526179795,38.87124973392],[115.4526179353,38.87123572668],[115.45279218846,38.87123539334],[115.45279223266,38.87124940059],[115.4526179795,38.87124973392]]]}},{ "type":"Feature","id":"way/-39950","properties":{ "building":"yes","colour":"#CFF1D1","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45270917363,38.8712819003],[115.45270917363,38.87125240041],[115.45279522986,38.87125306707],[115.45279522986,38.87123556713],[115.45282091828,38.87123540046],[115.45282806306,38.87123775448],[115.45283520766,38.87124012947],[115.45284184383,38.87124225446],[115.45284722235,38.87124379613],[115.45285083476,38.87124494198],[115.45285468802,38.87124594197],[115.45285912998,38.87124710864],[115.45286383952,38.87124823363],[115.45286913776,38.87124948363],[115.45287406138,38.87125060862],[115.45287946665,38.87125185862],[115.45288567469,38.87125306695],[115.45289172217,38.87125410861],[115.45289702041,38.87125502528],[115.45290322844,38.87125610861],[115.45290997166,38.87125727527],[115.45291644728,38.87125831693],[115.45292329753,38.87125915026],[115.45292998722,38.87125994193],[115.45293817541,38.87126069192],[115.4529457749,38.87126156692],[115.45295567565,38.87126198359],[115.45296273996,38.87126269192],[115.45297264071,38.87126285858],[115.45297253368,38.87128223351],[115.45270917363,38.8712819003]]]}},{ "type":"Feature","id":"way/-39952","properties":{ "building":"yes","colour":"#BCBD22","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45306720618,38.87128198355],[115.45306699211,38.87126356695],[115.45307860547,38.87126331691],[115.45308989768,38.87126244192],[115.45310108284,38.87126140025],[115.45311291022,38.87126010859],[115.45312077731,38.87125894193],[115.45312917956,38.87125765027],[115.45313602981,38.87125644194],[115.45314261247,38.87125510861],[115.45314924864,38.87125385861],[115.45315524261,38.87125256695],[115.45316080844,38.87125144195],[115.45316616019,38.87125019196],[115.45317054863,38.8712490253],[115.45317536521,38.8712477753],[115.45318034234,38.8712465253],[115.45318430264,38.87124540031],[115.45318879812,38.87124410864],[115.45319324007,38.87124285865],[115.45319752148,38.87124165032],[115.45320121419,38.87124048366],[115.45320474635,38.87123931699],[115.45320870665,38.871237942],[115.45321186418,38.87123677533],[115.45321566393,38.87123548367],[115.45321775111,38.87123498367],[115.45332890692,38.87123506713],[115.45332890692,38.87126673369],[115.45323878335,38.87126673369],[115.45323899742,38.87128256697],[115.45306720618,38.87128198355]]]}},{ "type":"Feature","id":"way/-39954","properties":{ "building":"yes","colour":"#C49C94","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45297772483,38.87128215022],[115.4529779389,38.87126023363],[115.45296370323,38.87125973363],[115.45295645168,38.87125894191],[115.45294620307,38.87125844191],[115.45293913875,38.87125752525],[115.45293057594,38.87125665025],[115.45292402004,38.87125573359],[115.45291668814,38.87125477526],[115.45290940975,38.87125367109],[115.45290376365,38.8712526086],[115.45289530785,38.87125081696],[115.45288931388,38.87124948363],[115.45288096514,38.8712476503],[115.45287288399,38.87124585864],[115.45286351842,38.87124365031],[115.45285870184,38.87124252532],[115.45285442043,38.87124140032],[115.45285019255,38.87124027532],[115.45284591114,38.87123927533],[115.45284133542,38.87123781698],[115.45283788354,38.87123671281],[115.45283397675,38.87123556698],[115.45283028404,38.87123442115],[115.45282691244,38.87123317116],[115.45282292538,38.8712321295],[115.45284360983,38.87120073381],[115.45284435913,38.87119960877],[115.45284746315,38.87120085877],[115.45285013903,38.87120198377],[115.45285332335,38.87120319208],[115.45285656116,38.87120437957],[115.4528595849,38.87120540041],[115.45286365224,38.8712066504],[115.45286723791,38.87120773373],[115.4528710109,38.87120887956],[115.45287537258,38.87121015039],[115.45287989482,38.87121133789],[115.4528838016,38.87121254622],[115.45288856466,38.87121373372],[115.45289297986,38.87121477538],[115.45289841189,38.87121610871],[115.45290288061,38.87121727537],[115.45290791126,38.87121856704],[115.4529144404,38.87121977537],[115.45292035409,38.87122090036],[115.45292707054,38.87122208786],[115.4529344292,38.87122315036],[115.4529420287,38.87122417119],[115.45294855784,38.87122485868],[115.45295436449,38.87122540035],[115.45296223157,38.87122637951],[115.45296942969,38.87122710868],[115.45297223936,38.87122760868],[115.45297828684,38.87122752534],[115.45297772483,38.87119706716],[115.45306260356,38.87119723391],[115.45306238949,38.87122806715],[115.45307148764,38.8712276087],[115.45308347557,38.87122652537],[115.45309375094,38.8712251087],[115.45310204616,38.87122377537],[115.45310889641,38.87122223371],[115.45311553258,38.87122094205],[115.45312152655,38.87121952539],[115.45312789514,38.87121827539],[115.45313297931,38.87121731706],[115.45313870569,38.8712159004],[115.45314213081,38.87121485873],[115.45314732201,38.8712134004],[115.45315326246,38.87121194207],[115.45316209286,38.87120952541],[115.45316530391,38.87120844208],[115.45317060215,38.87120719209],[115.45317739888,38.87120498376],[115.45318408857,38.87120215043],[115.45318762073,38.87120090044],[115.45319077827,38.87119985877],[115.45319398932,38.87119823378],[115.4531957554,38.87119798378],[115.45321780447,38.87123190047],[115.45321392464,38.87123304616],[115.4532095362,38.87123442115],[115.45320595052,38.87123562948],[115.45320260567,38.87123687948],[115.45319877917,38.87123792114],[115.45319468508,38.87123925447],[115.45319056422,38.87124050447],[115.4531862293,38.8712417753],[115.45318229576,38.8712427128],[115.4531779876,38.87124410862],[115.45317341185,38.87124533779],[115.45316819389,38.87124635862],[115.45316252102,38.87124765028],[115.45315743686,38.87124871278],[115.45315211186,38.87124990027],[115.45314579679,38.87125115027],[115.45313932116,38.8712522961],[115.45313313989,38.87125344193],[115.45312548688,38.87125467109],[115.45311772683,38.87125587942],[115.45310798664,38.87125717108],[115.45309541001,38.87125852524],[115.45308401077,38.87125952524],[115.45307132711,38.8712604419],[115.4530624432,38.87126058774],[115.4530623896,38.87128223355],[115.45297772483,38.87128215022]]]}},{ "type":"Feature","id":"way/-40646","properties":{ "building":"yes","colour":"#CFF1D1","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45315604703,38.87130315806],[115.45315604703,38.87128741581],[115.45321978742,38.87128741581],[115.45321978742,38.87130315806],[115.45315604703,38.87130315806]]]}},{ "type":"Feature","id":"way/-40817","properties":{ "building":"yes","colour":"#BCBD22","name":"操作室","height":5,"levels":5},"geometry":{ "type":"Polygon","coordinates":[[[115.45326523374,38.87130300813],[115.45326523374,38.87128741581],[115.45333012955,38.87128741581],[115.45333012955,38.87130300813],[115.45326523374,38.87130300813]]]}}]}
        ];
    
                  let features = [];
    
                  buildings.forEach(function(b){ 
                      features = features.concat(b.features);
                  });
    
    
                  let threeLayer = new ThreeLayer('t',{ 
                      forceRenderOnMoving: true,
                      forceRenderOnRotating: true
                  });
    
                  threeLayer.prepareToDraw = function(gl,scene,camera){ 
    
                      let me = this;
                      let light = new THREE.DirectionalLight(0xffffff);
                      light.position.set(0,-10,10).normalize();
                      scene.add(light);
    
                      features.forEach(function(g){ 
                          let heightPerLevel = 1;
                          let levels = g.properties.levels || 1;
                          let color = 0x2685a7;
    
                          let m = new THREE.MeshPhongMaterial({ color: color,opacity: 0.7});
    
                          let 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);
      }