Question

“Here”是否支持国家/地区突出显示，如下例所示：https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart_06d031f6a0bf088f1320a975cdefa0e3.frame

Answer 1

对于Choropleth地图没有图书馆支持（我认为你正在追求），但是如果你有权访问一个保存国家或地区边界的KML文件，就可以使用jQuery + HERE Maps创建一个你需要。

现已推出更新的WKT解决方案

不再需要访问KML形状，因为Geocoder API现在提供IncludeShapes属性，该属性以WKT格式返回国家/地区的形状。可以找到WKT解析器here。这里可以找到一个简单的WKT choropleth example。

KML解决方案

提示：尝试像http://geocommons.com/overlays/119819这样的事情 - 国家边界是一个政治雷区，这可能就是为什么HERE不直接做这种事情的原因。

问题分为四个部分：

异步加载但不要解析要在“世界各国”中阅读的KML文档
操纵 KML以删除不需要的国家/地区，更改颜色强度等。
仅使用<Document>元素调用nokia.maps.kml.Manager.parse()即可将修改后的KML转换为mapObjects并将其放置在地图上。
默认情况下，点击Infobubble时KML会显示<PlaceMark>，如果您希望在悬停时显示Infobubble，则需要额外的监听器，如示例中所示链接到。

以下是一个示例屏幕截图，它只是突出显示以“A”或“B”开头的国家/地区，但您应该明白这一点：

enter image description here

代码如下（使用您自己的app id and token）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>KML Country color test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
    <script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div style="height:800px" id="mapContainer"></div>
<script type="text/javascript" id="exampleJsSource">

nokia.Settings.set( "appId", "YOUR APP ID"); 
nokia.Settings.set( "authenticationToken", "YOUR TOKEN");

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
var infoBubbles = new nokia.maps.map.component.InfoBubbles();

// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
    center: [0, 0],
    zoomLevel: 3,
    components: [
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior(),new nokia.maps.map.component.TypeSelector(),new nokia.maps.map.component.ZoomBar(),
        infoBubbles
    ]
});

map.addListener("mouseover", function (evt) {
    var coord = map.pixelToGeo(evt.targetX, evt.targetY);
    var objects = map.getObjectsAt( evt.targetX, evt.targetY) ;
    for(var i=0;i<objects.length;i++){
        var object=objects[i];
        if(object instanceof nokia.maps.map.Polygon ){
            object.dispatch( new nokia.maps.dom.Event({type: "click", target: object}));
            evt.stopImmediatePropagation();         
        }
    }
});



var kml = new nokia.maps.kml.Manager();
var resultSet;
var container = new nokia.maps.map.Container();
var doc;

// We define a callback function for parsing kml file,
// and then push the parsing result to map display
var onParsed = function (kmlManager) {
    //console.debug("onParsed");
    var
        boundingBox;

    // KML file was successfully loaded
    if (kmlManager.state == "finished") {

            // KML file was successfully parsed
            resultSet = new nokia.maps.kml.component.KMLResultSet( kmlManager.kmlDocument, map);

            // Add the container to the map's object collection so it will be rendered onto the map.
            map.objects.add(container = resultSet.create());

    }
};
// Add an observer to kml manager
kml.addObserver("state", onParsed);



function err (){
        alert("An Error has occurred.");
}

function parseXml(xml)
{
    $(xml).find("Placemark").each(function(){
        var countryName = $(this).children("name").text();

        /*  YOU CAN MANIPULATE STUFF HERE.

            var newName = document.createElement('name');
        newName.appendChild(document.createTextNode(" Additional Text" ));

        var newDesc  = document.createElement('description');
        newDesc.appendChild(document.createTextNode(countryName));

        $(this).children("name").replaceWith(newName);
        $(this).children("description").replaceWith(newDesc);*/

        if (countryName.indexOf("A")!= 0 &&  countryName.indexOf("B")!= 0 ){
            $(this).remove();
        }

    });

    doc =  xml.getElementsByTagName('Document')[0];
    kml.parse( doc);    
}

// doc-simple-limited is my KML file of country borders.
$.ajax({
    type: "GET",
    url: "../doc-simple-limited.kml" ,
    dataType: "xml",
    success: parseXml,
              error : err
  });

</script>
<body>
</html>

国家突出显示鼠标悬停

1 个答案: