示例代码

var map; 
var directionsService; 
var directionsRenderer; 
var markerOrigin, markerDestination; 
// 创建路径规划请求体
var DirectionsRequest = {}; 
DirectionsRequest.origin = { 
    lat: 48.86, 
    lng: 2.36 
}; 
DirectionsRequest.destination = { 
    lat: 49.18, 
    lng: 0.39 
}; 
 
function initMap() { 
    directionsService = new HWMapJsSDK.HWDirectionsService(); 
    directionsRenderer = new HWMapJsSDK.HWDirectionsRenderer(); 
 
    var mapOptions = {}; 
    mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
    mapOptions.zoom = 8; 
    mapOptions.language = 'ENG'; 
 
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions); 
 
    markerOrigin = new HWMapJsSDK.HWMarker({ 
        position: DirectionsRequest.origin, 
        label: 'Origin' 
    }); 
 
    markerDestination = new HWMapJsSDK.HWMarker({ 
        position: DirectionsRequest.destination, 
        label: 'Destination' 
    }); 
 
    markerOrigin.setMap(map); 
    markerDestination.setMap(map); 
    // 调用路径规划接口 
    directionsService.routeDriving(DirectionsRequest, callback); 
    directionsRenderer.setMap(map); 
    // 通过回调函数获取路径规划结果 
    function callback(DirectionsResult, DirectionsStatus) { 
        if (DirectionsStatus == '0') { 
            // 通过HWDirectionsRenderer对象渲染路径 
            directionsRenderer.setDirections(DirectionsResult); 
        } 
    } 
}

路径规划结果如图所示：

点击放大

展示路况信息

通过调用HWMapJsSDK.HWNaviLine(naviLineOption)，支持在路径规划时展示路况信息：

可根据路况设置颜色分段，展示交通拥堵情况。
支持显示道路流向方向的箭头，可设置显示或不显示。
支持显示不同的样式（主、备选路线）。
支持路名显示。
支持蚯蚓线从起点到终点的动画显示。
支持蚯蚓线点击事件。

[h2]绘制蚯蚓线

准备路线的起终点以及途径点坐标，部分坐标点示例：

const points1 = [
    {
        lng: 2.30076809,
        lat: 48.79955318,
    },
    {
        lng: 2.30079317,
        lat: 48.79957199,
    },
    {
        lng: 2.30128908,
        lat: 48.79994965,
    }
];

点击points.zip下载完整坐标集合示例。

调用HWMapJsSDK.HWNaviLine(naviLineOption)绘制蚯蚓线。

示例代码如下：

“JavaScript”
var map;

var firstNaviLine
var points = [
    points1,
    points2
]

var fillColors = [
    {
        colors: ["rgb(142,14,11)", "rgb(27,172,46)","rgb(255,167,0)", "rgb(142,14,11)","rgb(232,14,14)", "rgb(173,173,173)"],
        indexes: [1, 22, 67, 110, 310, 322, 407, 647,779, 822, 847, 910]
    }, {
        colors: ["#cddc39", "#ff9800"],
        indexes: [1, 5, 2, 12]
    }
]

var lineTexts = [
    {
        texts: [{name: "北京路", setName: "beijinglu"}, {name: "上海路", setName: "shanghailu"}],
        indexes: [0, 51, 111, 621]
    }, {
        texts: [{name: "南京路", setName: "nanjinglu"}, {name: "珠江路", setName: "zhujianglu"}],
        indexes: [0, 251, 511, 621]
    }
];

var lineCodes = [
    {
        codes: [{code: "10002", codeSprite: "8900"}, {code: "5310", codeSprite: "910"}],
        indexes: [10, 227, 337, 66611]
    }, {
        codes: [{code: "2010", codeSprite: "9511"}, {code: "5115", codeSprite: "2005"}],
        indexes: [10, 227, 337, 66611]
    }
];

function initMap() {

    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 12;
    mapOptions.language = 'en'

    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);

    // 绘制彩虹蚯蚓线
    firstNaviLine = new HWMapJsSDK.HWNaviLine({
        map,
        points: points[0],
        strokeColor: '#c7b18c',
        strokeWeight: 1,
        fillColor: '#fce0b0',
        fillWidth: 5,
        textSize: 22,
        textColor: 'hsl(187,100%,42%)',
        collisionEnable: true,
        zIndex: 2,
        NaviLineFillColors: fillColors[0],
        NaviLineTexts: lineTexts[0],
        NaviLineCodes: lineCodes[0]
    })
}

function setMap() {
    firstNaviLine.setMap(firstNaviLine.getMap() ? null : map)
}

function getMap() {
    console.log(firstNaviLine.getMap())
}

function setPoints() {
    firstNaviLine.setPoints(points[1])
}

function getPoints() {
    console.log(firstNaviLine.getPoints())
}

function setStrokeWeight() {
    firstNaviLine.setStrokeWeight(5)
}

function getStrokeWeight() {
    console.log(firstNaviLine.getStrokeWeight())
}

function setStrokeColor() {
    firstNaviLine.setStrokeColor('green')
}

function getStrokeColor() {
    console.log(firstNaviLine.getStrokeColor())
}

function setFillWidth() {
    firstNaviLine.setFillWidth(2)
}

function getFillWidth() {
    console.log(firstNaviLine.getFillWidth())
}

function setFillColor() {
    firstNaviLine.setFillColor('#f00')
}

function getFillColor() {
    console.log(firstNaviLine.getFillColor())
}

function setTextSize() {
    firstNaviLine.setTextSize(32)
}

function getTextSize() {
    console.log(firstNaviLine.getTextSize())
}

function setTextColor() {
    firstNaviLine.setTextColor('rgba(54,107,252,1)')
}

function getTextColor() {
    console.log(firstNaviLine.getTextColor())
}

function setNaviLineColors() {
    firstNaviLine.setNaviLineColors(fillColors[1])
}

function getNaviLineColors() {
    console.log(firstNaviLine.getNaviLineColors())
}

function setNaviLineTexts() {
    firstNaviLine.setNaviLineTexts(lineTexts[1])
}

function getNaviLineTexts() {
    console.log(firstNaviLine.getNaviLineTexts())
}

function setNaviLineCodes() {
    firstNaviLine.setNaviLineCodes(lineCodes[1])
}

function getNaviLineCodes() {
    console.log(firstNaviLine.getNaviLineCodes())
}

function setCollisionEnable() {
    firstNaviLine.setCollisionEnable(false)
}

function getCollisionEnable() {
    console.log(firstNaviLine.getCollisionEnable())
}

function setZIndex() {
    firstNaviLine.setZIndex(10)
}

function getZIndex() {
    console.log(firstNaviLine.getZIndex())
}

“HTML”
<div id="map">
    <div style="position: absolute; z-index: 3; top: 20px; margin-left: 20px; width: 50%;">
        <div style="display: flex; justify-content: space-between;">
            <button type="button" class="button button--default" onclick="setMap()">
                <span>setMap</span>
            </button>
            <button type="button" class="button button--default" onclick="getMap()">
                <span>getMap</span>
            </button>
            <button type="button" class="button button--default" onclick="setPoints()">
                <span>setPoints</span>
            </button>
            <button type="button" class="button button--default" onclick="getPoints()">
                <span>getPoints</span>
            </button>
            <button type="button" class="button button--default" onclick="setStrokeWeight()">
                <span>setStrokeWeight</span>
            </button>
            <button type="button" class="button button--default" onclick="getStrokeWeight()">
                <span>getStrokeWeight</span>
            </button>
            <button type="button" class="button button--default" onclick="setStrokeColor()">
                <span>setStrokeColor</span>
            </button>
            <button type="button" class="button button--default" onclick="getStrokeColor()">
                <span>getStrokeColor</span>
            </button>
        </div>
        <div style="display: flex; justify-content: space-between; margin: 20px 0px;">
            <button type="button" class="button button--default" onclick="setFillWidth()">
                <span>setFillWidth</span>
            </button>
            <button type="button" class="button button--default" onclick="getFillWidth()">
                <span>getFillWidth</span>
            </button>
            <button type="button" class="button button--default" onclick="setFillColor()">
                <span>setFillColor</span>
            </button>
            <button type="button" class="button button--default" onclick="getFillColor()">
                <span>getFillColor</span>
            </button>
            <button type="button" class="button button--default" onclick="setTextSize()">
                <span>setTextSize</span>
            </button>
            <button type="button" class="button button--default" onclick="getTextSize()">
                <span>getTextSize</span>
            </button>
            <button type="button" class="button button--default" onclick="setTextColor()">
                <span>setTextColor</span>
            </button>
            <button type="button" class="button button--default" onclick="getTextColor()">
                <span>getTextColor</span>
            </button>
        </div>
        <div style="display: flex;">
            <button type="button" class="button button--default" onclick="setNaviLineColors()">
                <span>setNaviLineColors</span>
            </button>
            <button type="button" class="button button--default" onclick="getNaviLineColors()">
                <span>getNaviLineColors</span>
            </button>
            <button type="button" class="button button--default" onclick="setNaviLineTexts()">
                <span>setNaviLineTexts</span>
            </button>
            <button type="button" class="button button--default" onclick="getNaviLineTexts()">
                <span>getNaviLineTexts</span>
            </button>
            <button type="button" class="button button--default" onclick="setNaviLineCodes()">
                <span>setNaviLineCodes</span>
            </button>
            <button type="button" class="button button--default" onclick="getNaviLineCodes()">
                <span>getNaviLineCodes</span>
            </button>
        </div>
        <div style="display: flex; margin: 20px 0px;">
            <button type="button" class="button button--default" onclick="setCollisionEnable()">
                <span>setCollisionEnable</span>
            </button>
            <button type="button" class="button button--default" onclick="getCollisionEnable()">
                <span>getCollisionEnable</span>
            </button>
            <button type="button" class="button button--default" onclick="setZIndex()">
                <span>setZIndex</span>
            </button>
            <button type="button" class="button button--default" onclick="getZIndex()">
                <span>getZIndex</span>
            </button>
        </div>
    </div>
</div>

“CSS”
<style>
    #map {
        height: 100%;
        width: 100%;
    }

    .button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
</style>

点击放大

[h2]蚯蚓线生长动画

调用HWMapJsSDK.HWNaviLine(naviLineOption)时，通过NaviLineOptions中的animateOption属性设置蚯蚓线生长动画。

function initMap() {

    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 12;
    mapOptions.language = 'en'

    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);

    firstNaviLine = new HWMapJsSDK.HWNaviLine({
        map,
        points: points[0],
        strokeColor: '#c7b18c',
        strokeWeight: 1,
        fillColor: '#fce0b0',
        fillWidth: 5,
        textSize: 22,
        textColor: 'hsl(187,100%,42%)',
        collisionEnable: true,
        zIndex: 2,
        NaviLineFillColors: fillColors[0],
        NaviLineTexts: lineTexts[0],
        NaviLineCodes: lineCodes[0],
        animateOption:{
            // 蚯蚓线是否展示动画，默认false
            animate: true,
            // 蚯蚓线生长动画时长，默认1000ms
            timeout: 1000
        }
    })
}

点击放大

[h2]蚯蚓线事件

调用HWNaviLine的addListener(type, callback)、removeListener(type, callback)方法，添加/删除点击事件。

示例代码如下：

“JavaScript”
function handler(e){
    let naviline=e.target
    let colors=''
    if(!infoWindow){
        for(let i=0;i<naviline._fillColors.colors.length;i++){
            colors+= '<p>'+naviline._fillColors.colors[i]+'</p>'
        }
        infoWindow = new HWMapJsSDK.HWInfoWindow({
            map,
            position:HWMapJsSDK.HWMapUtils.epsgToLatLng(e.coordinate),
            content: colors
        })
    }else{
        infoWindow.setPosition(HWMapJsSDK.HWMapUtils.epsgToLatLng(e.coordinate))
    }
}

// 添加点击事件
function addListener(){
    firstNaviLine.addListener('click', handler)
}
// 删除点击事件
function removeListener(){
    firstNaviLine.removeListener('click',handler)
}

“HTML”
<button type="button" class="button button--default" onclick="addListener()">
    <span>addListener</span>
</button>
<button type="button" class="button button--default" onclick="removeListener()">
    <span>removeListener</span>
</button>

点击放大

目录

示例代码

展示路况信息

[h2]绘制蚯蚓线

[h2]蚯蚓线生长动画

[h2]蚯蚓线事件