• home > GIS > maptalks >

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

    Author:[email protected] Date:

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

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

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

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

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

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

    map的几个典型案例:

    这些觉得没有啥好讲的,看文档,就能用。也么有啥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/[email protected]&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