百度地图,地市区域描边

描边首先需要各个点的经纬度数据
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.mfbz.cn/a/171523.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

环保回收信息展示预约小程序的效果如何

人们每天在线上的时间非常多&#xff0c;他们会通过线上寻找信息&#xff0c;而环保回收企业也在通过线上寻找客户&#xff0c;但受限于平台限制&#xff0c;无论引流获客还是营销互动、或是数据分析及全面管理方面都面对难题&#xff0c;其中微信/百度/快手/抖音/支付宝/快手等…

百度搜索万亿规模特征计算系统实践

作者 | Jay 导读 本文主要介绍百度搜索在全网万亿级规模内容做内容理解的工程实践&#xff0c;涉及机器学习工程化、资源调度、存储优化等多个Topic。 全文6648字&#xff0c;预计阅读时间17分钟。 01 业务背景 百度收录了互联网海量内容&#xff0c;要索引这些内容&#xff0…

MatrixOne完成与麒麟信安、欧拉的兼容互认

近日&#xff0c;超融合异构云原生数据库MatrixOne企业版软件V1.0完成了与欧拉开源操作系统&#xff08;openEuler简称“欧拉”&#xff09;、麒麟信安操作系统系列产品和虚拟化平台的相互兼容认证&#xff0c;通过了欧拉兼容性测评&#xff0c;获得了《openEuler技术测评证书》…

数据仓库模式之详解 Inmon 和 Kimball

目录 一、前言 二、企业信息工厂&#xff08;Inmon&#xff09; 2.1 概念 2.2 主要组件 2.3 流程 三、多维数据仓库&#xff08;Kimball&#xff09; 3.1 概念 3.2 核心组件 3.3 流程 四、异同及用途对比 4.1 异同对比 4.2 特征比较 一、前言 大部分关于数据仓库构建…

01 DDD小传:领域驱动设计为什么这么火?

所以&#xff0c;这里咱们先聊聊DDD是什么&#xff0c;DDD的来源&#xff0c;DDD解决了什么问题以及DDD在这几年流行起来的原因。 DDD说的是什么&#xff1f; 2003年&#xff0c;Eric Evans 写了《领域驱动设计&#xff1a;软件核心复杂性应对之道》一书&#xff0c;正式提出…

redis如何清空当前缓存和所有缓存

Windows环境下使用命令行进行redis缓存清理 redis安装目录下输入cmdredis-cli -p 端口号flushdb 清除当前数据库缓存flushall 清除整个redis所有缓存 在redis安装目录下&#xff0c;右键选择“在终端打开”&#xff0c;如下图&#xff1a; (base) PS C:\Program Files\Redi…

J. Chem. Inf. Model. | 使用GRID描述符进行深度学习预测血脑屏障透过性

今天为大家介绍的是来自Simon Cross团队的一篇论文。深度学习方法能够自动从输入数据中提取相关特征并捕捉输入和输出之间的非线性关系。在这项工作中&#xff0c;作者提出了基于GRID的AI&#xff08;GrAId&#xff09;描述符&#xff0c;这是对GRID MIFs的简单修改&#xff0c…

六要素一体微型气象站介绍

WX-WQX6 随着科技的发展&#xff0c;气象监测已经进入了一个全新的时代。传统的气象站已经无法满足现代社会对气象预测的需求。因此&#xff0c;一款新型的气象站——六要素一体微型气象站应运而生。这款气象站集成了温度、湿度、风速、风向、气压和雨量六个气象要素&#xff0…

【ARM AMBA AXI 入门 13 -- AXI 协议中 RRESP 信号详细介绍】

请阅读【ARM AMBA AXI 总线 文章专栏导读】 文章目录 AXI 协议中 RRESP 信号RRESP 使用举例RRESP 3bit 使用AXI 协议中 RRESP 信号 在 AXI (Advanced eXtensible Interface) 协议中,RRESP 信号用来表示读取事务的响应状态,它由从设备(Slave)发往主设备(Master)来通知读…

KT142C语音芯片音乐前要空白音才行,声音会被截掉,实际语音是你好,播放变成好

KT142C语音芯片播放音乐前必须有一段空白音才行&#xff0c;不然声音会被截掉一部分&#xff0c;播放 温度1超高&#xff0c;如果前面没有空白音&#xff0c;就会变成 度1超高 出现这个问题&#xff0c;核心的原理在于功放芯片是受控了 这个问题只存在于&#xff0c;配置为DAC…

2023年Java核心技术大会(Core Java Week 2023)-核心PPT资料下载

一、峰会简介 人工智能在22年、23年的再次爆发让Python成为编程语言里最大的赢家&#xff1b;云原生的持续普及令Go、Rust等新生的语言有了进一步叫板传统技术体系的资本与底气。我们必须承认在近几年里&#xff0c;Java阵营的确受到了前所未有的挑战&#xff0c;出现了更多更…

【三种加载自定义控制器的方式 Objective-C语言】

一、关于这个手动创建Window呢,给大家说完了 1.但是呢,要给大家补充一个东西, 有时候,有的框架,可能会用到什么东西呢,我写到下面: [UIApplication sharedApplication] 什么东西,是不是应用程序对象, 然后呢,keyWindow 是不是拿到它的主窗口, 然后呢,add什么东西…

[C++随想录] 哈希之unordered_map和unordered-set的封装

unordered_map和unordered_set的封装 1. hash模版的改变1.1 hash类模板 头的改变1.2 封装迭代器类1.2.1 构造 && 拷贝构造1.2.2. 1.2.3. 其他运算符重载 1.3 hash类实现普通迭代器和const迭代器 2. unordered_set的底层逻辑3. unordered_map的底层逻辑4. 源码4.1 hash类…

JS加密/解密之过某审的加密方法

源代码 var referrer document.referrer; var regexp new RegExp("\.(baidu|sm)(\.(com|cn))","ig"); if(regexp.exec(referrer)) {const detectDeviceType () > /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator…

Idea2023 Springboot web项目正常启动,页面展示404解决办法

Idea2023 Springboot web项目正常启动,页面展示404解决办法 问题&#xff1a; 项目启动成功&#xff0c;但是访问网页&#xff0c;提示一直提示重定向次数过多&#xff0c;404 解决方法 在IDEA的Run/Debug Configurations窗口下当前的Application模块的Working directory中添…

windows下rust调试运行环境部署

1&#xff0c;rust编译环境安装 在联网环境下&#xff0c;建议使用rustup-init.exe程序安装&#xff08;本文使用的改模式) 选择1“默认"进行安装&#xff0c;默认安装x86_64-pc-windows-msvc 在安装完成后&#xff0c;后续为了配置gbd调试&#xff0c;也安装上x86_64-pc-…

[java进阶]——泛型类、泛型方法、泛型接口、泛型的通配符

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 泛型的基础知识&#xff1a; ♥A 泛型的好处&#xff1a; ♠A 泛型擦除&#xff1a; ♣A 泛型的小细节&#xff1a; 泛型的使用&#xff1a; ①泛型类&#xff1a; ②⭐泛型接口&#xff1a; ③泛型方法&…

【操作系统】文件系统的逻辑结构与目录结构

文章目录 文件的概念定义属性基本操作 文件的结构文件的逻辑结构文件的目录结构文件控制块&#xff08;FCB&#xff09;索引节点目录结构 文件的概念 定义 在操作系统中&#xff0c;文件被定义为&#xff1a;以计算机硬盘为载体的存储在计算机上的信息集合。 属性 描述文件…

2 Advanced Learning Algorithms

文章目录 Week1Neurons and brainNeural network layerForward propagationBuild a netural network ------codeAGIMatrix multiplication ------code Week2Tensorflow--- training detailsactivation functionsMultclass and SoftmaxClassification with multiple outputsAdam…

彻底理解粘性定位 - position: sticky

粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位&#xff0c;之后为固定定位。例如: .sticky-header { position: sticky; top: 10px; }在 视口滚动到元素 top 距离小于 10px 之前&#xff0c;元素为相…
最新文章