获取地图转成图片技术分析

最新推荐文章于 2023-11-23 17:12:08 发布

宇神城主_蒋浩宇

最新推荐文章于 2023-11-23 17:12:08 发布

阅读量1.5w

点赞数 2

分类专栏：地图转图片地图 map 文章标签：地图截图地图转图片

本文链接：https://blog.csdn.net/weixin_42749765/article/details/81431197

版权

地图转图片同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

地图

2 篇文章 0 订阅

订阅专栏

map

2 篇文章 0 订阅

订阅专栏

Canvas实现技术详细步骤

   1.获取当前div大小

   2.获取div中所有图片

   3.获取div中图片存在位置left top

   4.遍历当前地图中的图片

       4.1分清地图层次
       4.2先遍历最下层画最下层到最上

   5.将canvas画布设置大小宽高和div一样

       5.1创建画布

       5.2设置2d状态
           getContext('2d');

       5.3调用画图方法
           drawImage(img, 10, 10);
           context.drawImage(img,x,y,width,height);
           context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

   7.将地图中的每张图片添加到画布中设置图片起始位置和大小



项目风险分析：
   1.Svg技术实现不了，因为目前img标签在svg中转换没成功！

代码：

  
<html>
<head>
<title></title>
 <script type="text/javascript" src="./framework/jquery_2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./framework/iclient/include-leaflet.js" ></script>
</head>
<body >
    <div id="map" style="width: 500px;height: 500px;left:0px;position: fixed;background-color:#2ad027;">
        123
        <img src="https://img-blog.csdnimg.cn/2022010617170440536.png">
<!--         <img alt="" role="presentation" src="http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/tileImage.png?width=256&amp;height=256&amp;redirect=false&amp;transparent=false&amp;cacheEnabled=true&amp;origin=%7B%22x%22:-20037508.342789244,%22y%22:20037508.342789244%7D&amp;overlapDisplayed=false&amp;scale=3.3803271432053105e-9&amp;x=0&amp;y=0" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(128px, 0px, 0px); opacity: 1;"> 
 -->    </div>
    
    <div id="mapImg" style="position: fixed;right:2px;top:0px;height: 600px;width:600px;border:1px solid #000;"></div>
    
    <div style="position:fixed;bottom:20px;">
        <input type="button" value="生成SVG图片" onClick="printMap('map')" />
        <input type="button" value="下载PNG图片" onClick="saveMap()" />
    </div>
    
</body>
<script type="text/javascript">
    var host = "http://support.supermap.com.cn:8090";
    var map, url = host + "/iserver/services/map-world/rest/maps/World";
      map = L.map('map', {
        crs : L.CRS.EPSG4326,
        center : [ 0, 0 ],
        renderer: L.svg(),
        maxZoom : 18,
        zoom : 1
    });
    L.supermap.tiledMapLayer(url).addTo(map); 

    var imgObj;

    function printMap(id) {
        //1.将div转成svg
        var divContent = document.getElementById(id).innerHTML;
        //防止#号问题
        var newData = "";
        for(var i = 0; i < divContent.length; i++){
            if(divContent.substr(i,1) == "#"){
                newData += '%23';
            }else{
                newData += divContent.substr(i,1);
            }
        } 
        //将图片转成所有base64
        
        var data = "data:image/svg+xml,"
                + "<svg id='abcdddd' xmlns='http://www.w3.org/2000/svg' width='500' height='500'>"
                + "<foreignObject width='100%' height='100%'>"
                + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>"
                + newData + "</div>" + "</foreignObject>" + "</svg>";
        
        
        var img = new Image();
        img.src = data;
        
        document.getElementById(id + "Img").appendChild(img);
        imgObj = img;

    }

    function saveMap() {
        var img = imgObj;//document.getElementById("ssssssssssss").getElementsByTagName("img");
        //2.svg转成canvas
        var canvas = document.createElement('canvas'); //准备空画布
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
        context.drawImage(img, 0, 0);

        //var a = document.createElement('a');
        //a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
        //a.download = "MapByMathArtSys";  //设定下载名称
        //a.click(); //点击触发下载

        //3. 图片导出为 png 格式
        var type = 'png';
        var imgData = canvas.toDataURL(type);

        imgData = imgData.replace(_fixType(type), 'image/octet-stream');
        // 下载后的图片名
        var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
        // download
        saveFile(imgData, filename);
    }

    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };

    var saveFile = function(data, filename) {
        var save_link = document.createElementNS(
                'http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
                false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    
    //将图片转成base64数据格式
    function toBase64(id){
        //#target是目标图标,我们需要将其转换为base64格式
        var c=document.createElement("canvas");
        //设置canvas宽高为图片宽高
        c.width=$(id).width;
        c.height=$(id).width;
        //将图片绘制到canvas
        var cxt=c.getContext("2d");
        var img=new Image();
        img.src=$(id).attr('src');
        
        cxt.drawImage(img,0,0);
        //得到图片的base64编码数据
        var dd=c.toDataURL();
        //log出图片base64数据
        return dd;
    }
    
    
</script>
</html>

mail:1251767927@qq.com

宇神城主_蒋浩宇

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
获取地图转成图片技术分析

Canvas实现技术详细步骤 1.获取当前div大小 2.获取div中所有图片 3.获取div中图片存在位置left top 4.遍历当前地图中的图片 4.1分清地图层次 4.2先遍历最下层画最下层到最上 5.将canvas画布设置大小宽高和div一样 ...
复制链接

扫一扫