ml-fe-openlayers-map v0.1.7

OpenlayersPointMap

使用openlayers加载地图、绘制点位、提示框、修改瓦片样式

OpenlayersTrajectoryMap

使用openlayers加载地图、绘制点位、线、提示框、修改瓦片样式

安装

使用npm：

$ npm i ml-fe-openlayers-map

How to Use

Import:

import { OpenlayersPointMap, OpenlayersTrajectoryMap } from 'ml-fe-openlayers-map';

Render in your component: OpenlayersPointMap

    render() {
        const baiduTileUrl = 'http://api0.map.bdimg.com/customimage/tile?x={x}&y={y}&z={z}&udt=1234&scale=1&ak={ak}'
        <OpenlayersPointMap 
            data={pointArr}
            track={track}
            mapType="baidu"
            mapTileUrl={baiduTileUrl}
            coordinateType="bd09"
            mapStyleTileFilter="invert(0.31) grayscale(0.95) sepia(0.7)  hue-rotate(179deg) contrast(1.2) saturate(2) brightness(1)"
            renderPoint={(feature, item, olStyle) => {
                feature.setStyle(
                    new olStyle.Style({
                        image: new olStyle.Icon({
                            crossOrigin: 'anonymous',
                            src: defaultImage,
                        }),
                    })
                )
                return feature
            }}
            showPointAnimate
            renderPointAnimateStyle={
                (radius, opacity, olStyle) => new olStyle.Style({
                    image: new olStyle.Circle({
                        radius,
                        stroke: new olStyle.Stroke({
                            color: `rgba(0, 155, 0, ${opacity})`,
                            width: 4 + opacity,
                        })
                    })
                })
            }
            renderTooltip={item => `<div class="tooltip-inner">${item.message}</div>`}
        />
    }

Render in your component: OpenlayersTrajectoryMap

<OpenlayersTrajectoryMap 
    data={data}
    mapType="baidu"
    coordinateType="wgs84"
    mapTileUrl={baiduTileUrl}
    mapStyleTileFilter="invert(0.31) grayscale(0.95) sepia(0.7)  hue-rotate(179deg) contrast(1.2) saturate(2) brightness(1)"
    hasPointTooltip
    renderTrajectoryStyle={(color, olStyle): any => (
        new olStyle.Style({
            stroke: new olStyle.Stroke({
                width: 2,
                color
            })
        })
    )}
    renderTooltip={(item): any => `<div class="tooltip-inner">${item.message}</div>`}
/>

API

confluence文档