maptalks初学

npm安装

npm install maptalks --save

 使用

import * as maptalks from 'maptalks'

地图加载

this.map = new maptalks.Map(container, {
      center: [lon,lat],
      zoom:12,
      // centerCross : true,
      spatialReference:{
        projection:'EPSG:4326'
      },
      attribution: false
    })

加载天地图

addTDLayer(element){
    const baseLayer = new maptalks.TileLayer(element.id, {
      tileSystem : [1, -1, -180, 90],
      urlTemplate: "http://t{s}.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=xxx",
      subdomains: [0, 1, 2, 3, 4, 5]
    })
    return baseLayer
  }

测距测面

// 地图--测量距离
  measureLine(){
    const distanceTool = new maptalks.DistanceTool({
      'symbol': {
        'lineColor' : 'rgba(0, 124, 247, 0.8)',
        'lineWidth' : 3
      },
      'vertexSymbol' : {
        'markerType'        : 'ellipse',
        'markerFill'        : '#fff',
        'markerLineColor'   : 'rgba(0, 124, 247, 1)',
        'markerLineWidth'   : 3,
        'markerWidth'       : 10,
        'markerHeight'      : 10
      },

      'labelOptions' : {
        'textSymbol': {
          'textFaceName': 'monospace',
          'textFill' : '#fff',
          'textLineSpacing': 1,
          'textHorizontalAlignment': 'right',
          'textDx': 15,
          'markerLineColor': '#b4b3b3',
          'markerFill' : '#000'
        },
        'boxStyle' : {
          'padding' : [6, 2],
          'symbol' : {
            'markerType' : 'square',
            'markerFill' : '#000',
            'markerFillOpacity' : 0.9,
            'markerLineColor' : '#b4b3b3'
          }
        }
      },
      'clearButtonSymbol' :[{
        'markerType': 'square',
        'markerFill': '#000',
        'markerLineColor': '#b4b3b3',
        'markerLineWidth': 2,
        'markerWidth': 15,
        'markerHeight': 15,
        'markerDx': 20
      }, {
        'markerType': 'x',
        'markerWidth': 10,
        'markerHeight': 10,
        'markerLineColor' : '#fff',
        'markerDx': 20
      }],
      'language' : 'zh-CN',
      // 'language' : 'en-US',
      'once': true
    }).addTo(this.map)
    return distanceTool
  }
  // 地图--测量面积
  measureArea(){
    const areaTool = new maptalks.AreaTool({
      'symbol': {
        'lineColor' : 'rgba(0, 124, 247, 1)',
        'lineWidth' : 3,
        'polygonFill' : 'rgba(127, 127, 127, 1)',
        'polygonOpacity' : 0.5
      },
      'vertexSymbol' : {
        'markerType'        : 'ellipse',
        'markerFill'        : '#fff',
        'markerLineColor'   : 'rgba(0, 124, 247, 1)',
        'markerLineWidth'   : 3,
        'markerWidth'       : 10,
        'markerHeight'      : 10
      },
      'labelOptions' : {
        'textSymbol': {
          'textFaceName': 'monospace',
          'textFill' : '#fff',
          'textLineSpacing': 1,
          'textHorizontalAlignment': 'right',
          'textDx': 15
        },
        'boxStyle' : {
          'padding' : [6, 2],
          'symbol' : {
            'markerType' : 'square',
            'markerFill' : '#000',
            'markerFillOpacity' : 0.9,
            'markerLineColor' : '#b4b3b3'
          }
        }
      },
      'clearButtonSymbol' :[{
        'markerType': 'square',
        'markerFill': '#000',
        'markerLineColor': '#b4b3b3',
        'markerLineWidth': 2,
        'markerWidth': 15,
        'markerHeight': 15,
        'markerDx': 22
      }, {
        'markerType': 'x',
        'markerWidth': 10,
        'markerHeight': 10,
        'markerLineColor' : '#fff',
        'markerDx': 22
      }],
      language: 'zh-CN'
    }).addTo(this.map)
    return areaTool
  }

测距测面工具清除

clear(){
  if(this.distanceTool){
          this.distanceTool.clear()
        }
        if(this.areaTool){
          this.areaTool.clear()
        }
}

打印（地图屏幕截图）npm i html2canvas

import html2canvas from "html2canvas"

print(){// 打印
        const id = '#mapContainer'
        // 屏幕截图
    html2canvas(document.querySelector(id), {
      useCORS: true, // 【重要】开启跨域配置
      scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
      allowTaint: true, // 允许跨域图片
    }).then((canvas) => {
      const dataUri = canvas.toDataURL('image/jpeg', 1.0)
      var a = document.createElement('a') // 生成一个a元素
      var event = new MouseEvent('click') // 创建一个单击事件
      a.download = 'photo' + '.jpg' // 设置图片名称
      a.href = dataUri // 将生成的URL设置为a.href属性
      a.dispatchEvent(event) // 触发a的单击事
    })
},

聚合分析

import {ClusterLayer} from 'maptalks.markercluster'
// 聚合分析
  addClusterLayer(){
    var markers = []
     this.dataJson.features.forEach(item=>{
          const marker = new maptalks.Marker([item.geometry.x,item.geometry.y])
          markers.push(marker)
        })
    var clusterLayer = new ClusterLayer('cluster', markers, {
      noClusterWithOneMarker : false,
      maxClusterZoom : 11,
      //"count" is an internal variable: marker count in the cluster.
      symbol: {
        markerType: 'ellipse',
        markerFill: { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [6, '#1bbc9b'], [12, 'rgb(216, 115, 149)']] },
        markerFillOpacity : 0.7,
        markerLineOpacity : 1,
        markerLineWidth : 3,
        markerLineColor : '#fff',
        markerWidth: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },
        markerHeight: { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }
      },
      drawClusterText: true,
      geometryEvents: true,
      single: true
    })
    this.map.addLayer(clusterLayer)
    return clusterLayer
  }