leaflet 渲染GeoJson(中国)数据

效果图:

 

<!--
 * @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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值