使用Javascript通过按钮添加和清除geojson？

使用Javascript通过按钮添加和清除geojson可以通过以下步骤实现：

首先，确保你已经引入了相关的Javascript库，如Leaflet.js和jQuery等。
创建一个HTML页面，并在页面中添加一个按钮和一个地图容器，用于显示地图和geojson数据。

<!DOCTYPE html>
<html>
<head>
  <title>添加和清除geojson</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="addButton">添加geojson</button>
  <button id="clearButton">清除geojson</button>
  <div id="map" style="width: 800px; height: 600px;"></div>

  <script>
    // 在这里编写Javascript代码
  </script>
</body>
</html>

在Javascript代码部分，首先创建一个Leaflet地图实例，并将其显示在地图容器中。

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(map);

接下来，定义一个函数来添加geojson数据到地图上。该函数将在按钮点击事件中调用。

function addGeojson() {
  // 使用jQuery的AJAX方法获取geojson数据
  $.ajax({
    url: 'path/to/your/geojson/file.geojson',
    dataType: 'json',
    success: function(data) {
      // 创建一个Leaflet的geojson图层，并将数据添加到地图上
      L.geoJSON(data).addTo(map);
    }
  });
}

类似地，定义一个函数来清除地图上的geojson数据。

function clearGeojson() {
  // 通过遍历地图上的图层，找到并移除geojson图层
  map.eachLayer(function(layer) {
    if (layer instanceof L.GeoJSON) {
      map.removeLayer(layer);
    }
  });
}

最后，将按钮的点击事件与相应的函数绑定。

$('#addButton').click(addGeojson);
$('#clearButton').click(clearGeojson);

现在，当你点击"添加geojson"按钮时，将会从指定的URL获取geojson数据，并将其添加到地图上。当你点击"清除geojson"按钮时，将会移除地图上的所有geojson数据。

请注意，以上代码仅为示例，你需要根据实际情况进行适当的修改和调整。另外，关于geojson的更多信息和应用场景，你可以参考腾讯云地理信息服务（GIS）相关产品，如腾讯云地图服务（https://cloud.tencent.com/product/tianditu）等。

相关·内容

使用jquary和javascript动态添加tr

使用js添加首先拿到json解析过的json对象，比如，var obj = eval(data);因为data可能存放的是对象，这里就假设是对象。根据对象里面的属性，添加几个td。...mode.lastTime; cell = row.insertCell(6); cell.innerHTML=mode.unit; //创建a和span...使用jq动态创建 for (var index in data) { var mode=data[index];//取出数组中的对象 var tr=$(".tbody...使用ajax请求的数据类型可以直接装换成json对象，我们这里直接拿出来用。通过jq之间获取到tbody，使用append()方法，后面直接可以写标签名，标签上直接使用样式和属性。下面配上图片。...这里js和jq效果是一样的。

2.1K2 0

使用Dajngo 通过代码添加xadmin用户和权限(组)

在开发的时候，用户要求在认证的时候自动添加xadmin登录账户和分配组权限 from django.contrib.auth.models import Group,User from django.http...account'] password=req.POST['password'] an=Group.objects.filter(id=1).first() #二级管理组是管理员在xadmin后台添加的权限组...LoginRequiredMixin,self).dispatch(request,*args,**kwargs) 写view的时候，直接继承LoginRequiredMixin，如果未登录，则跳转到登陆页面以上这篇使用...Dajngo 通过代码添加xadmin用户和权限(组)就是小编分享给大家的全部内容了，希望能给大家一个参考。

5863 1

设计高性能树形菜单，支持数十万条数据加载。

并且支持click事件，支持通过setData方法更新数据。这样树形菜单的样式和点击事件不是都有了吗？...每一行生成一个polygon，根据固定高度和宽度计算polygon所有坐标点。如果有子集按固定长度缩近生成polygon，并在每个polygon中设置属性，用于点击获取属性值。...去掉卫星图等其他图层，使用空白样式渲染。仅仅使用webgl框架渲染geojson数据，保障性能。...1 面层用于填充按钮背景 mian 2 线层对按钮描边 xian 3 符号层显示文字 dian arduino复制代码map.addLayer(.......添加点击事件 javascript复制代码//在面图层上监听点击事件 map.on('click', 'mian', function (e) { let prop = e.features[0

760 0

百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域

/obj3d-thinline 获取的数据，需要自己转GeoJSON数据，插件https://www.npmjs.com/package/geojson var GeoJSON = require('geojson...百度地图获取行政区域边界通过BMap.Boundary()，获取地图边界数据。...districtName").value; bdary.get(name, function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物...strokeColor: "#ff0000"}); //建立多边形覆盖物 console.log(rs.boundaries) map.addOverlay(ply); //添加覆盖物... map.setViewport(ply.getPath()); //调整视野 } }); } 百度地图的数据是火星坐标再加密的，个人不推荐使用百度地图上的数据获取到的经纬度

4K1 0

Cesium入门之八：Cesium加载矢量数据

KML支持3D地形图、标签、线、面、纹理和图片等元素。Cesium中，可以通过调用Cesium.KmlDataSource()实例来加载KML文件，并将其添加到图层中。.../public/data.czml'); GeoJSON格式 GeoJSON是一种常用的基于JavaScript对象表示法（JSON）的地理数据交换格式。...GeoJSON支持诸如点、线、面和多边形等地理要素的表示，并且可以和矢量数据结构相互转换。...在Cesium中，使用Cesium.GeoJsonDataSource.load()方法可以将本地的GeoJSON文件加载到图层中。...，只需要三步即可完成调用 1、创建viewer对象 2、使用Cesium.GeoJsonDataSource.load()方法加载GeoJSON数据 3、将加载的GeoJSON数据添加到viewer

3K4 1

ArcGIS Maps SDK for JavaScript系列之一：在Vue3中加载ArcGIS地图

三维地图功能：提供创建和展示三维地图的能力，支持倾斜、旋转和缩放三维场景。支持在三维场景中添加三维模型、地下管网、点云等。...用户交互和导航功能：提供默认的地图导航控制器，包括缩放控制、导航按钮和比例尺等。支持自定义用户交互功能，如地图点击事件、拖放等。...地图样式与配置：支持自定义地图样式、符号库和颜色主题。可以通过配置文件设置地图的默认视图、初始范围和坐标系等。...它使用标准的 import 和 export 语法，使代码更清晰、可维护性更高，同时支持 async/await 等现代 JavaScript 功能。...view.ui.components = [];来清除这些信息在view实例化后面添加这句代码view.ui.components = [];即可清除 const initArcGisMap = (

7074 0

Android Studio中通过CMake使用NDK并编译自定义库和添加预编译库

add_library() 配置so库信息（为当前当前脚本文件添加库） native-lib 这个是声明引用so库的名称，在项目中，如果需要使用这个so文件，引用的名称就是这个。...此外，so库文件都会在打包到.apk里面，可以通过选择菜单栏的Build- Analyze Apk…*查看apk中是否存在so库文件，一般它会存放在lib目录下。...${log-lib} ) 需要注意的是.so使用SHARED，.a使用STATIC。注意：预构建库：so文件和.a文件必须copy在src/main/jniLibs这个目录，才可以自动被打包。...android.intent.category.LAUNCHER" / </intent-filter </activity </application </manifest 总结以上所述是小编给大家介绍的Android Studio中通过...CMake使用NDK并编译自定义库和添加预编译库，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。

3.5K2 0

maptalks 开发手册-进阶篇

代码已竟可能全了，没有全贴是不想占太多空间；这里说一下，它的一些方法 layer.clear() ，他会清除图层上的所以东西； mark.remove() , 移除mark可以用这个，不过这个需要mark...drawTool = new maptalks.DrawTool({ mode: 'Point' }).addTo(this.mapEngine) // 默认是禁用的，当点击按钮后才能使用...() { _t.drawTool.disable() } }, { item: '清除...(geoJson) polygons.forEach(p => { // 该方法是旧版本方法，官方推荐使用toExtrudePolygon...有一点不同的是在maptalks.three里，setSymbol参数是传的材质对象来看效果图：不借助其他插件绘制3D 在不使用three.js 和 echarts的情况下，也可以通过它自身的面去搭建一个

5.9K3 0

MongoDB系列13：MongoDB查询操作符说明

: “david” } } ) $where 匹配满足JavaScript表达式的文档，使用$where操作符将包含JavaScript表达式的字符串或完整的JavaScript函数传递给查询系统。...2dsphere索引支持$geoIntersects操作符；$geoIntersects使用$geometry操作符定义GeoJSON对象。...$geoWithin运用$geometry操作符指定GeoJSON对象。 --查询完全存在于GeoJSON多边形内的所有loc数据。...2dsphere和2d索引支持$near。...--查询字段age是否在位置1和位置5有位清除。

1.8K4 0

大数据时代如何快速开发完成三维可视化应用？

搭建步骤： a.使用在线地图数据编辑器(本人使用的是GeoJSON)绘制城市相关建筑，填写相关数据，推荐保存为geojson格式; b.使用QGIS打开保存的.geojson文件，修改属性、微调地图数据...，以后都不会再弹出提示登录的页面了，编辑完图表保存后返回到ThingJS的“在线开发”中，点击刷新按钮，刷新项目，如果发现没有出现图表，别慌，这是对的，你需要右键.cht文件，进行编辑图表和预览。...搭建步骤： a.使用CamBuilder客户端搭建场景，给相关模型添加属性以便于控制; b.如有特殊模型，可通过3dsMax制作，或者在Sketchfab上下载免费可用的模型(注意CC版权的要求);...ThingJS-CityBuilder ThingJS专为搭建智慧城市开发了一款一键城市应用，使用CityBuilder在线工具，选择目标区域和模板，即可一键生成城市模型，同时也可以通过使用ThingJS...使用该项技术可广泛应用于房产导购、在线旅游、生产监控和安全培训等众多场合。

1.6K6 1

eCharts添加自定义geojson数据实现地图展示

概述：当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。...geojson数据生成： geojson数据的生成有很多种方式，在此介绍两种：1、通过gdal直接转换；2、通过geoserver生成。...1、通过gdal 通过gdal生成可参考文章GDAL的java环境配置以及将shp转换为json 2、通过geojson 在图层预览里面选择geojson即可，如下图。 ?.../plugin/jquery/jquery-1.8.3.js"> require.config({...return function (callback) { $.getJSON('data/' + geoJsonName + '.geojson

19.6K4 0

原生小案例：如何使用HTML5 Canvas构建画板应用程序

本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。...，包括工具栏（带有不同工具的按钮，如铅笔、画笔、橡皮擦）、颜色调色板、画笔大小选择下拉菜单、绘图画布、状态栏和清除按钮。...JavaScript 设置没有JavaScript功能，上述示例中的按钮、颜色样本和清除按钮将不会执行任何操作。...要使用绘图应用程序，您必须添加相应的JavaScript源代码来处理功能和与画布元素的交互。...这些事件监听器响应用户的鼠标点击、移动和值变化等操作。当触发时，相应的JavaScript函数根据用户的操作修改画布绘图上下文（ctx）。它从HTML文档中选择清除按钮并添加一个点击事件监听器。

3342 1

python与地理空间分析（一）

下面将简单介绍击中常用的数据格式： Shapefile文件使用最普遍的地理空间格式是Esri的Shapefile文件，可以通过arcgis软件或者第三方转换工具包将任意格式的矢量数据转换成Shapefile...GeoJSON文件 GeoJSON文件是基于JavaScript对象表示格式的一种新的、智能化的文本格式，已被主流的地理空间软件和大部分网站发布数据所采用，因为JavaScript是动态网页支持的语言，...GeoJSON能够和JavaScript无缝集成。...由于结构紧凑，使用JavaScript语法编写对于互联网格式友好，并且支持主流编程语言，GeoJSON也是当前流行的地理空间REST Web API的一个重要组件。三. 栅格数据格式 ?...TIFF文件可以通过添加标记数据进行扩展，GeoTIFF就是扩展定义的地理空间数据的存储，常用的后缀.tif,.tiff和.gtif。

7.9K5 2

深入理解javascript中的原型原型的概念使用原型给对象添加方法和属性使用原型对象的属性和方法原型的陷阱小结

原型prototype是javascript中极其重要的概念之一，但也是比较容易引起混淆的地方。我们需要花费一些时间和精力好好理解原型的概念，这对于我们学习javascript是必须的。...---- 使用原型给对象添加方法和属性不使用原型，使用构造函数给对象添加属性和方法的是通过this，像下面这样。...Paste_Image.png ---- 使用原型对象的属性和方法我们使用原型的对象和方法不会在直接在构造函数上使用，而是通过构造函数new出一个对象，那么new出来的对象就会有构造函数原型里的属性和方法...其实很好理解，javascript中对象是通过引用传递的，原型对象只有一份，不是new出一个对象就复制一份，所以我们对原型的操作和更新，会影响到所有的对象。这就是原型对象的实时性。 ?...Paste_Image.png 自身属性与原型属性这里涉及到javascript是如何搜索属性和方法的，javascript会先在对象的自身属性里寻找，如果找到了就输出，如果在自身属性里没有找到，那么接着到构造函数的原型属性里去找

4.2K3 0

maptalks 开发手册-入门篇

为何使用maptalks 做过地图的小伙伴们都知道，每个地图框架产商都与自家的地图资源进行绑定，如非常受欢迎的mapBox、高德、百度、腾讯等，你必须注册他们产品，获取key，然后调用的api，才能进行地图的相关操作...说到自主，作为中国人也是有亲身体会的，作物基因专利、光刻机、软件等等，由外国掌控核心技术，作为使用者的我们只能认栽吃瘪，maptalks是我们国人开源的一个地图框架，可以自定义我们的地图资源，不用第三方支持...Symbol-Reference 创建图层创建图层的方式有两种：在创建地图实例的同时创建图层： 2个参数，必填参数为第一个（id），第二个参数是options，是它的图层属性设置，一般默认就行，后面也可以通过图层对象进行设置...好，下载可以找一个数据来测试一下：地图选择器 (aliyun.com) 上面下载一个geojson的数据，名称随便，这里就说一下怎么用它的方法：首先要清除怎么添加几何面，使用layer.addGeometry...Geometry Polygon 提供了监听事件on和js的一样，这个没什么好说的，下面我就以geoJson创建的面为例： drawAreaPolygon(geoJson, layer) {

2.9K3 2

【翻译】GeoJSON格式规范-RFC7946

使用wkt和wkb能够很好到和其他系统进行数据交换，目前大部分支持空间数据存储的数据库构造空间数据都采用这两种方式。...自从2008年初次发表 (GJ2008) 以来，GeoJSON格式规范已经稳步的流行起来。它被广泛的用于JavaScript web映射库，和基于JSON的文档数据库，以及Web API中。...一些示例使用JavaScript单行注释（//）后跟省略号（...）作为占位符符号的组合，作为与作者无关的内容。在尝试验证这些JSON代码示例之前，这些占位符当然必须要删掉或者以其他方式被替换掉。...定义 JavaScript对象表示法（JSON）以及术语对象，成员，名称，值，数组，数字，true，false和null解释如RFC7159中所定义。...一般情况下，GeoJSON处理软件是不希望在访问坐标参考系统数据库或是通过网络访问坐标参考系统时去转换参数。

6.8K8 0

Leaflet在线地图进阶宝典——json素材操纵与图层面板控制

随着近期在json数据结构的理解不断加深，对于list结构和向量化运算的掌握也多有提高，这才能熟练的在leaflet系统中操控json数据。...本篇主要分为两大部分：如何自如的操纵json数据来打造leaflet所能识别的数据源和style属性；如何操控leaflet控制台版面中的地图图层和数据图层。...想要很好的理解本文，你需先对leaflet系统基础语法有所掌握（其实可视化的图层语法都大同小异，leaflet属于JavaScript语言打造的在线地图库，同D3、plotly、Rcharts以及Highcharts...=FALSE) 设置随机中非常必要，否则容易导致每次的效果都不一样： set.seed(1234) #向list对象中添加数据（随机数据） geojson3$features<-lapply(geojson3...内的各种参数） #这是通过增加地图图层来进行图层控制的简单案例： leaflet()%>% addTiles(group ="OSM (default)")%>% setView(lng=116.435889

2.8K3 0

geotrellis使用（二十六）实现海量空间数据的搜索处理查看

如果觉得这海不麻烦，那么当用户需要考察Landsat的云量或者NDVI的时候是不是又要用户自己打开数据并使用Arcgis等自行计算？...总体就是一个搜索框加一个按钮，然后发送搜索关键词到后台，后台返回数据列表，前台逐条展示之，单机每条数据的时候在地图中（地图框架采用leaflet）呈现此数据的情况，类似Google、百度。...leaflet可以简单的使用如下语句实现该功能： geoJsonOverlay = L.geoJson(geoJson); geoJsonOverlay.addTo(map); 其中map...为L.map('map')对象，geoJson就是想要添加的标记对象，此处用的是GeoJson，GeoJson简单来说就是将空间对象转成相应的json对象，便于交互、传输等。 ...具体元数据信息可以通过上面的数据检索获取，此处假设已经取到了空间范围的WKT标记对象，剩下的工作就是将WKT转成GeoJson，代码如下： import geotrellis.vector.io.json.Implicits

1.3K6 0

JSP 防止网页刷新重复提交数据

注意，这种方法清除的是最后一个访问历史记录，而不是全部的访问记录。点击后退按钮，再点击后退按钮，你可以看到这时打开的是本页面之前的页面！...本文介绍网络上可找到的各种禁用浏览器后退按钮方案，分析它们各自的优缺点和适用场合。一、概述　曾经有许多人问起，“怎样才能‘禁用’浏览器的后退按钮？”...因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！），然后再次编辑并提交表单向数据库插入新的记录。这是我们不愿看到的。 ...使用这种方法时，编程者的主要任务是创建一个会话级的变量，通过这个变量确定用户是否仍旧可以查看那个不适合通过后退按钮访问的页面。...那么，在那个我们不想让用户返回的页面是否也可以加入JavaScript代码呢？在这个页面中加入的JavaScript代码可用来产生点击前进按钮的效果，这样也就抵消了用户点击后退按钮所产生的动作。

11.5K2 0

geotrellis使用（四十二）将 Shp 文件转为 GeoJson

关于产品经理和研发的关系我还真得多说一句，虽然二者是天敌，但是一个懂研发的产品经理很容易和研发打交道，相互之间有很多的共同话题，每次项目来的时候我脑海中大概知道如何解决这件事情，甚至我还要帮项目对接的公司解决开发上的问题...话不多说，开始今天的主题，今天主要介绍如何将 Shp 文件转为 GeoJson，这在 QGIS、ArcGIS 等专业软件中很容易实现，只需要点个按钮就行了，本文正是来研究这点个按钮背后发生的故事。...本文是在使用 GeoTrellis 中碰到的，所以仍旧归入此博客集中，当然其中的框架等也都是基于 GeoTrellis 的。...一、实现方式 1.1 理论分析其实这个过程逻辑上比较简单，首先将 Shp 文件读入内存，再分别读出空间属性和普通属性，将二者组合起来按照 GeoJson 文件的格式写入即可。...此处我又要插一句，有很多同学通过各种方式咨询我关于 GeoTrellis 使用的问题，我在这里要做一下声明：首先，我知道的基本都毫无保留的写在博客里了，关于技术点问我和看我的博客差不多，我希望与大家一起探讨实现思路等方面的问题

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云