zoukankan      html  css  js  c++  java
  • web前端利用turf.js生成等值线、等值面

    样例如下:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>等值线的生成</title>
        <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
        <style>
            #map
            {
                height: 2000px;
                 1500px;
            }
        </style>
        <script src="Script/leaflet/leaflet.js"></script>
        <script src="Script/leaflet/leaflet.ChineseTmsProviders.js"></script>
        <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    </head>
    <body>
        <div id="map"></div>
        
    </body>
        <script>
            var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
                maxZoom: 18,
                minZoom: 1
            }),
                normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
                    maxZoom: 18,
                    minZoom: 1
                }),
                imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
                    maxZoom: 18,
                    minZoom: 1
                }),
                imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
                    maxZoom: 18,
                    minZoom: 1
                });
     
            var normal = L.layerGroup([normalm, normala]);
            image = L.layerGroup([imgm, imga]);
     
            var baseLayers = {
                "地图": normal,
                "影像": image,
            }
     
            var overlayLayers = {
                "图": normal,
                "像": image,
            }
     
            var map = L.map("map", {
                center: [31.59, 120.29],
                zoom: 12,
                layers: [normal],
                zoomControl: false
     
            });
            // 创建等值线区域
            var extent = [0, 30, 20, 50];
            var cellWidth = 100;
            var pointGrid = turf.pointGrid(extent, cellWidth, { units: 'miles' });
     
            for (var i = 0; i < pointGrid.features.length; i++) {
                pointGrid.features[i].properties.temperature = Math.random() * 10;
            }
            console.log(pointGrid.features.length);
            //等值线的级数
            var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     
            var lines = turf.isolines(pointGrid, breaks, { zProperty: 'temperature' });
            //设置颜色
            var myStyle = {
                "color": "#ff7800",
                "weight": 5,
                "opacity": 0.65
            };
            //进行平滑处理
                var _lFeatures = lines.features;
                for(var i=0;i<_lFeatures.length;i++){
                    var _coords = _lFeatures[i].geometry.coordinates;
                    var _lCoords = [];
                    for(var j=0;j<_coords.length;j++){
                        var _coord = _coords[j];
                        var line = turf.lineString(_coord);
                        var curved = turf.bezierSpline(line);
                        _lCoords.push(curved.geometry.coordinates);
                    }
                    _lFeatures[i].geometry.coordinates = _lCoords;
                }
            //geojson数据读取
            L.geoJSON(lines, {
                style: myStyle
            }).addTo(map);
        </script>
    </html>

    原文地址:https://blog.csdn.net/weixin_40184249/article/details/81198282

    另外一个文章地址:http://www.cnblogs.com/naaoveGIS/p/6142226.html

  • 相关阅读:
    Unity5.0 手动激活
    日文“表” php 会报错
    U3D 精灵的点击监听
    Android 数据库ORM框架GreenDao学习心得及使用总结<一>
    Eclipse 打包过滤 Log.e
    Android SQLite系列
    Android Material Design调色板
    Android Studio系列教程六--Gradle多渠道打包
    Android 模块化编程之引用本地的aar
    使用 Chrome 来调试你的 Android App
  • 原文地址:https://www.cnblogs.com/tiandi/p/10124712.html
Copyright © 2011-2022 走看看