Fatal编程技术网
  • gis/
  • Gis 如何在OpenLayer 3地图上添加绘图？

Gis 如何在OpenLayer 3地图上添加绘图？

gis openlayers-3

Gis 如何在OpenLayer 3地图上添加绘图？,gis,openlayers-3,Gis,Openlayers 3,我是OpenLayers 3的新手。我正在尝试学习如何在OpenLayers地图上绘制和保存数据。下面是一个例子，我试图学习如何绘制和保存数据。然而，我无法在地图上画任何东西。我把代码贴在下面 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="css/ol.css" type="text/css"> <style> .

我是OpenLayers 3的新手。我正在尝试学习如何在OpenLayers地图上绘制和保存数据。下面是一个例子，我试图学习如何绘制和保存数据。然而，我无法在地图上画任何东西。我把代码贴在下面

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

    <title>OpenLayers 3 example</title>
    <script src="js/ol.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>


    <body>

    <div id="map" class="map"></div>
    <div>
      <label>Interaction type:  &nbsp;</label>
      <label>draw</label>
      <input type="radio" id="interaction_type_draw" name="interaction_type" value="draw" checked>
      <label>modify</label>
      <input type="radio" id="interaction_type_modify" name="interaction_type" value="modify">
    </div>
    <div>
      <label>Geometry type</label>
      <select id="geom_type">
        <option value="Point" selected>Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
      </select>
    </div>
    <div>
      <label>Data type</label>
      <select id="data_type">
        <option value="GeoJSON" selected>GeoJSON</option>
        <option value="KML">KML</option>
        <option value="GPX">GPX</option>
      </select>
    </div>
    <div id="delete" style="text-decoration:underline;cursor:pointer">
      Delete all features
    </div>
    <label>Data:</label>
    <textarea id="data" rows="12" style="width:100%"></textarea>
    <script>
            var source = new ol.source.Vector();
            var vector = new ol.layer.Vector({
             source: source, style: new ol.style.Style({
                             fill: new ol.style.Fill({
                             color: 'rgba(255, 255, 255, 0.2)'   }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

// Create a map
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vector
  ],
  view: new ol.View({
    zoom: 2,
    center: [0, 0]
  })
});

// make draw global so it can later be removed
var draw;

// creat a select to choose geometry type
var typeSelect = document.getElementById('type');
// rebuild interaction when changed
typeSelect.onchange = function(e) {
  map.removeInteraction(draw);
  addInteraction();
};

// create a select to choose a data type to save in
dataTypeSelect = document.getElementById('data_type');
// clear map and rebuild interaction when changed
dataTypeSelect.onchange = function(e) {
  clearMap();
  map.removeInteraction(draw);
  addInteraction();
};

// add draw interaction
function addInteraction() {
  var geom_type = typeSelect.value;
  if (geom_type !== 'None') {
    draw = new ol.interaction.Draw({
      source: source,
      type: /** @type {ol.geom.GeometryType} */ (geom_type)
    });

    draw.on('drawend', function(evt) {
      saveData();
    });

    map.addInteraction(draw);
  }
}

function saveData() {
  var allFeatures = vector.getSource().getFeatures(),
      format = new ol.format[dataTypeSelect.value](),
      data;
  try {
    data = format.writeFeatures(allFeatures);
  } catch (e) {
    // at time of creation there is an error in the GPX format (18.7.2014)
    document.getElementById('data').value = e.name + ": " + e.message;
    return;
  }
  if (dataTypeSelect.value === 'GeoJSON') {
    // format is JSON
    document.getElementById('data').value = JSON.stringify(data, null, 4);
  } else {
    // format is XML (GPX or KML)
    var serializer = new XMLSerializer();
    document.getElementById('data').value = serializer.serializeToString(data);
  }
}

// add the interaction when the page is first shown
addInteraction();

// clear map when user clicks on 'Delete all features'
$("#delete").click(function() {
  clearMap();
});

// clears the map and the output of the data
function clearMap() {
  vector.getSource().clear();
  document.getElementById('data').value = '';
}


</script>
  </body>
</html>


.地图{
高度：400px；
宽度：100%；
}
OpenLayers 3示例
交互类型：
画
修改
几何类型
指向
线绳
多边形
数据类型
GeoJSON
KML
GPX
删除所有功能
数据：
var source=new ol.source.Vector（）；
var vector=新的ol.layer.vector({
来源：来源，样式：新ol.style.style({
填充：新的ol.style.fill({
颜色：'rgba（255，255，255，0.2）}），
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
//创建地图
var map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
矢量
],
视图：新ol.view({
缩放：2，
中间：[0，0]
})
});
//将绘图设为全局，以便以后可以将其删除
var提取；
//创建“选择”以选择几何图形类型
var typeSelect=document.getElementById（'type'）；
//更改时重建交互
typeSelect.onchange=函数（e）{
映射。移除交互（绘制）；
addInteraction（）；
};
//创建“选择”以选择要保存的数据类型
dataTypeSelect=document.getElementById（“数据类型”）；
//更改时清除映射并重建交互
dataTypeSelect.onchange=函数（e）{
clearMap（）；
映射。移除交互（绘制）；
addInteraction（）；
};
//添加绘图交互
函数addInteraction（）{
var geom_type=typeSelect.value；
如果（几何图形类型！=“无”）{
draw=新ol.interaction.draw({
资料来源：资料来源，
类型：/**@type{ol.geom.GeometryType}*/（geom_类型）
});
取款人功能（evt）{
saveData（）；
});
地图。添加交互作用（绘制）；
}
}
函数saveData（）{
var allFeatures=vector.getSource（）.getFeatures（），
format=新的ol.format[dataTypeSelect.value]（），
数据；
试一试{
数据=format.writeFeatures（所有要素）；
}捕获（e）{
//创建时，GPX格式存在错误（18.7.2014）
document.getElementById（'data'）。value=e.name+“：”+e.message；
返回；
}
if（dataTypeSelect.value==='GeoJSON'）{
//格式是JSON
document.getElementById（'data'）.value=JSON.stringify（data，null，4）；
}否则{
//格式为XML（GPX或KML）
var serializer=新的XMLSerializer（）；
document.getElementById（'data'）。value=serializer.serializeToString（数据）；
}
}
//第一次显示页面时添加交互
addInteraction（）；
//当用户单击“删除所有功能”时清除地图
$（“#删除”）。单击（函数（）{
clearMap（）；
});
//清除映射和数据的输出
函数clearMap（）{
vector.getSource（）.clear（）；
document.getElementById（'data'）。值=''；
}
请告诉我为什么我看不到地图上的任何图画？然而，我所看到的这些作品都很好。我无法找出问题所在。请帮助我，这样我就可以尝试openLayers并了解更多信息。谢谢

在使用jquery选择dom元素时应该更加小心。此外，我强烈建议使用Firebug并检查控制台在页面加载时是否存在错误。这是固定的完整来源

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>

    <title>OpenLayers 3 example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol-debug.js"></script>
    <!--<script src="js/ol.js" type="text/javascript"></script>-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>


<body>

    <div id="map" class="map"></div>
    <div>
        <label>Interaction type:  &nbsp;</label>
        <label>draw</label>
        <input type="radio" id="interaction_type_draw" name="interaction_type" value="draw" checked>
        <label>modify</label>
        <input type="radio" id="interaction_type_modify" name="interaction_type" value="modify">
    </div>
    <div>
        <label>Geometry type</label>
        <select id="geom_type">
            <option value="Point" selected>Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
        </select>
    </div>
    <div>
        <label>Data type</label>
        <select id="data_type">
            <option value="GeoJSON" selected>GeoJSON</option>
            <option value="KML">KML</option>
            <option value="GPX">GPX</option>
        </select>
    </div>
    <div id="delete" style="text-decoration:underline;cursor:pointer">
        Delete all features
    </div>
    <label>Data:</label>
    <textarea id="data" rows="12" style="width:100%"></textarea>
    <script>
        var source = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: source, style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

        // Create a map
        var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              }),
              vector
            ],
            view: new ol.View({
                zoom: 2,
                center: [0, 0]
            })
        });

        // make draw global so it can later be removed
        var draw;

        // creat a select to choose geometry type
        var typeSelect = document.getElementById('geom_type');
        // rebuild interaction when changed
        typeSelect.onchange = function (e) {
            map.removeInteraction(draw);
            addInteraction();
        };

        // create a select to choose a data type to save in
        dataTypeSelect = document.getElementById('data_type');
        // clear map and rebuild interaction when changed
        dataTypeSelect.onchange = function (e) {
            clearMap();
            map.removeInteraction(draw);
            addInteraction();
        };

        // add draw interaction
        function addInteraction() {
            var geom_type = typeSelect.value;
            if (geom_type !== 'None') {
                draw = new ol.interaction.Draw({
                    source: source,
                    type: /** @type {ol.geom.GeometryType} */ (geom_type)
                });

                draw.on('drawend', function (evt) {
                    saveData();
                });

                map.addInteraction(draw);
            }
        }

        function saveData() {
            var allFeatures = vector.getSource().getFeatures(),
                format = new ol.format[dataTypeSelect.value](),
                data;
            try {
                data = format.writeFeatures(allFeatures);
            } catch (e) {
                // at time of creation there is an error in the GPX format (18.7.2014)
                document.getElementById('data').value = e.name + ": " + e.message;
                return;
            }
            if (dataTypeSelect.value === 'GeoJSON') {
                // format is JSON
                document.getElementById('data').value = JSON.stringify(data, null, 4);
            } else {
                // format is XML (GPX or KML)
                var serializer = new XMLSerializer();
                document.getElementById('data').value = serializer.serializeToString(data);
            }
        }

        // add the interaction when the page is first shown
        addInteraction();

        // clear map when user clicks on 'Delete all features'
        $("#delete").click(function () {
            clearMap();
        });

        // clears the map and the output of the data
        function clearMap() {
            vector.getSource().clear();
            document.getElementById('data').value = '';
        }


    </script>
</body>
</html>


.地图{
高度：400px；
宽度：100%；
}
OpenLayers 3示例
交互类型：
画
修改
几何类型
指向
线绳
多边形
数据类型
GeoJSON
KML
GPX
删除所有功能
数据：
var source=new ol.source.Vector（）；
var vector=新的ol.layer.vector({
来源：来源，样式：新ol.style.style({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
//创建地图
var map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
矢量
],
视图：新ol.view({
缩放：2，
中间：[0，0]
})
});
//将绘图设为全局，以便以后可以将其删除
var提取；
//创建“选择”以选择几何图形类型
var typeSelect=document.getElementById（'geom_type'）；
//更改时重建交互
typeSelect.onchange=函数（e）{
映射。移除交互（绘制）；
addInteraction（）；
};
//创建“选择”以选择要保存的数据类型
dataTypeSelect=document.getElementById（“数据类型”）；
//更改时清除映射并重建交互
dataTypeSelect.onchange=函数（e）{
clearMap（）；
映射。移除交互（绘制）；
addInteraction（）；
};
//添加绘图交互