ht-map
v1.0.1
Published
基于maptalks 二次封装的js地图模块，提供要素编辑、地图定位、轨迹回放等开箱即用的功能，实现地图应用的快速开发
Downloads
1
Readme
EasyMap地图服务引擎
使用方法
Symbol配置说明
- opacity 几何的整体不透明度。
- shadowBlur 几何周围阴影的水平
- shadowColor 几何图形周围阴影的颜色，一种CSS样式颜色
- shadowOffsetX 指定阴影将在水平距离中偏移的距离
- shadowOffsetY 指定阴影将在垂直距离上偏移的距离
Marker | Text | Polygons and Lines ---|:--:|:--:|---: markerOpacity 标记通用属性 标记的整体不透明度 | textPlacement 该标签应如何放置(point vertex line vertex-first vertex-last) | lineColor 线的颜色 markerWidth 标记的宽度 | textFaceName 字体 | lineWidth 线的宽度 markerHeight 标记的高度 | textFont 与CSS font属性相同,定义字体系列，粗体，大小和文本样式，如果设置，它将覆盖textFaceName | lineDasharray 一对长度值[a，b]，其中（a）是划线长度，（b）是间隙长度 markerDx X轴偏移量 | textWeight 与CSS font-weight相同，指定字体粗细 | lineOpacity 线的不透明度 markerDy Y轴偏移量 | textStyle 与CSS字体样式相同，指定字体样式 | lineJoin 连接线样式(miter miter-revert round bevel) markerHorizontalAlignment 标记从其中心点开始的水平对齐方式(left middle right) | textSize 文字大小 | lineCap 线尾的显示(butt round square) markerVerticalAlignment 标记从其中心点开始的垂直对齐方式(top middle bottom) | textFill 指定文本的颜色 | linePatternFile 图像文件要重复并沿一条线弯曲 markerPlacement 将标记放置在点上，多边形的中心，或者放置在一条线上(point vertex line vertex-first vertex-last) | textOpacity 文本的不透明度 | lineDx x偏移 markerRotation 标记通用属性END 标记围绕标记放置点旋转的程度,沿逆时针方向 | textHaloFill 文本周围的光晕颜色 | lineDy y偏移 markerFile 图像标记 文件url | textHaloRadius 指定光晕的半径 | polygonFill 多边形颜色 markerType 矢量标记 矢量标记的形状(ellipse cross x diamond bar square triangle pin pie) | textHaloOpacity 指定文本光晕的不透明度 | polygonOpacity 多边形的不透明度 markerFill 标记区域的颜色 | textWrapWidth 换行之前，文本块的长度（以像素为单位）。如果设置为零，则文本不会自动换行 | polygonPatternFile 用作重复图案填充在多边形内的图像 markerFillPatternFile 用作标记内重复图案的图像 | textWrapCharacter 使用此字符来包装长文本，例如 '\n' markerFillOpacity 标记的填充不透明度 | textLineSpacing 行之间的垂直间距调整 markerLineColor 标记周围的轮廓颜色 | textHorizontalAlignment 文本从其中心点开始的水平对齐方式(left middle right) markerLineWidth 标记周围的轮廓宽度 | textVerticalAlignment 文本从其中心点的垂直对齐方式(top middle bottom) markerLineOpacity 标记轮廓的不透明度 | textAlign 定义文本的对齐方式(left right center) markerLineDasharray 一对长度值[a，b]，其中（a）是划线长度，（b）是间隙长度 | textRotation markerLinePatternFile 要重复的图像文件，并沿标记线弯曲 | textDx x偏移 markerPath 定义标记形状的SVG路径 | textDy y偏移 markerPathWidth 生成的SVG元素的width属性 | markerPathHeight 矢量标记属性END 生成的SVG元素的height属性
引入JS文件
<link rel="stylesheet" href="emap.css" type="text/css">
<script type="text/javascript" src="emap.js"></script>地图渲染
// 默认地图
const map = new emap.EasyMap("map");
// 自定义地图
const map = new emap.EasyMap("map", {
defaultLayer: new emap.layers.EasyTileLayer('base', {
urlTemplate: 'http://webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
subdomains: ['01', '02', '03', '04']
}),
center: [114.515013, 38.041251],
extent: [113.515013, 39.041251, 115.515013, 37.041251],
zoomControl: false,
scaleControl: false,
overviewControl: false,
zoom: 8
});添加地图控件
// 初始化地图
const map = new emap.EasyMap("map");
// 单独添加控件
const control = new emap.controls.PositionControl(
{
position: 'bottom-right',
copiable: true,
styles: {
backgroundColor: 'black',
fontColor: 'white',
fontSize: '16px'
}
}
).addTo(map)
// 通过组合控件添加控件
const control = new emap.controls.EasyControl(
[
// 控件信息及配置项，每个对象表示一个控件
{
id: 'zoom',
label: '缩放控件',
type: 'Zoom',
option: {
position: 'top-right'
}
},
{
id: 'position',
label: '鼠标位置控件',
type: 'PositionControl',
option: {
position: 'bottom-right'
}
}
// 更多控件
],
{
// 控件管理ToolBar的配置，该控件可以控制上面控件的显示
position: 'top-left',
menuName: '控件管理'
}
).addTo(map)添加图层
// 初始化地图
const map = new emap.EasyMap("map")
// 创建图层
const layer = new emap.layers.EasyVectorLayer('layer')
// 添加到地图
map.addLayer(layer);添加点
// 初始化地图
const map = new emap.EasyMap("map")
// 创建点
const marker = new emap.Geom().createPointFeature(
// 点坐标
[114.515013, 38.041251],
// 点配置
{
visible: true,
editable: true,
cursor: 'pointer',
symbol: [{
textName: '华通地图引擎',
textFill: '#f00',
textSize: 30
}]
}
)
// 添加到地图
marker.addTo(map)添加线
// 初始化地图
const map = new emap.EasyMap("map")
// 创建线
const path = [
[116.368904, 39.913423],
[116.382122, 39.901176],
[116.387271, 39.912501],
[116.398258, 39.904600]
];
const lineString = new emap.Geom().createLineStringFeature(
// 组成线的各个点的坐标
[path[0], path[1], path[2], path[3]],
// 线配置
{
arrowStyle : 'classic',
arrowPlacement : 'vertex-last',
smoothness: 0,
symbol: {
lineColor: '#FF0000',
lineWidth: 5
}
}
)
// 添加到地图
lineString.addTo(map)添加多边形
// 初始化地图
const map = new emap.EasyMap("map")
// 创建多边形
const path = [
[116.403322, 39.920255],
[116.410703, 39.897555],
[116.402292, 39.892353],
[116.389846, 39.891365]
];
const options = {
symbol: {
lineColor: '#34495e', // 边框线的颜色
lineWidth: 2, // 线的宽度
polygonFill: 'rgb(135,196,240)', // 填充色
polygonOpacity: 0.6, // 透明度
}
};
const polygon = new emap.Geom().createPolygonFeature(path, options);
// 添加到地图
polygon.addTo(map);添加弹窗
// 初始化地图
const map = new emap.EasyMap("map")
// 创建弹窗
const infoWindow = new emap.InfoWindow({
width: 200,
single: true,
autoPan: false,
content: '<div>我是信息窗体的内容,我在地图上</div>',
autoOpenOn: '' // 添加该选项可以去除自带的click打开窗体功能,建议打开窗体操作手动设置,否则事件不受控,会出现无法阻止冒泡的问题
})
// 添加到地图
infoWindow.addTo(map)
// 绑定事件
map.on('click', e => {
e.domEvent.stopPropagation()
infoWindow.show([e.coordinate.x, e.coordinate.y])
})添加热力图层
// 初始化地图
const map = new emap.EasyMap("map")
// 获取热力数据
const data = []
for (let i = 1; i < 10000; i++) {
const point = []
const x = parseFloat('114.' + randomNum(435773, 578595))
const y = parseFloat('38.' + randomNum(913, 11111358))
point[0] = x
point[1] = y
point[2] = randomNum(1, 10000)
data.push(point)
}
// 创建热力图层，自动添加到地图
const heatlayer = map.createHeatMap('heat', data, {
heatValueScale: 0.7,
forceRenderOnRotating: true,
forceRenderOnMoving: true
})
// 生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}添加聚合点
// 初始化地图
const map = new emap.EasyMap("map")
// 获取点数据，参见聚合要素图层demo
const markers = Foo()
// 创建聚合要素图层
const clusterLayer = map.createClusterLayer('cluster', markers, {
noClusterWithOneMarker: false,
maxClusterZoom: 18,
symbol: {
markerType: 'ellipse',
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
});
// 添加到地图
map.addLayer(clusterLayer);添加轨迹
// 初始化地图
const map = new emap.EasyMap("map")
// 轨迹配置
let routers = [
{
"path": [
// [x, y, time]
[114, 37, 0],
[118, 39, 3400],
[117, 37, 5000],
[110, 39, 8000],
],
// 轨迹回放的图标
markerSymbol: {
markerFile: './images/car.png',
markerDy: 16
},
// 全览轨迹线
lineOptions: {
// arrowStyle: 'classic',//增加箭头
// arrowPlacement: 'vertex-last',
},
lineSymbol: {
lineColor: '#f00',
lineWidth: 6,
lineDasharray: [10, 5],//设置为虚线
lineJoin: 'bevel',
},
// 走过的轨迹线
trailLineOptions:{
// arrowStyle: 'classic',
// arrowPlacement: 'vertex-last',
},
trailLineSymbol: {
lineColor: '#0ff',
lineWidth: 5,
lineJoin: 'bevel'
}
}
]
// 创建轨迹
let track = new emap.layers.EasyRouteplayer(routers, map, true, {
rotating: true,
totalTime:0 //总时间为0将按着routers中设置的时间
})
// 开始播放
track.play();
// 暂停
track.pause();
// 取消
track.cancel();
// 完成
track.finish();绘制工具
// 初始化地图
const map = new emap.EasyMap("map")
// 获取默认图层
const layer = map.getLayer('default_vector')
// 创建绘制工具
const drawTool = new emap.EasyDrawTool({ mode: 'Point' }).addTo(map).disable()
// 绑定绘制完成事件
const handler = drawTool.on('drawend', function(param) {
currentGeometry = param.geometry
layer.addGeometry(currentGeometry)
});
// 开始绘制
drawTool.drawPointFeature()