zoukankan      html  css  js  c++  java
  • 阿里云地图添加点线面

    1、参考实例网址:http://ditu.aliyun.com/jsdoc/map/examples.html

    2、实例代码:

    /**
     * --------add marker---------------------
     */
    var amarker,addMarkerListener;
    
    function  activateAddMarker(){
          addMarkerListener=AliEvent.addListener(map,"click",function(point){
            var latlng=map.fromContainerPixelToLatLng(point);
            var lonlat=point.x+","+point.y;
            if(amarker!=null) map.clearOverlays();
            amarker=new AliMarker(latlng,{draggable:true});
            var lsResultDiv=$('#result').html(lonlat);
            map.addOverlay(amarker);
         });
    }
    
    /**
     * ---------remove addmarker listener------------------
     */
    
    function  deactivateAddMarker(){
        AliEvent.removeListener(addMarkerListener);
    }
    /**
     * ---------add polyline------------------
     */
    var polyline;
    function activeAddPolyline(){
         //先初始化一个空的折线
        polyline=new AliPolyline([]);
        //必须先添加到地图才能允许用户绘制
        map.addOverlay(polyline);
        AliEvent.addListener(polyline,"drawstart",onDrawStart);
        AliEvent.addListener(polyline,"drawend",onDrawEnd);
        //开始让用户在地图上绘制折线
        polyline.startDrawing();
        //可编辑
        polyline.startEditting();
    }
    
    /**
     * ---------add polyline functions------------------
     */
    function startDraw(){
           polyline.setPoints([]);
           polyline.startDrawing();
    }
    function endDraw(){
           polyline.endDrawing();
    }
    function onDrawStart(){
         document.getElementById("drawStatus").innerHTML="draw start";
    }
    function onDrawEnd(){
         document.getElementById("drawStatus").innerHTML="draw  end ";
    }
    //edit polyline---
    function startLineEdit(){
          polyline.startEditting();
    }
    function endLineEdit(){
         polyline.endEditting();
    }
    
    function deactiveAddPolyline(){
         polyline=null;
    }
    /**
     * -----add polygon-------------------
     */
    var polygon;
    function activateAddPolygon(){
         //先建立一个空的多边形
         polygon=new AliPolygon([]);
         //必须先添加到地图才能允许用户绘制
         map.addOverlay(polygon);
         AliEvent.addListener(polygon,"drawstart",onDrawPolygonStart);
         AliEvent.addListener(polygon,"drawend",onDrawPolygonEnd);
         //开始多边形的绘制
         polygon.startDrawing();
         //可编辑
         polygon.startEditting({disableIntersection:true});
    }
    
    /**
     * ---------add polygon functions------------------
     */
    function startDraw(){
         polygon.setPoints([]);
         polygon.startDrawing();
    }
    function endDraw() {
         polygon.endDrawing();
    }
    function onDrawPolygonStart(){
       document.getElementById("drawStatus").innerHTML="Polygon start";
    }
    function onDrawPolygonEnd(){
       document.getElementById("drawStatus").innerHTML="Polygon end  ";
    }
    function startPolygonEdit(){
            polygon.startEditting();
    }
    function endPolygonEdit(){
           polygon.endEditting();
    }
    function deactivateAddPolygon(){
            polygon=null;
    }
    
    /**
     * ---------绘制矩形------------------
     */
    var rect;
    function activatePolygonFoure(){
         rect=new AliRectOverlay();
         map.addOverlay(rect);
         AliEvent.addListener(rect,"drawstart",onSideDrawStart);
         AliEvent.addListener(rect,"drawend",onSideDrawEnd);
         //开始绘制矩形
         rect.startDrawing();
        rect.startEditting();
    }
    /**
     * --------add circle---------------------
     */
    var oval;
    function addCircle(){
     //绘制以center为中心,3000米为直径的正圆
     oval=new AliOvalOverlay(map.getProjection().getSquare(map.getCenter(),3000),{editSymbolCtl:128});
     map.addOverlay(oval);
     oval.startEditting({keepRatio:true});
    }
  • 相关阅读:
    fastjson异常(字符串集合转成字符串数组)
    从url中下载资源(目前测试只有照片,文件类的没有进行测试)
    springboot+mybatisplus进行整合并且使用逆向工程
    maven使用
    maven-相关配置
    【深入】java 单例模式(转)
    jdbcTemplate的配置
    Spring JdbcTemplate 的使用与学习(转)
    spring 第一篇(1-1):让java开发变得更简单(下)转
    context:exclude-filter 与 context:include-filter 转
  • 原文地址:https://www.cnblogs.com/boonya/p/2433955.html
Copyright © 2011-2022 走看看