leaflet 渲染GeoJson(中国)数据

最新推荐文章于 2024-05-26 09:49:42 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-05-26 09:49:42 发布

阅读量617

点赞数

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.csdn.net/qq_37550440/article/details/123922875

版权

leaflet 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

效果图：

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-19 16:28:57
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 16:52:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./data.json"></script>
<style>
  .box {
    position: absolute;
    left: 200px;
    top:50px;
    z-index: 10000;
  }
  button {
    width: 100px;
  }
  .red {
    color: red;
  }
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div>


</head>
<body>
 <script>
var map = L.map('map').setView([31.869952349588598, 117.21450805664062], 5);
var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
var mylayerGroup2
L.tileLayer(wpUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

let style = {
  fillColor: "#e5dada",
  fillOpacity:.4,
  weight: 1 ,
  color: "#306bff"
}
let style2 = {
  fillColor: "yellow",
  fillOpacity: 0.4,
  color: 'yellow'
}
function highlightFeature(e) {
  if(mylayerGroup2) {
      mylayerGroup2.clearLayers()
  }
  let layer2 = L.geoJSON(e.target.feature, {
      style: function (feature) {
          return {
          fillColor: "yellow",
          fillOpacity: 0.4,
          color: 'yellow',
        };
      }
  })
  layer2.on('mouseover',function(e){
    console.log(e);
  var popup = L.popup();
      popup.setLatLng([e.latlng.lat,e.latlng.lng])
          .setContent(`<span>name:</span> <span>${e.layer.feature.properties.name}</span>`)
          .openOn(map);
  })
  mylayerGroup2 = L.layerGroup([layer2])
  
  map.addLayer(mylayerGroup2)
}

let geoJsonLayer = L.geoJson(data, {
  style,
  onEachFeature: (feature, layer) => {//onEachFeature回调  关键方法
    if (onEachFeature) {
　　　　　　onEachFeature(feature, layer); }
　　 }
}).addTo(map);

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,//鼠标移入事件
        // mouseout: resetHighlight,//鼠标移出事件
        // click: zoomToFeature//鼠标点击事件
    });
}
</script>
</body>
</html>

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
leaflet 渲染GeoJson(中国)数据

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&.
复制链接

扫一扫

专栏目录