Canvas or 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"
   include="iclient9-leaflet,iclient9-leaflet-css,leaflet.draw,leaflet.markercluster"></script>
</head>
<body>
   <div id="map"
       style="width: 500px;height: 500px;left:0px;position: fixed;"></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);
   //**************************************************宝物位置**************************
   //下边是Canvas绘制
   var canvasMap;
   var ctx;
   //程序执行入口
   function readyAddImg() {
       var id = "map";
       canvasMap = document.createElement('canvas'); //准备空画布document.getElementById("mapImg");
       ctx = canvasMap.getContext("2d");
       canvasMap.width = document.getElementById(id).width;
       canvasMap.height = document.getElementById(id).height;
       addMapFunNew(id);
       setTimeout(function () { addMapFunNew(id);}, 1000);
   }

   //定义画布
   function addMapFunNew(id) {
       $("#"+id+" img").each(function(k, y) {
           if(y.alt != "SuperMap iClient"){
               var PointXY = y.style.transform;
               var ArrayPointXY = PointXY.split("px");
               var PointX = ArrayPointXY[0].substr(12,ArrayPointXY[0].length);
               var PointY = ArrayPointXY[1].substr(2,ArrayPointXY[1].length);
               newImage(canvasMap,y.src,parseFloat(PointX),parseFloat(PointY));
           }
       });
   }

   //Canvas将Img添加到画布中
   function newImage(canvasMap,ImgUrl, x, y) {
       var img = new Image();
       img.setAttribute("crossOrigin", 'Anonymous');
       img.src = ImgUrl;
       ctx.drawImage(img, x, y, 256, 256);
   }

   //保存canvas画布到png图片
   function saveMap() {
       var canvas = canvasMap;
       //3. 图片导出为 png 格式
       var type = 'png';
       var imgData = canvas.toDataURL(type);
       // 加工image data，替换mime type
       imgData = imgData.replace(_fixType(type), 'image/octet-stream');
       // 下载后的图片名
       var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
       // download
       saveFile(imgData, filename);
   }

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

   function saveFile(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);
   };



   //**************************************************宝物位置**************************
   //下边是SVG绘制
   /* var imgObj;

}

   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);

       // 加工image data，替换mime 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;

Canvas or Svg 绘制地图、地图转图片、实例代码、dome code

Canvas or Svg 绘制地图

猜你喜欢