BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

鼠標繪制點線面

編輯時間：2017-09-03

以上效果完整HTML+JS代碼示例：

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <title>百度離線地圖鼠標繪制點線面示例</title>
 <style type="text/css">
         body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
         #allmap{width:100%;height:100%;}
 </style>
 <!-- 引入核心js文件 -->
 <script type="text/javascript" src="js/apiv.2.0.js"></script>
 <!--加載鼠標繪制工具-->
 <script type="text/javascript" src="js/DrawingManager_min.js"></script>
 <link rel="stylesheet" href="css/DrawingManager_min.css" />
 </head>
 <body>
 <div id="allmap"></div>
 </body>
 </html>
 <script type="text/javascript">
         // 創建Map實例
      map = new BMap.Map("allmap");
         // 設置地圖背景色為白色
      map.getContainer().style.background = '#FFF';
         var point = new BMap.Point(104.074362,36.540276);
         // 顯示地圖
      map.centerAndZoom(point, 5);
         //-------顯示衛星地圖----
         map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));
 
         map.enableScrollWheelZoom();
         var overlays = [];
         var overlaycomplete = function(e){
         overlays.push(e.overlay);
         };
         var styleOptions = {
         strokeColor:"red",    //邊線顏色。
         fillColor:"red",      //填充顏色。當參數為空時，圓形將沒有填充效果。
         strokeWeight: 3,       //邊線的寬度，以像素為單位。
         strokeOpacity: 0.8,       //邊線透明度，取值范圍0 - 1。
         fillOpacity: 0.6,      //填充的透明度，取值范圍0 - 1。
         strokeStyle: 'solid' //邊線的樣式，solid或dashed。
         }
         //實例化鼠標繪制工具
      var drawingManager = new BMapLib.DrawingManager(map, {
         isOpen: false, //是否開啟繪制模式
        enableDrawingTool: true, //是否顯示工具欄
        enableCalculate: true, //開啟測量面積、距離
        drawingToolOptions: {
              anchor: BMAP_ANCHOR_TOP_LEFT, //位置
          offset: new BMap.Size(5, 5), //偏離值
        },
           circleOptions: styleOptions, //圓的樣式
        polylineOptions: styleOptions, //線的樣式
        polygonOptions: styleOptions, //多邊形的樣式
        rectangleOptions: styleOptions //矩形的樣式
      });
 
         //添加鼠標繪制工具監聽事件，用于獲取繪制結果
      drawingManager.addEventListener('overlaycomplete', overlaycomplete); 
         // 清除繪制結果
     function clearAll() {
         for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
           }
           overlays.length = 0
         }
 </script>

谷歌離線地圖

產品與服務

行業解決方案

數據展示方案

新聞資訊

支持與幫助

郵箱：1810053410@qq.com

電話：028-65472965/400-028-7262

地址：成都市高新區環球中心E5 8樓 3-2-802/804

BIGEMAP GIS Office是一款GIS領域國產自主化基礎軟件，提供了上百種數據格式的處理與轉換，支持多投影方式互轉；將GIS技術應用到各行業的數據編輯、處理、GIS制圖出圖、GIS項目工程、數據服務等。支持的數據格式：shp shpfile kml kmz cad dwg dxf gpx txt csv excel mbtiles osgb 3Dtiles jpg png tiff geotiff web json 柵格地圖、矢量地圖、衛星圖像、航拍影像、地形圖、等高線、道路圖層、矢量數據等等相關數據集；提供了CGCS2000、WGS84、Xi'an80、Beijing54等投影相互轉化；數據集的服務發布一鍵完成并提供離線地圖二次開發的接口。

在線客服(直接聊)

微信掃碼添加客服

400-028-7262