ht-map

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()