Question

我正在使用openLayer3和osm作为地图，现在尝试在地图上绘制折线时

1：不显示多边形线，而且我在浏览器中收到错误 ReferenceError：未定义OpenLayers

以下是以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>
<!-- code to draw the polyline on the map-->

    var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
    map.addLayer(lineLayer);
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
    var points = new Array(
            new OpenLayers.Geometry.Point(103.987305, 1.355333),
            new OpenLayers.Geometry.Point(103.987262, 1.354432)
    );

    var line = new OpenLayers.Geometry.LineString(points);
    var style = {
        strokeColor: 'white',
        strokeOpacity: 0.5,
        strokeWidth: 5
    };
    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    lineLayer.addFeatures([lineFeature]);

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
          lineLayer 
        ],

        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false,

            })
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([103.986908, 1.353199]),
            rotation: 68*Math.PI/180,
            zoom: 18
        })
    });



</script>

</body>
</html>

我是新手请说出错的地方

Answer 1

请注意，OpenLayers 2和3具有不同的API。您的代码位于OpenLayers 2中，并且您已加载OpanLayers 3（ol.js）脚本。对于ol3示例，请查看源here。如果您使用的是OpenLayers 2，请使用以下语法声明地图。

<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script>
<!-- code to draw the polyline on the map-->

var   map = new OpenLayers.Map({
   div: "map",
  allOverlays: true
});

var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});

// note that first layer must be visible
map.addLayers([osm, gmap]);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();



</script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div style="width:80%; height:80%; position:fixed; border: 1px solid;" id="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>

    var lineString = new ol.geom.LineString([
        [103.985150, 1.349480],
        [103.985656, 1.350743]
    ]);
    lineString.transform('EPSG:4326', 'EPSG:3857');

    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: lineString,
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'yellow',
                opacity: 0.5,
                width: 15
            })
        })
    });

    var view = new ol.View({
        center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326','EPSG:3857'),
        zoom: 18
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            lineLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: view
    });



</script>

</body>
</html>

ReferenceError：使用osm层时未定义OpenLayers

2 个答案: