vue中使用maptalks地图，小白自学。

地图的使用

1创建地图

1.在template中添加地图

<div id="map" class:"map"></div>

2.安装maptalks

npm install maptalks

3.引入maptalks样式和组件

import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';

4.在methods中添加地图

initMap(){
    return new maptalks.Map('map',{
         // 默认中心点点位
        center: [118.13245430046891, 24.495713873147764],
        // 缩放层级
        zoom: this.zoom,
        // 倾斜度
        pitch:this.pitch,
        // 最小缩放层级
        minZoom: 1,
        // 最大缩放层级
        maxZoom: 18,
        // baseLayer 表示基础图层，它可以添加多个,逗号隔开
        baseLayer: new maptalks.TileLayer('base', {
          // 出现跨域问题，要设置这个，一定是undefined
          crossOrigin: undefined,
          // 电子地图图层
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c', 'd'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
    })
}

5.在生命周期mouthed中调用，this.mapEl方便以后使用地图、

        mounted() {
        this.$nextTick(()=>{
            this.mapEl=this.initMap()
            })
        },

6.修改css默认样式

    html {
        height: 100%;
        width: 100%;
    }
    body{
        height: 100%;
        width: 100%;
    }
    .map{
        height: 100%;
        width: 100%;
    }

2.几何图形多边形描绘地图边界

boundary(){
    const polygon=new maptalks.Polygon(bj,options)   //bj:边界的坐标   options:选项
let bj =require('./**.json')   //导入坐标数据
const options={
     symbol: {
                        // 线色
                        lineColor: 'blue',
                        // 线宽
                        lineWidth: 3,
                        // 填充色
                        polygonFill: 'rgb(135,196,240)',
                        // 不透明度
                        polygonOpacity: 0.2
                    }
}
//创建矢量图层，添加几何图形，到地图上
return new maptalks.VectorLayer('Vector').addGeometry(polygon).addTo(this.mapEl)   
}
​
//在地图中调用该方法
   mounted() {
        this.$nextTick(()=>{
            this.mapEl=this.initMap()
                this.boundary()
            }
        },

3.使用Marker，标记多个坐标点

1.创建mark图层

   mounted() {
        this.$nextTick(()=>{
            this.mapEl=this.initMap()
                this.boundary()
                 new maptalks.VectorLayer('hMark').addTo(this.mapEl)  //创建mark图层
            }
        },

2.设置marker

// 在data里保存选择的图层的名称
checkLayers: []
​
//handleChange方法
handleChange(){
    //导入坐标点的数据
const data=require('./**.json')
​
//清除图层
this.checkLayers.forEach(i=>{
    this.mapEl.getLayer().clear()
})
const hMarkLayer=this.mapEl.getLayer('hMark')  //获取图层
this.drawMark(data,hMarkLayer)  //坐标数据，和图层
this.checkLayers.push('hMark')  //将hMark添加到checkLayers中
}
​
​
//drawMark方法
drawMark(centerPointList, layer){ 
    const result=[]   //标记文本框
    centerPointList.forEach(i=>{
        const mark = new maptalks.Marker(i.center,{
                      symbol:  {
                            markerType: 'ellipse',
                            markerWidth: 8,
                            markerHeight: 8,
                            markerDx: 0,
                            markerDy: 0,
                            markerOpacity: 1,
                            markerFillOpacity: .7,
                            markerLineOpacity: .5,
                        },
        }).addTo(layer)
        //标记文本框
        mark.setInfoWindow({  
        // 几个属性
            title:'',
            content:'',
            width:'',
            minHeight
        })
        result.push(mark)
    })
    return result
}

4.地图的切换

1.添加几个按钮

    <div >
        <el-button @click="mapSwitch('base-map')" >地图</el-button>
        <el-button @click="mapSwitch('bd-map')">百度地图</el-button>
        <el-button @click="mapSwitch('td-map')">天地图</el-button>
    </div>

2.地图的创建

//baseLayer可以添加多个图层
​
//百度地图需要添加 
//spatialReference:{
// projection:'baidu'
// },
            baseLayer:new maptalks.GroupTileLayer('base',[
                        //百度地图
                      new maptalks.TileLayer('base-map',{
                          urlTemplate:"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
                          subdomains:[0,1,2]
                      }),
                      //maptalks地图
                        new maptalks.TileLayer('bd-map',{
                            urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                            subdomains: ['a','b','c','d'],
                            visible:false
                        }),
                        //天地图
                        new maptalks.TileLayer('td-map',{
                            urlTemplate:' http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=密钥',
                            subdomains:[0,1,2],
                            visible:false,
                        })
                    ]),
            

3.地图切换功能

mapSwitch(type){  //type:点击按钮传过来的值
    const baseL=this.mapEl.getBaseLayer()  //获取地图的图层
    baseL.layers.forEach((layer)=>{
        if(layer.getId() === type){
                        if (type === 'bd-map'){
                            this.mapEl.config('spatialReference',{
                                    projection:'baidu'   //使用百度地图，需要空间参考
                            })
                        }else {
                            this.mapEl.config('spatialReference',{
                                    projection:''       //天地图和maptalks地图，不需要
                            })
                        }
​
                        layer.show()  //图层展示
                    }else {
                        layer.hide() //图层隐藏
                    }
    })
}