用leaflet在地图上绘制省的边界

最新推荐文章于 2024-03-17 21:46:44 发布
最新推荐文章于 2024-03-17 21:46:44 发布
阅读量3.9k 收藏 11
点赞数 1
分类专栏： leaflet 文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/workhard0905/article/details/107941518
版权

首先要下载要绘制省的geojson数据 

http://datav.aliyun.com/tools/atlas/#&lat=31.765537409484374&lng=104.2822265625&zoom=4

可以在该地址下载所需要的数据，（可以包含子区域，也可以不包含）

设置边框的样式

var style = {
    "color": "#ffffff", //边框颜色
    "weight": 3, //边框粗细
    "opacity": 0.4, //透明度
    "fillColor": 'transparent', //区域填充颜色
    "fillOpacity": 0, //区域填充颜色的透明
};
L.geoJSON(features,{style:style}).addTo(map); //features是指geojson数据

这样我们就可以用leaflet在地图瓦片中绘制某个省的区域边界了

 

 

天空中的星~
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
leaflet中有关边界的问题——getBounds，getPixelBounds ,getBoundsZoom
weixin_42598901的博客
11-25 5934
leaflet地图使用较为广泛，它的Api内容也比较多，不常使用者在前几次使用中会比较蒙圈，以下是自己的实践结果: 一、生成一个地图实例； this.map=L.map(document.getElementById("map"), { zoomControl:false, attributionControl:false, ...
geojson 离线 边界_使用leaflet绘制geoJson中国边界
weixin_39671621的博客
03-04 256
functiondrawChina(){//设置样式var myStyle ={"color": "#00f","weight": 2,"opacity": 0.5,"fillColor": 'red',"fillOpacity": 0,};//geojson数据var someFeatures =[{"type":"FeatureCollection","features":[{"type":"...
leaflet沿线标注_Leaflet 学习系列（三）标记以及矢量图
weixin_39895181的博客
12-22 2459
上文介绍了如何使用 Leaflet 加载地图，实际使用时我们不仅仅只加载地图，更多的会在地图上添加一些标记，结合聚合渲染等可视化效果，更清晰的呈现标记点的分布态势(比如添加银行网点的位置信息，附近的商圈信息等等)。也可以添加一些矢量图并设置不同的样式以及属性来区分不同的业务片区，更加直观的服务于业务(比如添加不同物流站点的配送信息以及站点的配送区域等等)。这些功能的实现则需要使用到 Leaflet...
Leaflet 官方教程 Extending Leaflet 扩展Leaflet
pyluyuan的专栏
03-17 1045
Leaflet的包很小，Leaflet 的核心包只提供了构造地图必须的功能，其他的功能像测量、标绘工具等通过第三方插件来实现。有赖于Leaflet强大的而简单的类架构及扩展体系，网络上有丰富的Leaflet插件，当你要实现一个功能时，例如热力图，大概总能从网上找到一款合适的插件，可以直接使用或者提供思路改造后使用。另一方面，这也造成了基于Leaflet开发的另一个问题，就是你需要花挺大一部分时间来选择合适的插件。无论如何，Leaflet的类扩展体系，绝对是其最精彩的部分之一。
Leaflet.SelectAreaFeature:通过在地图上绘制区域来选择要素的插件
05-24
Leaflet.SelectAreaFeature 通过在地图上绘制区域来选择要素的插件。 支持使用1.2.0测试的Leaflet 1.0.0+分支。 启用此插件后，用户只需按住鼠标左键并移动它，即可在地图上绘制区域。 作为开发人员，您可以获取该区域边界框中的图层。 一旦有了图层的实例，就可以单独操作它们。 特征 轻松启用 轻松禁用它 在物体周围画一个区域 获取所有选定对象的实例，或者仅获取多边形，折线，标记，矩形和圆的实例 操作选定的特征 可定制的 例子 在这里您可以找到一个 用法 使用npm install leaflet-selectareafeature在您JavaScript项目中包括npm install leaflet-selectareafeature 。 然后，您可以通过添加以下HTML标记（以下路径是相对于项目根目录的路径），在您的Web应用程序中包括Leafl
leaflet地图中添加边界
写代码脑子疼
11-11 1019
一、阿里云的生成编辑可以现在生成相应边界的api或者图片（参数中的url就是生成的json文件。所以如果是生成的api边界就是需要用。是请求json数据的方法，支持跨域。方法获取解析出的json数据，再用。刚接触leaflet做个记录。
leaflet在地图上绘制省份、区县边界
博客简介
02-21 1244
leaflet在地图上绘制省份、区县边界
esri-leaflet地图加载（geojson数据绘制边界）
孙霸天的专栏
08-19 7341
这两天一直琢磨如何在leaflet的地图上加载地图，查看过官方文档后发现可以使用geojson这个方法来加载我们所需要的地图边界（矢量的边界）。 我所使用的数据是国家2000的投影坐标系，要想在leaflet的地理坐标系系的图上展示边界的话，必须要把投影坐标系转换为地理坐标系，既（国家2000----wgs84），方法很简单使用arcgis的坐标转换工具就可以实现，但由于不知道转换的七参数，所以...
leaflet+geoJSON实现绘制区域边界和边界高亮效果
zcylyzhi4的博客
12-04 6130
先展示下效果图： 具体代码如下： geoJSON绘制边界 initNewMap(){ var myStyle = { "color": "#00f", "weight": 2, "opacity": 0.5, "fillColor": 'red', "fillOpacity": 0, }; let JsonUrl = 'http://192.168.37.129:22221/assets/images/
Leaflet.Plot:在传单地图上绘制文字\图像\形状
05-03
单张图 在传单地图上绘制文字\图像\形状
Python 使用folium绘制leaflet地图的实现方法
12-25
leaflet为R语言提供了API很好用，这次尝试用Python使用leaflet，需要folium 安装folium pip install folium 一个小例子 import folium import re input = open('C:\\Users\\Administrator\\Desktop\\a.txt','r') ...
leaflet-sea-routes:在海上两点之间绘制路线
05-14
传单海上路线一个小叶插件，用于使用和在两个给定点之间绘制海上路线。代码示例// Define coordinatesvar source = [ 0 , 0 ] ;var destination = [ - 37 , 37 ] ;// Get visuals or the array of the pathvar curve...
Leaflet.GeographPhotos:在传单地图上绘制地理照片！
05-28
传单地理图片在传单地图上绘制地理照片！ 扩展了最出色（而且非常小！）的Leaflet.Photo插件， //blog.mastermaps.com/2014/08/showing-geotagged-photos-on-leaflet-map.html，但集成了调用Geograph API的加载方式...
用AIDA模型，分析知乎、小红书和Facebook的广告效果.docx
06-02
用AIDA模型，分析知乎、小红书和Facebook的广告效果.docx
pd27.py1111111111111
最新发布
06-02
pd27.py1111111111111
234_基于微信小程序的车位预约系统的设计与实施-源码.zip
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯.txt
06-02
蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯蓝桥杯
ipython-0.13.1-py2.7.egg
06-01
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
在vue3环境中利用canvas绘制出leaflet地图边界的经纬度刻度和数值；不使用其他插件
07-13
在Vue 3环境中，您可以使用HTML5的canvas元素和Leaflet库来绘制地图边界的经纬度刻度和数值。以下是一个简单的示例代码： ```html <template> <div> <canvas ref="mapCanvas"></canvas> </div> </template> <script> import { ref, onMounted } from 'vue' export default { name: 'Map', setup() { const mapCanvas = ref(null) onMounted(() => { const canvas = mapCanvas.value const ctx = canvas.getContext('2d') // 设置画布尺寸 canvas.width = window.innerWidth canvas.height = window.innerHeight // 绘制地图边界的经纬度刻度和数值 ctx.fillStyle = 'black' ctx.font = '12px Arial' // 绘制经度刻度和数值 for (let i = -180; i <= 180; i += 10) { const x = (i + 180) * (canvas.width / 360) ctx.beginPath() ctx.moveTo(x, 0) ctx.lineTo(x, canvas.height) ctx.fillText(i.toString(), x, 12) ctx.stroke() } // 绘制纬度刻度和数值 for (let i = -90; i <= 90; i += 10) { const y = (90 - i) * (canvas.height / 180) ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(canvas.width, y) ctx.fillText(i.toString(), 5, y + 5) ctx.stroke() } }) return { mapCanvas } } } </script> ``` 在上面的代码中，我们使用`ref`来创建一个对canvas元素的引用`mapCanvas`，然后在组件渲染后的`onMounted`钩子函数中获取canvas的上下文对象`ctx`，设置画布尺寸，并使用`ctx.beginPath()`、`ctx.moveTo()`、`ctx.lineTo()`、`ctx.fillText()`和`ctx.stroke()`方法来绘制刻度和数值。 请注意，上面的示例仅绘制了经度和纬度的刻度和数值，如果您需要绘制地图边界的其他元素，可以根据Leaflet库提供的相关方法进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值