如何将GeoJSON（MultiLineString）图层添加到Google地图 [英] How to add GeoJSON(MultiLineString) layer to a Google Map

问题描述

我需要创建将通过Google Map使用GeoJSON数据（MultiLineString格式）作为数据层的地图。我创建了一个Google Maps JavaScript API项目，并且有一个API密钥。

我尝试了以下示例：

示例I：

https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple

（这呈现一个多边形，但似乎不支持MultiLineString的样式）。

示例二：

https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop

（这个例子允许通过拖放来添加GeoJSON，但我不知道如何保存地图和数据层。）

来自 http://geojsonlint.com ：

  {
type：MultiLineString，
coordinates：[
 [
 [
 -105.0214433670044，
 39.57805759162015 
 ]，
 [
 -105.02150774002075，
 39.57780951131517 
]，
 [
 -105.02157211303711，
 39.57749527498758 
]，
 [
 -105.02157211303711，
 39.57716449836683 
]，
 [
 -105.02157211303711，
 39.57703218727656 
]，
 [
 -105.02152919769287，
 39.57678410330158 
] 
]，
 [
 [
 -105.01989841461182，
 39.574997872470774 
]，
 [
 -105.01959800720215，
 39.57489863607502 
]，
 [
 -105.01906156539916，
 39.57478286010041 
] 
]，
 [
 [
 -105.01717329025269，
 39.5744024519653 
]，
 [
 -105.01698017120361，
 39.574385912433804 
 ]，
 [
 -105.0166368484497，
 39.574385912433804 
]，
 [
 -105.01650810241699，
 39.5744024519653 
]，
 [
 -105.0159502029419，
 39.574270135602866 
] 
]，
 [
 [
 -105.0142765045166，
 39.57397242286402 
 
 $ b -105.01412630081175 
 39.57403858136094 
 
 
 -105.0138258934021 
 39.57417089816531 
]， 
 [
 -105.01331090927124，
 39.57445207053608 
] 
] 
] 
} 
  pre> 
 
解决方案
继文档中的示例 
 
 
 数据类  
 
 
  google.maps.Data类 
 
 
 
用于显示地理空间数据的图层。可以显示点，线串和多边形。
 
 
 
默认情况下，每个Map都有一个Data对象，因此大多数时候不需要构造一个。例如：
 
 
 
 
  var myMap = new google.maps.Map（...）; 
 myMap.data.addGeoJson（...）; 
 myMap.data.setStyle（...）; 
  
 概念证明小提琴 
 
 
 
 程式码片段：  
 
 
 
 < pre-class =snippet-code-js lang-js prettyprint-override>  function initialize（）{var map = new google.maps.Map（document.getElementById（map_canvas），{center： new google.maps.LatLng（37.4419,70.1419），zoom：3，mapTypeId：google.maps.MapTypeId.ROADMAP}）; map.data.addGeoJson（jsonData）; map.default.txt（）;}};}};}; type：Feature，properties：{stroke：＃555555，stroke-width：2，stroke-opacity：1}，geometry：{type：LineString 坐标：[[79.8046875,45.583289756006316]，[73.828125,48.922499263758255]，[72.421875,46.07323062540838]，[72.0703125,42.553080288955826]，[79.453125,41.7131367976407]，[78.046875,37.751532558816]，[72.7734375,34.016241889667015]，[ 66.796875，39.63953756436671]，[66.4453125,48.45835188280866]，[74.1796875， 53.74871079689897]，[55.1953125,55.7765730186677]，[49.92187499999999,48.69096039092549]，[50.625,40.17887331434696]]}]]};  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I need to create maps that will use GeoJSON data(MultiLineString format) as a data layer over a Google Map. I have created a Google Maps JavaScript API project, and have an API key.

I have tried the following examples:

Example I:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
(This renders a polygon but does not seem to support the styling of a MultiLineString).

Example II:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
(This example allows for addition of GeoJSON via Drag and Drop but I do not see how to save the map and data layer.)

Sample GeoJSON MultiLineString from http://geojsonlint.com :

{
    "type": "MultiLineString",
    "coordinates": [
        [
            [
                -105.0214433670044,
                39.57805759162015
            ],
            [
                -105.02150774002075,
                39.57780951131517
            ],
            [
                -105.02157211303711,
                39.57749527498758
            ],
            [
                -105.02157211303711,
                39.57716449836683
            ],
            [
                -105.02157211303711,
                39.57703218727656
            ],
            [
                -105.02152919769287,
                39.57678410330158
            ]
        ],
        [
            [
                -105.01989841461182,
                39.574997872470774
            ],
            [
                -105.01959800720215,
                39.57489863607502
            ],
            [
                -105.01906156539916,
                39.57478286010041
            ]
        ],
        [
            [
                -105.01717329025269,
                39.5744024519653
            ],
            [
                -105.01698017120361,
                39.574385912433804
            ],
            [
                -105.0166368484497,
                39.574385912433804
            ],
            [
                -105.01650810241699,
                39.5744024519653
            ],
            [
                -105.0159502029419,
                39.574270135602866
            ]
        ],
        [
            [
                -105.0142765045166,
                39.57397242286402
            ],
            [
                -105.01412630081175,
                39.57403858136094
            ],
            [
                -105.0138258934021,
                39.57417089816531
            ],
            [
                -105.01331090927124,
                39.57445207053608
            ]
        ]
    ]
}

解决方案

Following the example in the documentation

Data class

google.maps.Data class

A layer for displaying geospatial data. Points, line-strings and polygons can be displayed.

Every Map has a Data object by default, so most of the time there is no need to construct one. For example:

var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...); 

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, 70.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addGeoJson(jsonData);
  map.data.setStyle({
    strokeColor: "blue"
  })

}
google.maps.event.addDomListener(window, "load", initialize);
var jsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "stroke": "#555555",
      "stroke-width": 2,
      "stroke-opacity": 1
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          79.8046875,
          45.583289756006316
        ],
        [
          73.828125,
          48.922499263758255
        ],
        [
          72.421875,
          46.07323062540838
        ],
        [
          72.0703125,
          42.553080288955826
        ],
        [
          79.453125,
          41.77131167976407
        ],
        [
          78.046875,
          37.71859032558816
        ],
        [
          72.7734375,
          34.016241889667015
        ],
        [
          66.796875,
          39.63953756436671
        ],
        [
          66.4453125,
          48.45835188280866
        ],
        [
          74.1796875,
          53.74871079689897
        ],
        [
          55.1953125,
          55.7765730186677
        ],
        [
          49.92187499999999,
          48.69096039092549
        ],
        [
          50.625,
          40.17887331434696
        ]
      ]
    }
  }]
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于如何将GeoJSON（MultiLineString）图层添加到Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！