OpenLayer

来源:互联网 发布:淘宝宿迁店是指什么 编辑:程序博客网 时间:2024/05/01 18:25

1.导入GeoJson文件

<!DOCTYPE html>
<html>


<head>
    <title>GeoJSON</title>
    <!--      加载地图-->
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
</head>


<body>
    <!--      创建地图容器-->
    <div id="map" class="map"></div>
    <!--      创建地图功能-->
    <script>
        //加载地图
        var map = new ol.Map({
            layers: [
          new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
//                导入GeoJson文件数据
          new ol.layer.Vector({
            source: new ol.source.Vector({
              url: 'china.geojson',
              format: new ol.format.GeoJSON()
            })
          })
        ],
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    </script>
</body>


</html>

0 0