supermMap 画圆

最新推荐文章于 2024-06-21 09:02:15 发布

madexu00

最新推荐文章于 2024-06-21 09:02:15 发布

阅读量635

点赞数 1

本文链接：https://blog.csdn.net/madexu00/article/details/79916291

版权

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择中心点画圆</title>
<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
   background: #fff;
}

#map {
   position: relative;
   height: 520px;
   border: 1px solid #3473b7;
}

#toolbar {
   position: relative;
   height: 33px;
   padding-top: 5;
}
</style>
<script src='../libs/SuperMap.Include.js'></script>
<script type="text/javascript">
   //生命需要的变量
   var local, map, layer, vectorLayer, markerLayer, drawPoint, centersArray = [], weightsArray = [],
   n = 0, point,style = {
       strokeColor : "#304DBE",
       strokeWidth : 1,
       pointerEvents : "visiblePainted",
       fillColor : "#304DBE",
       fillOpacity : 0.4},
   url1 = "http://114.251.53.254:8090/iserver/services/map-TZ_MapWorkSpace/rest/maps/TZMap";//改成自己的
   //加载地图
   function init() {
       vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
       drawPoint = new SuperMap.Control.DrawFeature(vectorLayer,
               SuperMap.Handler.Point);
       //添加drawPoint触发事件
       drawPoint.events.on({
           "featureadded" : drawCompleted
       });
       map = new SuperMap.Map("map", {
           controls : [ new SuperMap.Control.LayerSwitcher(),
                   new SuperMap.Control.ScaleLine(),
                   new SuperMap.Control.Zoom(),
                   new SuperMap.Control.Navigation({
                       dragPanOptions : {
                           enableKinetic : true
                       }
                   }), drawPoint ],
           units : "m"
       });
       layer = new SuperMap.Layer.TiledDynamicRESTLayer("tongzhou", url1, {
           transparent : true,
           cacheEnabled : true
       }, {
           maxResolution : "auto"
       });
       layer.events.on({
           "layerInitialized" : addLayer
       });
       vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
       markerLayer = new SuperMap.Layer.Markers("Markers");
   }
   //REST异步加载
   function addLayer() {

       map.addLayers([ layer, vectorLayer, markerLayer ]);
       map.setCenter(new SuperMap.LonLat(116.708, 39.840), 11, false, false);
   }
   //选择中心点点击事件
   function selectCenters() {
       clearElements();
       //激活drawPoint控件，触发drawCompleted(drawGeometryArgs)函数
       drawPoint.activate();
   }
   function drawCompleted(drawGeometryArgs) {
       //获取圆中心点
       point = drawGeometryArgs.feature.geometry,
       size = new SuperMap.Size(44, 33),
       offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
       icon = new SuperMap.Icon("../theme/images/marker.png", size, offset);
       //给中心点添加marker
       markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x,
               point.y), icon));
       console.info("point.x="+point.x);
       console.info("point.y="+point.y);
       //销毁drawPoint
       drawPoint.deactivate();
       centersArray.push(point);
       n++;
       weightsArray.push(400 + n * 100);
       //当点击获取中心点是直接画圆
       //getCirle(point);

   }
   //提交函数
   function findServiceAreas() {
       //调用画圆的函数
       getCirle(point);
   }
   //画圆函数
   function getCirle(point) {
       //sides画圆参数要大于20
       var sides = 50;
       //中心点
       var origin = point;
       //画圆
       var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(origin,0.01,sides);//0.01是半径
       //添加到矢量图层
       var lineVector = new SuperMap.Feature.Vector(polygon);
       vectorLayer.addFeatures(lineVector);
   }
   //清除函数
   function clearElements() {
       n = 0;
       centersArray = [];
       weightsArray = [];
       markerLayer.clearMarkers();
       vectorLayer.removeAllFeatures();
   }
</script>
</head>
<body οnlοad="init()">
   <div id="toolbar">
       <input type="button" value="选择中心点" οnclick="selectCenters()" /> <input
           type="button" value="提交" οnclick="findServiceAreas()" /> <input
           type="button" value="清除" οnclick="clearElements()" />
   </div>
   <div id="map"></div>
</body>
</html>

madexu00

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
supermMap 画圆

&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;选择中心点画圆&lt;/title&gt;&lt;style type="text/css"
复制链接

扫一扫