区块链技术博客
www.b2bchain.cn

openlayers6地图全图以及框选截图导出功能(附源码下载)求职学习资料

本文介绍了openlayers6地图全图以及框选截图导出功能(附源码下载)求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

内容概览

openlayers6地图截图导出功能
源代码demo下载

效果图如下:
openlayers6地图全图以及框选截图导出功能(附源码下载) openlayers6地图全图以及框选截图导出功能(附源码下载)

本篇主要参考截图插件domtoimage:https://github.com/tsayen/dom-to-image
地图全图导出直接用上面的domtoimage插件,然后矩形框选截图导出也是在domtoimage插件基础上自己计算矩形范围来实现的

  • 部分核心代码,完整的见源码demo下载
    “`
    var baseLayer = new ol.layer.Tile({
    source: new ol.source.TileArcGISRest({
    url: ‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer’,
    crossOrigin:’Anonymous’
    })
    });

    //绘制工具图形
    var draw = null;
    var drawsource = new ol.source.Vector();
    var drawlayer = new ol.layer.Vector({
    source: drawsource,
    style:new ol.style.Style({
    stroke: new ol.style.Stroke({
    color: ‘#fff’,
    width: 1
    }),
    fill: new ol.style.Fill({
    color:[38,155,0,0] //使用了一个数组,[r,g,b,a]
    })
    }),
    });

    var view = new ol.View({
    center: [113.90271877, 22.95186415],
    zoom: 9,
    projection: ‘EPSG:4326’,
    });

    var map = new ol.Map({
    layers: [
    baseLayer,
    drawlayer
    ],
    target: ‘map’,
    view: view
    });

    //参考截图插件:https://github.com/tsayen/dom-to-image
    var node = document.getElementById(‘map’);
    $(“#mapexport_btn”).click(function(){
    domtoimage.toJpeg(node, { quality: 1.0 })
    .then(function (dataUrl) {
    var link = document.createElement(‘a’);
    link.download = ‘全图导出.jpeg’;
    link.href = dataUrl;
    link.click();
    });
    });

    $(“#rctanglexport_btn”).click(function(){
    //绘制矩形
    clearMap();
    addInteraction(“Box”);
    });

    function addInteraction(value){
    var geometryFunction;
    switch (value) {
    case “Box”:
    value = ‘Circle’;
    geometryFunction = ol.interaction.Draw.createBox();
    break;
    case “Polygon”:
    value = ‘Polygon’;
    break;
    }
    //map.addLayer(drawlayer);

内容概览

openlayers6地图截图导出功能
源代码demo下载

效果图如下:
openlayers6地图全图以及框选截图导出功能(附源码下载) openlayers6地图全图以及框选截图导出功能(附源码下载)

本篇主要参考截图插件domtoimage:https://github.com/tsayen/dom-to-image
地图全图导出直接用上面的domtoimage插件,然后矩形框选截图导出也是在domtoimage插件基础上自己计算矩形范围来实现的

  • 部分核心代码,完整的见源码demo下载
    “`
    var baseLayer = new ol.layer.Tile({
    source: new ol.source.TileArcGISRest({
    url: ‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer’,
    crossOrigin:’Anonymous’
    })
    });

    //绘制工具图形
    var draw = null;
    var drawsource = new ol.source.Vector();
    var drawlayer = new ol.layer.Vector({
    source: drawsource,
    style:new ol.style.Style({
    stroke: new ol.style.Stroke({
    color: ‘#fff’,
    width: 1
    }),
    fill: new ol.style.Fill({
    color:[38,155,0,0] //使用了一个数组,[r,g,b,a]
    })
    }),
    });

    var view = new ol.View({
    center: [113.90271877, 22.95186415],
    zoom: 9,
    projection: ‘EPSG:4326’,
    });

    var map = new ol.Map({
    layers: [
    baseLayer,
    drawlayer
    ],
    target: ‘map’,
    view: view
    });

    //参考截图插件:https://github.com/tsayen/dom-to-image
    var node = document.getElementById(‘map’);
    $(“#mapexport_btn”).click(function(){
    domtoimage.toJpeg(node, { quality: 1.0 })
    .then(function (dataUrl) {
    var link = document.createElement(‘a’);
    link.download = ‘全图导出.jpeg’;
    link.href = dataUrl;
    link.click();
    });
    });

    $(“#rctanglexport_btn”).click(function(){
    //绘制矩形
    clearMap();
    addInteraction(“Box”);
    });

    function addInteraction(value){
    var geometryFunction;
    switch (value) {
    case “Box”:
    value = ‘Circle’;
    geometryFunction = ol.interaction.Draw.createBox();
    break;
    case “Polygon”:
    value = ‘Polygon’;
    break;
    }
    //map.addLayer(drawlayer);

内容概览

openlayers6地图截图导出功能
源代码demo下载

效果图如下:
openlayers6地图全图以及框选截图导出功能(附源码下载) openlayers6地图全图以及框选截图导出功能(附源码下载)

本篇主要参考截图插件domtoimage:https://github.com/tsayen/dom-to-image
地图全图导出直接用上面的domtoimage插件,然后矩形框选截图导出也是在domtoimage插件基础上自己计算矩形范围来实现的

  • 部分核心代码,完整的见源码demo下载
    “`
    var baseLayer = new ol.layer.Tile({
    source: new ol.source.TileArcGISRest({
    url: ‘http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer’,
    crossOrigin:’Anonymous’
    })
    });

    //绘制工具图形
    var draw = null;
    var drawsource = new ol.source.Vector();
    var drawlayer = new ol.layer.Vector({
    source: drawsource,
    style:new ol.style.Style({
    stroke: new ol.style.Stroke({
    color: ‘#fff’,
    width: 1
    }),
    fill: new ol.style.Fill({
    color:[38,155,0,0] //使用了一个数组,[r,g,b,a]
    })
    }),
    });

    var view = new ol.View({
    center: [113.90271877, 22.95186415],
    zoom: 9,
    projection: ‘EPSG:4326’,
    });

    var map = new ol.Map({
    layers: [
    baseLayer,
    drawlayer
    ],
    target: ‘map’,
    view: view
    });

    //参考截图插件:https://github.com/tsayen/dom-to-image
    var node = document.getElementById(‘map’);
    $(“#mapexport_btn”).click(function(){
    domtoimage.toJpeg(node, { quality: 1.0 })
    .then(function (dataUrl) {
    var link = document.createElement(‘a’);
    link.download = ‘全图导出.jpeg’;
    link.href = dataUrl;
    link.click();
    });
    });

    $(“#rctanglexport_btn”).click(function(){
    //绘制矩形
    clearMap();
    addInteraction(“Box”);
    });

    function addInteraction(value){
    var geometryFunction;
    switch (value) {
    case “Box”:
    value = ‘Circle’;
    geometryFunction = ol.interaction.Draw.createBox();
    break;
    case “Polygon”:
    value = ‘Polygon’;
    break;
    }
    //map.addLayer(drawlayer);

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » openlayers6地图全图以及框选截图导出功能(附源码下载)求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们