0

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

4

1 回答 1

1

没有对 Choropleth 地图的库支持（我认为这是您所追求的），但是如果您可以访问包含所需国家或地区边界的 KML 文件，则可以使用 jQuery + HERE Maps 创建一个。

现已提供更新的 WKT 解决方案

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

KML 解决方案

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

问题分为四个部分：

  1. 异步加载但不解析要在“世界各国”中读取的 KML 文档
  2. 操纵KML 以删除不需要的国家、改变颜色的强度等。
  3. <Document>仅调用元素以nokia.maps.kml.Manager.parse()将修改后的 KML 转换为mapObjects并将它们放置在地图上。
  4. 默认情况下，Infobubble当单击 a 时，KML 将显示一个<PlaceMark>，如果您希望Infobubble 像链接到的示例中那样在悬停时显示，则需要一个额外的侦听器。

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

在此处输入图像描述

代码如下（使用自己的app id和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>
于 2013-07-10T15:41:50.323 回答