地图上绘制多边形

简介: 根据输入的一组点的坐标,生成对应的封闭多边形。实现代码<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

根据输入的一组点的坐标,生成对应的封闭多边形。

实现代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>显示多边形</title>
        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
        <script src="http://webapi.amap.com/maps?v=1.3&key=5bc7ab8efc62334c67887ecd3c21a3a7"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script>
        $(document).ready(function(){
                var map;
                map = new AMap.Map('mapContainer', {
                    resizeEnable: true,
                    center: [116.397428, 39.90923],
                    zoom: 13
                });

                map.plugin(["AMap.ToolBar"],function(){
                    toolBar=new AMap.ToolBar();
                    map.addControl(toolBar);
                });

            function add_circle(x, y, color) {
                circle = new AMap.Circle({
                    center:new AMap.LngLat(x, y),
                    radius:10,
                    strokeColor: color,
                    strokeOpacity: 1,
                    strokeWeight: 3,
                    fillColor: color,
                    fillOpacity: 3
                });
                circle.setMap(map);
            }

            function add_marker(x, y, index){
                var marker = new AMap.Marker({ //添加自定义点标记
                    map: map,
                    position: [x, y], //基点位置
                    offset: new AMap.Pixel(-5, -5), //相对于基点的偏移位置
                    draggable: true,  //是否可拖动
                    content: "<p style='font-size:10px; color:blue'>"+index+"</p>"   //自定义点标记覆盖物内容
                });
                marker.setMap(map);
            }

            function add_polygon(polygonArr){
                var  polygon = new AMap.Polygon({
                    path: polygonArr,//设置多边形边界路径
                    strokeColor: "#FF33FF", //线颜色
                    strokeOpacity: 0.2, //线透明度
                    strokeWeight: 3,    //线宽
                    fillColor: "#1791fc", //填充色
                    fillOpacity: 0.35//填充透明度
                });
                polygon.setMap(map);
            }

            $('#show').click(function(){
                //map.clearMap();
                var polygonArr=new Array();
                var p;
                var points=$.parseJSON($('#content').val());

                add_circle(points[0][0]/1000000, points[0][1]/1000000, "red");

                for(var i=0;i<points.length;i++) {
                    p=points[i];
                    var x = p[0]/1000000;
                    var y = p[1]/1000000;
                    polygonArr.push([x, y]);
                    add_circle(x, y, 'blue');
                    add_marker(x, y, i);
                } 

                add_polygon(polygonArr);
                add_circle(p[0]/1000000, p[1]/1000000, "green"); 

                map.setZoomAndCenter(13, new AMap.LngLat(p[0]/1000000, p[1]/1000000));
            });                

        });
        </script>

        <style>
            #content {
                height: 600px;
                width: 100%;
            }
            #mapContainer {
                height: 600px;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>显示多边形</h1>
            </div>

            <div class="row">
                <div class="col-md-5">
                    <textarea id="content" placeholder="[[116530000,39540000],[116330000,39640000],[116510000,39840000],[116730000,39560000]]"></textarea>
                </div>
                <div class="col-md-7">
                    <div id="mapContainer"></div>
                </div>
            </div>
            <row class="row">
                <input type= "button" id="show" value="Show" class="btn btn-default col-md-1"/>
                <span class="text-danger col-md-6">红色为起点,绿色为终点,蓝色为中间结点,数字为结点编号</span>
            </row>

    </body>
</html>

实现效果

显示多边形

目录
相关文章
|
3天前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
157353 24
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
5天前
|
人工智能 API 网络安全
用DeepSeek,就在阿里云!四种方式助您快速使用 DeepSeek-R1 满血版!更有内部实战指导!
DeepSeek自发布以来,凭借卓越的技术性能和开源策略迅速吸引了全球关注。DeepSeek-R1作为系列中的佼佼者,在多个基准测试中超越现有顶尖模型,展现了强大的推理能力。然而,由于其爆火及受到黑客攻击,官网使用受限,影响用户体验。为解决这一问题,阿里云提供了多种解决方案。
16982 37
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
5天前
|
并行计算 PyTorch 算法框架/工具
本地部署DeepSeek模型
要在本地部署DeepSeek模型,需准备Linux(推荐Ubuntu 20.04+)或兼容的Windows/macOS环境,配备NVIDIA GPU(建议RTX 3060+)。安装Python 3.8+、PyTorch/TensorFlow等依赖,并通过官方渠道下载模型文件。配置模型后,编写推理脚本进行测试,可选使用FastAPI服务化部署或Docker容器化。注意资源监控和许可协议。
1310 8
|
13天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama:快速本地部署模型,创建个性化 AI 助手
3416 117
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
|
8天前
|
人工智能 自然语言处理 API
DeepSeek全尺寸模型上线阿里云百炼!
阿里云百炼平台近日上线了DeepSeek-V3、DeepSeek-R1及其蒸馏版本等六款全尺寸AI模型,参数量达671B,提供高达100万免费tokens。这些模型在数学、代码、自然语言推理等任务上表现出色,支持灵活调用和经济高效的解决方案,助力开发者和企业加速创新与数字化转型。示例代码展示了如何通过API使用DeepSeek-R1模型进行推理,用户可轻松获取思考过程和最终答案。
|
5天前
|
人工智能 自然语言处理 程序员
如何在通义灵码里用上DeepSeek-V3 和 DeepSeek-R1 满血版671B模型?
除了 AI 程序员的重磅上线外,近期通义灵码能力再升级全新上线模型选择功能,目前已经支持 Qwen2.5、DeepSeek-V3 和 R1系列模型,用户可以在 VSCode 和 JetBrains 里搜索并下载最新通义灵码插件,在输入框里选择模型,即可轻松切换模型。
934 14
|
12天前
|
API 开发工具 Python
阿里云PAI部署DeepSeek及调用
本文介绍如何在阿里云PAI EAS上部署DeepSeek模型,涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡,部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤,并附有测试结果和参考文档链接。
1938 9
阿里云PAI部署DeepSeek及调用
|
9天前
|
人工智能 数据可视化 Linux
【保姆级教程】3步搞定DeepSeek本地部署
DeepSeek在2025年春节期间突然爆火出圈。在目前DeepSeek的网站中,极不稳定,总是服务器繁忙,这时候本地部署就可以有效规避问题。本文以最浅显易懂的方式带读者一起完成DeepSeek-r1大模型的本地部署。

热门文章

最新文章