maptalks地图数据展示开发回顾—vue地图开发maptalks功能分装
Author：zhoulujun@live.cn Date：
之前地图基于百度、高度、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 MapToolsmap在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