百度地图,地市区域描边

news2024/11/18 16:22:53

描边首先需要各个点的经纬度数据
json数据下载

在这里插入图片描述
直接复制粘贴进入页面ctrl+s保存就可以了。
如果需要某省中的各个地市描边可以点击这个省的进行下载,这里以山东为例,我是先下载了山东的json数据,但是发现只有山东省下各个市的描边,于是又下了中国的数据,把山东的再复制到山东省json里。在这里插入图片描述
json粘贴后效果。文件名为370000_full.json

js描边代码(map 是地图实例,自己看着改名)

//根据地址编码描边(以adcode=370100进行演示。即济南市描边)
function getLngLatOutline(adcode) {
	//解析json(这里使用了jq解析json,这里可以根据自己项目情况进行修改)
    $.getJSON(`${prcs}/js/unicom/assetMarket/baiduMap/370000_full.json`, function(data) {
        //第一层是要画几块区域
        for(let d0 of data.features){
            if (adcode==d0.properties.adcode){
                console.log(`第一层,地市名:${d0.properties.name},需要描边数量${d0.geometry.coordinates.length}`)
                //清空覆盖物(不必要,自己看项目情况要还是不要)
                map.clearOverlays();
                //添加中心标点(不必要,自己看项目情况要还是不要,这一行是项目封装的,有需要自己写一下,这里不赘述)
                addMaker(d0.properties.center[0], d0.properties.center[1], true, d0.properties["name"], d0.properties["name"]);
                //视野跳转至中心(不必要,自己看项目情况要还是不要)
                map.flyTo(new BMapGL.Point(d0.properties.center[0], d0.properties.center[1]), 12);

                //第二层中的[0]是描边具体经纬度。
                for(let d1 of d0.geometry.coordinates){
                    console.log("第二层,经纬度点位数量"+d1[0].length)
                   //经纬度描边集合
                    let pointLngLatList=d1[0].map(lngLat=>{
                        return new BMapGL.Point(lngLat[0],lngLat[1]);
                    })
                    var polygon = new BMapGL.Polygon(pointLngLatList, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形描边
                    map.addOverlay(polygon);//增加多边形描边

                }

            }
        }
    })
}

js百度地图标点,鼠标悬浮展示信息(与描边无关)

/**
 * 增加标记(与描边无关)
 * @param lng 经度
 * @param lat 纬度
 * @param flag 是否增加信息提示窗口
 * @param width 窗口宽度
 * @param height 窗口高度
 * @param title 窗口标题
 * @param message 窗口显示内容
 */
function addMaker(lng, lat, flag, title, message) {
    let point = new BMapGL.Point(lng, lat);
    var marker= new BMapGL.Marker(point);  // 创建标注
    map.addOverlay(marker);
    //字母数字个数
    let shuziCount=shuzi(title);
    if (flag) {
        // 将标注添加到地图中
        let opts = {
            title: title, // 信息窗口标题
            width : (title.length-shuziCount)*16+(shuziCount*10),// 信息窗口宽度
            offset: new BMapGL.Size(4, -24)//设置偏移量
        }
        let messStr=`<div>${message}</div>`
        // 创建信息窗口对象
        let infoWindow = new BMapGL.InfoWindow(messStr, opts);

        //鼠标移入开启
        marker.addEventListener("mouseover", function () {
            map.openInfoWindow(infoWindow, point);
        });
        //鼠标移出关闭
        marker.addEventListener("mouseout", function () {
            //关闭信息窗口
            map.closeInfoWindow();
        });
    }
    return marker;
}

//统计英文数字字符数量
function shuzi(words) {
    let sum=0;
    for (let i = 0; i < words.length; i++) {
        let c = words.charAt(i);
        if (c.match(/[a-zA-Z0-9]/)) {
            sum++;
        }
    }
    return sum;
}

效果:
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1233563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习卷积神经网络垃圾分类系统 - 深度学习 神经网络 图像识别 垃圾分类 算法 小程序 计算机竞赛

文章目录 0 简介1 背景意义2 数据集3 数据探索4 数据增广(数据集补充)5 垃圾图像分类5.1 迁移学习5.1.1 什么是迁移学习&#xff1f;5.1.2 为什么要迁移学习&#xff1f; 5.2 模型选择5.3 训练环境5.3.1 硬件配置5.3.2 软件配置 5.4 训练过程5.5 模型分类效果(PC端) 6 构建垃圾…

弄懂Rust编程中的Trait

1.定义 trait trait 定义了某个特定类型拥有可能与其他类型共享的功能。可以通过 trait 以一种抽象的方式定义共享的行为。可以使用 trait bounds 指定泛型是任何拥有特定行为的类型。 一个类型的行为由其可供调用的方法构成。如果可以对不同类型调用相同的方法的话&#xff…

【C#二开业务冠邑】通过界面查看数据来源

前言 重构框架&#xff08;CS【C#】转BS【Java】&#xff09;时&#xff0c;突然发现公司的代码和数据库&#xff0c;有部分都没有写注释&#xff0c;嘎嘎&#xff0c;这不非常影响开发效率&#xff0c;于是乎&#xff0c;开始帮公司整理表结构和数据来源&#xff0c;也从而加…

ACREL DC energy meter Application in Indonesia

安科瑞 华楠 Abstract: This article introduces the application of Acrel DC meters in base station in Indonesia.The device is measuring current,voltage and energy together with hall current sensor. 1.Project Overview This company is located in Indonesia a…

企业省钱大法:如何通过更好的采购支出管理节省开支

在探讨如何通过更好的支出管理来增加利润之前&#xff0c;先来了解一下什么是支出管理。 支出管理是指通过收集、维护、分类和审查支出数据&#xff0c;来降低采购成本的过程。其目的还包括提高效率、监控工作流程以及保持合规性。 支出管理流程影响到整个采购周期的众多活动…

“三面一体”的业务调度方案在运营商订单运营的实践

在当前信息化时代&#xff0c;运营商的业务流程复杂度和多样性持续增长&#xff0c;多个系统、部门以及相关事务需要进行高效准确的调度。如何在这样的背景下&#xff0c;保证业务流程的顺畅&#xff0c;业务信息的实时传递以及业务决策的准确性&#xff0c;是业务运营面临的重…

KT142C语音芯片搭配HAA2018功放,两个板子,一个声音正常一个没有声音

KT142C芯片搭配HAA2018功放&#xff0c;焊了两个板子&#xff0c;一个声音正常&#xff0c;一个没有声音&#xff0c;该如何分析解决问题呢&#xff1f; 客户提出来的这个问题&#xff0c;原理图如下&#xff1a;分析问题的步骤如下&#xff1a; 可以看出来芯片的原理图部分没有…

深度了解LinkedBlockingQueue底层实现原理

文章目录 前言一、Queue接口的定义二、AbstractQueue实现Queue的基本操作1.AbstractQueue源码注释解析2.方法add、remove、element、clear、addAll的实现原理 三、BlockingQueue接口定义解析1.入列操作2.出列操作3.其他操作 四、LinkedBlockingQueue源码解析1.LinkedBlockingQu…

基于JAVA+SpringBoot+VUE+微信小程序的前后端分离咖啡小程序

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着社会的快速发展和…

报错!Jupyter notebook 500 : Internal Server Error

Jupyter notebook 报错 500 : Internal Server Error 问题背景 tensorflow-gpu环境&#xff0c;为跑特定代码专门开了一个环境&#xff0c;使用conda安装了Jupyter notebook&#xff0c;能够在浏览器打开Jupyter notebook&#xff0c;但是notebook打开ipynb会报错。 问题分析…

基于单片机的公共场所马桶设计(论文+源码)

1.系统设计 本课题为公共场所的马桶设计&#xff0c;其整个系统架构如图2.1所示&#xff0c;其采用STC89C52单片机为核心控制器&#xff0c;结合HC-SR04人体检测模块&#xff0c;压力传感器&#xff0c;LCD1602液晶&#xff0c;蜂鸣器&#xff0c;L298驱动电路等构成整个系统&…

7-tcp 三次握手和四次挥手、osi七层协议,哪七层,每层有哪些?tcp和udp的区别?udp用在哪里了?

1 tcp 三次握手和四次挥手 2 osi七层协议&#xff0c;哪七层&#xff0c;每层有哪些 3 tcp和udp的区别&#xff1f;udp用在哪里了&#xff1f; 1 tcp 三次握手和四次挥手 # tcp协议---》处于osi7层协议的传输层&#xff0c;可靠连接&#xff0c;使用三次握手&#xff0c;四次挥…

一文详解!SRM(供应商管理)助力实现采购端实现降本增效

供应商管理关系到企业各部门的正常运转&#xff0c;一个好的SRM供应商管理系统对于公司来说无疑是锦上添花&#xff0c;改善企业与供应商的关系&#xff0c;可以帮助企业实现采购端的降本增效。但在信息化转型的浪潮下&#xff0c;很多企业SRM信息化却遇到不少问题。 那么请花…

媒体格式转换软件Permute 3 mac中文版软件特点

Permute mac是一款媒体格式转换软件&#xff0c;可以帮助用户快速地将各种音频、视频和图像文件转换成所需格式&#xff0c;并提供了一些常用工具以便于用户进行编辑和处理。 Permute mac软件特点 - 支持大量格式&#xff1a;支持几乎所有常见的音频、视频和图像格式&#xff…

redis---非关系型数据库

关系数据库与非关系型数据库 redis非关系型数据库&#xff0c;又名缓存型数据库。数据库类型&#xff1a;关系型数据库和非关系型数据库关系型数据库是一 个机构化的数据库,行和列。 列&#xff1a;声明对象。 行&#xff1a;记录对象属性。 表与表之间的的关联。 sql语句&…

leetcode算法之分治-归并

目录 1.排序数组2.数组中的逆序对3.计算右侧小于当前元素的个数4.翻转对 1.排序数组 排序数组 //分治-归并 class Solution {int tmp[50010]; public:vector<int> sortArray(vector<int>& nums) {mergeSort(nums,0,nums.size()-1);return nums;}void mergeS…

Java核心知识点整理大全7-笔记

目录 4.1.9. JAVA 锁 4.1.9.1. 乐观锁 4.1.9.2. 悲观锁 4.1.9.3. 自旋锁 4.1.9.4. Synchronized 同步锁 Synchronized 作用范围 Synchronized 核心组件 Synchronized 实现 4.1.9.5. ReentrantLock Lock 接口的主要方法 非公平锁 公平锁 ReentrantLock 与 synchronized …

[⑤ADRV902x]: TES (Transceiver Evaluation Software) 使用

前言 在ADI官网的ADRV902x系列的参考设计软件包&#xff08;地址&#xff1a;https://www.analog.com/cn/products/adrv9029.html#product-requirement &#xff09;中包含了GUI软件TES (Transceiver Evaluation Software)。软件实用的功能非常多&#xff0c;比如可以用界面的…

【C++上层应用】6. 信号 / 中断

文章目录 【 1. signal 函数 】【 2. raise函数 】 信号是由操作系统传给进程的 中断&#xff0c;会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上&#xff0c;可以通过按 CtrlC 产生中断。有些信号不能被程序捕获&#xff0c;但是下表所列信号可以在程序中捕…

山西电力市场日前价格预测【2023-11-22】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-11-22&#xff09;山西电力市场全天平均日前电价为13.55元/MWh。其中&#xff0c;最高日前电价为243.27元/MWh&#xff0c;预计出现在18:00。最低日前电价为0.00元/MWh&#xff0c;预计出现…