我是靠谱客的博主 安静黑猫,最近开发中收集的这篇文章主要介绍高德地图实现矩形围栏绘制和编辑,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

demo-效果图
在这里插入图片描述
在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>地图搜索与拖拽选址</title>
  <style>
    #mapContainer{
      position: relative;
      width: calc(100vw-20px);
      height: calc(100vh - 30px);
      background: #fff;
      z-index: 1;
      overflow: hidden;
    }
    .searchBox{
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 2;
    }
    .searchBox #keyword{
      height: 30px;
      line-height: 30px;
      width: 260px;
      padding: 0 5px;
    }
    .searchResult{
      position: absolute;
      bottom: 50px;
      left: 30px;
      z-index: 2;
      height: 100px;
      width: 400px;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      cursor: default;
    }
    .button-group{
      position: absolute;
      bottom: 50px;
      right: 30px;
      z-index: 2;
    }
  </style>



</head>
<body>
<div id="mapContainer">
  <div class="searchBox">
    <input id='keyword' type="text" placeholder="请输入查询地点">
  </div>
  <div class="searchResult">
      <p>
        <span>经纬度:</span>
        <span id="lnglat"></span>
      </p>
      <p>
        <span>地址:</span>
        <span id="address"></span>
      </p>

  </div>

<div class="button-group">
  <input type="button" class="button" value="开始绘制矩形" onClick="editor.startDrawPolygon()"/>
  <input type="button" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
  <input type="button" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
</div>
</div>


<div style="display: none">
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=${这里是你的地图key值}&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Geocoder,AMap.MouseTool,AMap.PolyEditor"></script>
  <script src="http://webapi.amap.com/ui/1.0/main.js?v=202112071452"></script>
  <script>
    var geocoder = null //逆地理位置
    var editor={};
   AMapUI.loadUI(['misc/PositionPicker'],PositionPicker => {
         // 初始化用户区域为地图中心点
         const mapConfig = {
              zoom: 15, // 地图缩放级别
              center: ['117.227237', '31.820513'], 
              lang: "zh_cn" 
            }
          let mapView = new AMap.Map('mapContainer', mapConfig);
           // 构造点标记
            // var m3 = new AMap.Marker({
            //   position: [117.224362,31.820447],
            //   icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
            // });
            // mapView.add(m3);
            //拖拽地图
            var positionPicker = new PositionPicker({
            mode: 'dragMarker',//dragMap:拖拽地图,dragMarker:拖拽点
            map: mapView,
            iconStyle: { //自定义外观
                url: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
                ancher: [24, 40],
                size: [24, 30]
            }
        });

        positionPicker.on('success', function (positionResult) {
            //拖拽成功的回调 positionResult里有你想要的东西
            // console.log('拖拽',positionResult)
            document.getElementById('lnglat').innerHTML = positionResult.position.lng+ ','+positionResult.position.lat;
            document.getElementById('address').innerHTML = positionResult.address;
        });
        positionPicker.start();
        //搜索提示
        AMap.plugin('AMap.Autocomplete', function () {
          // 实例化Autocomplete
          var autoOptions = {
            city: '合肥',
            input: "keyword"
          }
         var auto = new AMap.Autocomplete(autoOptions)
         var placeSearch = new AMap.PlaceSearch({
            pageSize: 5,
            pageIndex: 1,
            citylimit: false,
			     	map: mapView,
            city: '合肥' //默认城市
		    	});
          AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发
			    AMap.event.addListener(auto, "error", onError); //注册监听,当选中某条记录时会触发
			//解析定位正确信息
			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name); //关键字查询查询
				var info = e.poi;//地理信息
				console.log(info)
        document.getElementById('lnglat').innerHTML = info.location.lng+ ','+info.location.lat;
        document.getElementById('address').innerHTML = info.district+ info.address;
			}
			//解析定位错误信息
			function onError(data) {
				console.log("定位失败")
			}
    })

    // 围栏功能
    // var path = [
    //     [117.104327,31.848806],
    //     [117.217452,31.854784],
    //     [117.103641,31.81497],
    // ]

    // var polygon = new AMap.Polygon({
    //     path: path,
    //     strokeColor: "#1E9FFF",
    //     strokeWeight: 2,
    //     // strokeStyle: 'dashed',
    //     strokeOpacity: 1,
    //     fillOpacity: 0.1,
    //     fillColor: '#1E9FFF',
    //     zIndex: 50,
    // })

    // mapView.add(polygon)
    // // 缩放地图到合适的视野级别
    // mapView.setFitView([polygon])
    // mapView.setFitView();
    //绘制多边形
    var mouseTool = new AMap.MouseTool(mapView);
    editor.startDrawPolygon = function(){
        mouseTool.rectangle();
        mouseTool.close()
    }
    //编辑多边形
    editor.startEditPolygon=function(){
      // mouseTool.close()
        editor._polygonEditor= new AMap.PolyEditor(mapView, mapView.getAllOverlays('polygon')[1]);
        //注意通过map.getAllOverlays("polygon")对象获得的是一个数组,故取数组第一个对象
        editor._polygonEditor.open();
    }
    editor.closeEditPolygon=function(){
        // editor._polygonEditor.close();
       var lnglagList = editor._polygonEditor.on()
      
      //获取经纬度数组
        var arr = []
        lnglagList.pl[0].forEach(element => {
            arr.push( [element.lng,element.lat])
          });
     
        var polygon = new AMap.Polygon({
                path: arr,
                strokeColor: "#1E9FFF",
                strokeWeight: 2,
                strokeStyle: 'dashed',
                strokeOpacity: 1,
                fillOpacity: 0.1,
                fillColor: '#1E9FFF',
                zIndex: 50,
            })
      console.log('arr经纬度数组',arr)
      //  mapView.add(polygon)
    // 缩放地图到合适的视野级别
     // mapView.setFitView([polygon])


    editor._polygonEditor.close();
        
    }
 })

  </script>
</div>
</body>
</html>

围栏功能部分代码

 // 围栏功能
    //绘制多边形
    var mouseTool = new AMap.MouseTool(mapView);
    editor.startDrawPolygon = function(){
        mouseTool.rectangle();
        // mouseTool.close()
    }
    //编辑多边形
    editor.startEditPolygon=function(){
        mouseTool.close() //关闭新绘制围栏功能
        editor._polygonEditor= new AMap.PolyEditor(mapView, mapView.getAllOverlays('polygon')[0]);
        //注意通过map.getAllOverlays("polygon")对象获得的是一个数组,故取数组第一个对象
        editor._polygonEditor.open();
    }
    editor.closeEditPolygon=function(){
       var lnglagList = editor._polygonEditor.on()
        //获取经纬度数组
        var arr = []
        lnglagList.pl[0].forEach(element => {
            arr.push( [element.lng,element.lat])
          });
      console.log('arr经纬度数组',arr)  
    //   mapView.add(polygon)
    // // 缩放地图到合适的视野级别
    // mapView.setFitView([polygon])
    //关闭编辑
    editor._polygonEditor.close();
        
    }

最后

以上就是安静黑猫为你收集整理的高德地图实现矩形围栏绘制和编辑的全部内容,希望文章能够帮你解决高德地图实现矩形围栏绘制和编辑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部