home > GIS > maptalks >

maptalks地图数据展示开发回顾—vue地图开发maptalks功能分装

Author：[email protected] Date：2016-02-15 Hits：

之前地图基于百度、高度、Google开发等，虽然相关api差不多，但是还是得来回看。maptalks是一个不错的懒人工具。这里示例一个maptalks分装的常用操作类

之前地图基于百度、高度、Google开发等，虽然相关api差不多，但是还是得来回看。maptalks是一个不错的懒人工具

用起来，看下配置文档即可，并无太大差异

地图常用操作就是添加地图图层

new maptalks.TileLayer('图层名称',瓦片参数).addTo(地图实例)

map的基本方法 http://maptalks.org/maptalks.js/api/0.x/Map.html#isMoving

map的几个典型案例：

地图瓦片图层设置 http://maptalks.org/examples/en/tilelayer-projection/multi-tilelayer/#tilelayer-projection_multi-tilelayer
基础图层添加：http://maptalks.org/examples/en/layer/vectorlayer-filter/#layer_vectorlayer-filter
line-layer http://maptalks.org/examples/en/style/line-marker/#style_line-marker
添加echart 图表 https://github.com/maptalks/maptalks.e3

这些觉得没有啥好讲的，看文档，就能用。也么有啥bug，再次感谢下作者

下面是maptalks封装好基本工具类

import * as maptalks from 'maptalks'
import {HeatLayer} from 'maptalks.heatmap'
import ToolTip from './ToolTip'
import Search from './Search'

class MapTools {
  /**
   * 地图
   */
  static mapInstance
  static createdMap = false

  /**
   * 补全地址
   * @param url {string}
   */
  static mapHostUrl(url) {
    if (url.indexOf('http') < 0) {
      if (url[0] !== '/') {
        url = '/' + url
      }
      return window.location.origin + url
    }
    return url
  }

  /**
   * @param dom {dom} dom元素
   * @param map {object} 地图参数
   * @param city {object} 地图中心
   */
  constructor(dom, map, city) {
    if (MapTools.createdMap) {
      MapTools.mapInstance.remove()
    } else {

    }
    let {center, extent, enableExtent} = city
    //设置地图中心点
    map.center = center
    //设置地图缩放区域
    map.maxExtent = enableExtent && new maptalks.Extent(extent) || undefined
    //创建地图实例
    MapTools.mapInstance = new maptalks.Map(dom, map)
    MapTools.createdMap = true
  }

  /**setBaseLayer - tileLayers
   * 设置地图底图 瓦片地图图层
   * @param tileLayer {object} 地图
   */
  setBaseLayer(tileLayer) {
    //新建地图图层
    this.baseLayer = new maptalks.TileLayer('base', tileLayer)
    //设置地图基础地图
    MapTools.mapInstance.setBaseLayer(this.baseLayer)
  }

  /**
   * 添加热点地图
   * @param pointArr {array} 热点坐标集合
   * @param options {object} 热点点样式 配置参数
   */
  setHeatLayer(pointArr, options) {
    //新建热点地图图层
    this.heatLayer = new HeatLayer('heat',
      pointArr, options)
    //添加到地图实例
      .addTo(MapTools.mapInstance)
  }

  /**
   * 添加地图线条 如飞行图
   * @param pointArr {array} 热点坐标集合
   * @param symbol {object} symbol 配置参数
   */
  setLineLayer(pointArr, symbol) {
    //新建地图图层
    this.lineLayer = new maptalks.VectorLayer('lineLayer')
    //添加到地图实例
      .addTo(MapTools.mapInstance)
    symbol.markerFile = MapTools.mapHostUrl(symbol.markerFile)
    let line = new maptalks.LineString(
      pointArr,
      {
        symbol: symbol
      }
    ).addTo(this.lineLayer)
  }

  /**
   * 添加区域地图 Set a boundary mask to TileLayer
   * @param pointArr {array} 区域边界 坐标集合
   * @param symbol {object} symbol 配置参数
   * @param tileLayer {object} 地图
   */
  setMaskLayer(pointArr, symbol, tileLayer) {
    //设置mask区域
    this.mapMask = new maptalks.Polygon(pointArr, {
      symbol: symbol
    })
    //复制表框 制作内外表框
    this.mapMaskOutline = this.mapMask.copy()
    let maskedLayer = new maptalks.TileLayer('masked', tileLayer)
    // 区域边界添加到图层 set boundary as the mask to the tilelayer
      .setMask(this.mapMask)
      .addTo(MapTools.mapInstance)
  }

  /**
   *  区域地图 区域 标注//District's name
   * @param symbol {object} symbol 配置参数
   */
  setMaskLayerSymbol(symbol) {
    let title = new maptalks.Marker(this.mapMask.getCenter(), {
      'symbol': symbol
    })
    new maptalks.VectorLayer('maskLayerSymbol', [this.mapMaskOutline, title]).addTo(MapTools.mapInstance)
  }

  /**
   * 添加标注点 杨忠智老师代码
   * @param GeoData {object} 区域边界 坐标集合
   * @param symbol {object} symbol 配置参数
   * @param tooltip {object} 鼠标悬浮标志点 提示效果
   */
  setMarkPointLayer(GeoData, symbol, tooltip) {
    // var marker = maptalks.GeoJSON.toGeometry(GeoData).addTo(map.getLayer('base'));
    this.markPointLayer = new maptalks.VectorLayer('markPointLayer')
    //GeoJSON转化为Geometry
    let geometries = maptalks.GeoJSON.toGeometry(pointArr)
    console.log('geometries____')
    console.log(geometries)
    let type = tooltip.show
    if (symbol.icon) {
      symbol.markerFile = MapTools.mapHostUrl(symbol.icon)
    }
    this.markPointLayer.addGeometry(geometries)
    this.markPointLayer.addTo(MapTools.mapInstance)
  }
}

export default MapTools

map在vue集合

    @import "./maptalks.css";  import MapTools from './tools/MapTools'
  import initOptionsData from './data/initOptionsData'
  let map
  export default {
    props: ['options'],
    watch: {
      'options.show': function (val, newVal) {
        this.setMap()
      },
    },
    methods: {
      setMap() {
        let options = this.options
        //创建地图实例
        let mapTools = new MapTools(this.$refs.mapContainer,options.map,options.city)
        //设置地图底图 瓦片地图图层
        mapTools.setBaseLayer(options.baseLayer)
        //热点地图
        if (options.heatLayer.show && options.heatLayer.dataUrl) {
          this.$http.get(options.heatLayer.dataUrl).then((res) => {
            mapTools.setHeatLayer(res,options.heatLayer.options)
          })
        }
        //添加地图线条 如飞行图
        if (options.lineLayer.show && options.lineLayer.dataUrl) {
          this.$http.get(options.lineLayer.dataUrl).then((res) => {
            mapTools.setLineLayer(res,options.lineLayer.symbol)
          })
        }
        //添加区域地图
        if (options.areaMapLayer && options.areaMapLayer.show) {
          this.$http.get(options.areaMapLayer.dataUrl).then((res) => {
            mapTools.setMaskLayer(res,options.areaMapLayer.symbol,
              options.areaMapLayer.maskLayer)
            //区域地图 区域 标注
            if (options.areaMapLayer.title && options.areaMapLayer.title.show) {
              mapTools.setMaskLayerSymbol(options.areaMapLayer.title.symbol)
            }

          })
        }
        //地图 添加标注点 杨忠智老师代码
        if (options.markPointLayer.show&&options.markPointLayer.dataUrl) {
          this.$http.get(options.markPointLayer.dataUrl).then(res => {
            mapTools.setMarkPointLayer(res,
              options.markPointLayer.symbol,
              options.markPointLayer.tooltip)
          })
        }

      },

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

maptalks基础数据

export default {
  show: 1,
  //地图初始数据
  map: {
    center: [116,23],
    zoom: 11,
    minZoom: 9,
    maxZoom: 18,
    zoomable: false,
    dragPan: false,
    dragRotate: false,
    dragPitch: false,
    attribution: false,
    scaleControl: false,
    zoomControl: false
  },
  //地区区域信息
  city: {
    center: [114,22],
    extent: [113,24,115,22],
    enableExtent: true,
  },

  //基础地图 瓦片地图样式
  baseLayer: {
    opacity: 1,
    urlTemplate: 'http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil',
    subdomains: [1, 2, 3, 4]
  },
  //地图连线 控制
  lineLayer: {
    show: true,
    dataUrl: '/maps/static/lineLayerPoint/data.json',
    symbol: {
      'lineColor': '#1bbc9b',
      'lineWidth': 3,
      'lineDasharray': [10, 10],
      'markerFile': '/maps/static/media/plane.png',
      'markerPlacement': 'vertex', //vertex, point, vertex-first, vertex-last, center
      'markerVerticalAlignment': 'middle',
      'markerWidth': 30,
      'markerHeight': 30
    }
  },
  //热点地图控制
  heatLayer: {
    show: true,
    dataUrl: '/heatLayerPointData.json',
    options: {
      radius: 25,
      blur: 15,
      minOpacity: .05,
      heatValueScale: 1,
      gradient: {
        0.4: 'blue',
        0.6: 'cyan',
        0.7: 'lime',
        0.8: 'yellow',
        1.0: 'red'
      }
    }
  },
  //标记地图控制
  markPointLayer: {
    show: true,
    dataUrl: '',
    //地图后面添加的markerPoint 提示控制
    tooltip: {
      show: 'hover',
      interval: 1
    },
    symbol: {
      icon: 'default-balloon-red.svg',
      markerOpacity: 1,
      markerFill: '#f00',
      markerFillOpacity: 1,
      markerFillPatternFile: '',
      markerLineColor: 'transparent',
      markerLineWidth: 1,
      markerLineOpacity: 1,
      markerLineDasharray: [],
      markerLinePatternFile: '',
      markerWidth: 20,
      markerHeight: 20,
      markerRotation: 0,
      markerDx: 0,
      markerDy: 0,
      markerHorizontalAlignment: 'middle',
      markerVerticalAlignment: 'top'
    }
  },
  //区域地图控制
  areaMapLayer: {
    show: true,
    dataUrl: '/shenzhen-luohu.json',
    maskLayer: {
      'urlTemplate': 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
      'subdomains': ['a', 'b', 'c', 'd']
    },
    symbol: [
      {
        'lineColor': '#ddd',
        'lineWidth': 8,
        'polygonFillOpacity': 0
      },
      {
        'lineColor': '#333',
        'lineWidth': 6,
        'polygonFillOpacity': 0
      }
    ],
    title: {
      show: true,
      symbol: {
        'textName': '深圳',
        'textFaceName': 'sans-serif',
        'textSize': 32,
        'textFill': '#1bbc9b',
        'textHaloFill': '#ffffff',
        'textHaloRadius': 5,
        'textDx': -30
      }
    }
  },
  //是否显示搜索
  searchControl: false,

}

转载本站文章《maptalks地图数据展示开发回顾—vue地图开发maptalks功能分装》,
请注明出处：https://www.zhoulujun.cn/html/GIS/maptalks/2016_0215_2667.html

相关热词搜索： maptalks 地图开发数据展示自定义地图 vue

上一篇：监听echarts地图缩放事件,SVG地图上的标注跟随缩放-散点地图

下一篇：maptalks点线面图形样式设置经验总结——symbol属性与方法

延伸阅读：