leaflet 渲染省份

流氓也是种气质 _Cookie

已于 2022-04-22 15:19:02 修改

阅读量333

点赞数

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

于 2022-03-20 09:45:22 首次发布

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

版权

leaflet 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

效果图：

代码块：

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-19 16:28:57
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 17:58: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="./river1.json"></script>
<style>
  .box {
    position: absolute;
    left: 200px;
    top:50px;
    z-index: 10000;
  }
  button {
    width: 100px;
  }
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div>


</head>
<body>
 <script>
   console.log(river)
   
var map = L.map('map').setView([30.3367385888597, 120.135198302847], 5);
// var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';

// L.tileLayer(wpUrl, {
// attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);

// map.setView([31.864942016, 117.2882028929])


// L.tileLayer.wms("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full", {
//   layers:'name', //需要加载的图层名
//   format:"image/png",
//   transparent:true,
//   crs: L.CRS.EPSG4326
// }).addTo(map);
let optoins = {
  showRiverName: ['四川省']
}
let layer1  = L.geoJSON(river, {
              id: "RIVER_COLOR",
              style: function(geoJsonFeature) {
                // console.log(geoJsonFeature)
                // let color = "#306bff"
                // let color1 = "rgba(0,0,0,0)"
                // let nameClass=geoJsonFeature.properties.DJ * 1>4?"fz24":"fz24"
                // geoJsonFeature.properties.name = geoJsonFeature.properties.SSHL // 自定义name
                // if (optoins.hidRiverName && optoins.hidRiverName.indexOf(geoJsonFeature.properties.SSHL) != -1) {
                //   color = color1
                //   addText(geoJsonFeature.properties)
                // } else {
                //   addText(geoJsonFeature.properties, nameClass)
                // }
                color = "#306bff"
                addText(geoJsonFeature.properties)
                if (optoins.showRiverName) {
                  if (optoins.showRiverName.indexOf(geoJsonFeature.properties.name) != -1) {
                    color = "#306bff"
                  } else {
                    color = "#fff"
                  }
                }
                console.log(color)
                
                return {
                    fillColor: color,
                    fillOpacity: 1,
                    weight: 2,
                    color: "#000"
                  }
              }
        }).on("click", function(e) {
          console.log(e)
        })
        .bindPopup(function (layer) {
          return `name:${layer.feature.properties.name}`
        })  
          // return layer.feature.properties.description;
        //  把这一组图层Layer放到同一个图层组layerGroup
        mylayerGroup = L.layerGroup([layer1])
        // 把图层组layerGroup添加到地图
        map.addLayer(mylayerGroup)

function addText(data, className) {
  // console.log(data)
  if(!data.name) {
    return
  }
  let myIcon = L.divIcon({
    html: data.name,
    className: className ? className : 'my-div-icon',
    iconSize: 60,
  });
  let center = data.centroid ? data.centroid : data.center
  let marker = L.marker([center[1], center[0]], {
    icon: myIcon
  })
  map.addLayer(marker);
}
 </script>
</body>
</html>

数据来源：http://datav.aliyun.com/portal/school/atlas/area_selector

流氓也是种气质 _Cookie

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
leaflet 渲染省份

效果图：代码块：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF.
复制链接

扫一扫