WebGIS二次开发-10-地图导出图片下载

团子WebGIS

已于 2023-02-22 11:09:29 修改

阅读量184

点赞数 2

分类专栏： GIS javascript WebGIS 文章标签： es6 javascript 前端经验分享 ecmascript Powered by 金山文档

于 2023-02-22 10:39:29 首次发布

本文链接：https://blog.csdn.net/bguihiub/article/details/129157844

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

1、导入FileSaver.js

<script src="https://lib.baomitu.com/FileSaver.js/2.0.5/FileSaver.js"></script>

2、设置数据源跨域

crossOrigin: "Anonymous"

const key = '8a5c2b00e94b49659861e064c37f778d'
/* 天地图矢量图层 */
const TianDiMap_vec = new ol.layer.Tile({
  title: "天地图矢量图层",
  source: new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' +
    key,
    wrapX: false,
    crossOrigin: "Anonymous"
  })
})
/* 天地图注记图层 */
const TianDiMap_cva = new ol.layer.Tile({
  title: "天地图矢量注记图层",
  source: new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +
    key,
    wrapX: false,
    crossOrigin: "Anonymous"
  })
})

3、下载

<body>
    <button onclick="exportImg()">导出图片</button>
    <div id="map_container">

    </div>
    <script>
        var map = new ol.Map({
            target: "map_container",
            layers: [TianDiMap_vec, TianDiMap_cva],
            view: new ol.View({
                center: [114, 30],
                projection: 'EPSG:4326',
                zoom: 4
            })
        })

        function exportImg() {
            map.once('postcompose', function (event) {
                const canvas = event.context.canvas
                console.log(canvas)
                canvas.toBlob(function (blob) {
                    console.log(blob)
                    saveAs(blob, 'map.png')
                })
            })
            map.renderSync()
        }
    </script>
</body>

4、如果是图层中有地图文档，也需设置跨域

var docLayer = new Zondy.Map.Doc("",docName , {
    ip: "localhost",
    port: 6163,
    crossOrigin: "Anonymous"
});

团子WebGIS

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
WebGIS二次开发-10-地图导出图片下载

【代码】WebGIS二次开发-10-地图导出图片下载。
复制链接

扫一扫

专栏目录

WebGIS二次开发-10-地图导出图片下载

1、 导入FileSaver.js

2、设置数据源跨域

3、下载

4、如果是图层中有地图文档，也需设置跨域

1、导入FileSaver.js