Question

我的网站目前使用mapbox作为基本地图：www.livehazards.com

地图集的观看次数由于某种原因，几乎是Google Adsense观看次数的10倍，这意味着如果我每天有超过10,000名访问者，那么在经济上是不可持续的（每天50美元）。

以下是一些问题：

我听说过OSM可以免费使用，x量的观点没有收费 - 这是正确的吗？

我知道基本地图会有所不同，但是我可以导入GeoJson地震数据并设置数据样式（圆形边框，圆形动画），就像我使用mapbox一样吗？

如何开始在我的网站上嵌入交互式OSM地图以及如何在OSM地图中导入GeoJson地震数据？

代码：

＆＃13;

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 18,
}).addTo(mymap);
var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};
L.geoJSON(geojsonFeature).addTo(mymap);

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
  <style>
    body,html,#mapid { height: 100%; width: 100%; }
  </style>
</head>
<body>

<div id="mapid"></div>
</body>
</html>

＆＃13;

Answer 1

首先，为了澄清一些术语，OpenStreetMap（OSM）就是数据库。从OSM派生出来的光栅或矢量图块服务有许多不同的提供者，而openstreetmap.org本身就是一个 - 合理使用＆＃34;准则。你没有＆＃34;导入＆＃34;数据＆＃34;内＆＃34; OSM地图，但您可以覆盖＆＃34;数据＆＃34; over＆＃34;由openstreetmap.org或其他任何地方提供的瓷砖。

那么，如何在栅格tileset上叠加GeoJSON数据呢？轻松使用宣传单并关注quick start tutorial和GeoJSON tutorial。关键部分：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 18,
}).addTo(mymap);


var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};


L.geoJSON(geojsonFeature).addTo(map);

如何使用OSM设置GeoJson地图？

1 个答案: