arcgis api for js入门开发系列二十一用HTML5 canvas绘制地图瓦片加载平移缩放

最新推荐文章于 2024-08-25 20:36:48 发布

置顶

唐娜玛丽

最新推荐文章于 2024-08-25 20:36:48 发布

阅读量3.6k

点赞数 1

分类专栏： ArcGIS API for JS 文章标签： ARCGIS SERVER WebGIS HTML5 canvas 瓦片加载平移缩放

本文链接：https://blog.csdn.net/sinat_34719507/article/details/59857470

版权

这篇博客介绍了如何使用HTML5的canvas结合ArcGIS API来模拟地图操作，包括瓦片加载、地图平移和缩放。作者指出，代码仅在Chrome中测试通过，IE10以下浏览器可能不兼容。文章强调了在canvas上绘制图像需要注意的加载事件，并详细说明了如何监听鼠标事件来实现平移和缩放功能。最后，作者提供了代码下载链接。

摘要由CSDN通过智能技术生成

终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。

一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta charset= 
         'utf-8' 
         > 
        
         <title>图片加载平移放大缩小示例</title> 
        
         <style> 
        
         html,body{
           
         margin:0px; 
        
         padding:0px; 
        
         } 
        
         canvas{
           
         border: 1px solid  
         #000; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body> 
        
         <canvas id= 
         "canvas"  
         width= 
         "800"  
         height= 
         "800" 
         ></canvas> 
        
         <script type= 
         "text/javascript"  
         src= 
         "main.js" 
         ></script> 
        
         </body> 
        
         </html>

 
         var  
         canvas,context; 
        
         function  
         int(){
           
         canvas=document.getElementById( 
         'canvas' 
         ); 
        
         context=canvas.getContext( 
         '2d' 
         ); 
        
         }