美文网首页开源
OpenLayers、geojson矢量图

OpenLayers、geojson矢量图

作者: Felix_Fang | 来源:发表于2019-03-14 15:45 被阅读1次

OpenLayers的官网,下面简称ol。
官方的描述:OpenLayers可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块,矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。它是完全免费的开源JavaScript,根据2条款BSD许可证(也称为FreeBSD)发布。


官网的有关于矢量图的例子,大概长这样子:

Image Vector Layer示例图
官方例子代码部分:
<!DOCTYPE html>
<html>
  <head>
    <title>Image Vector Layer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import GeoJSON from 'ol/format/GeoJSON.js';
      import VectorLayer from 'ol/layer/Vector.js';
      import VectorSource from 'ol/source/Vector.js';
      import {Fill, Stroke, Style, Text} from 'ol/style.js';


      var style = new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new Text()
      });

      var map = new Map({
        layers: [
          new VectorLayer({
            renderMode: 'image',
            source: new VectorSource({
              url: 'data/geojson/countries.geojson',
              format: new GeoJSON()
            }),
            style: function(feature) {
              style.getText().setText(feature.get('name'));
              return style;
            }
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 1
        })
      });

      var featureOverlay = new VectorLayer({
        source: new VectorSource(),
        map: map,
        style: new Style({
          stroke: new Stroke({
            color: '#f00',
            width: 1
          }),
          fill: new Fill({
            color: 'rgba(255,0,0,0.1)'
          })
        })
      });

      var highlight;
      var displayFeatureInfo = function(pixel) {

        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });

        var info = document.getElementById('info');
        if (feature) {
          info.innerHTML = feature.getId() + ': ' + feature.get('name');
        } else {
          info.innerHTML = '&nbsp;';
        }

        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }

      };

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
      });

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });
    </script>
  </body>
</html>

这部分代码是需要联网接入js的,不知道是不是我网的问题,反正就是连不上。最好是使用官网下载本地的js。坑爹的玩意,本地js又不能用import ,所以得改。改法官网上我也没看到有,大致我是这样猜想,可能会有错:

//把import 的注释掉
//import Map from 'ol/Map.js';
var map = new Map({})
这种Map直接在前面加ol-->var map = new ol.Map
//import View from 'ol/View.js';
这个也是跟Mpa一样,import 的是ol/View.js。把/换成点. 
//import VectorLayer from 'ol/layer/Vector.js';
var featureOverlay = new VectorLayer({})
这种VectorLayer 和ol/layer/Vector.js不对称的,直接把VectorLayer 换成ol.layer.Vector
如var vectorLayer = new ol.layer.Vector({})
//import {Fill, Stroke, Style, Text} from 'ol/style.js';
var style = new Style({})
fill: new Fill({})
这种前面有{}的,也是直接每个加。
var style = new ol.style.Style({})
fill: new ol.style.Fill({})

改变完的代码大致如下:
<!DOCTYPE html>
<html>
  <head>
    <title>Vector Layer</title>
    <link rel="stylesheet" href="js/ol.css" />
    <script type="text/javascript" src="js/ol.js" ></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      var style = new ol.style.Style({//显示的颜色
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 0, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',//边界颜色
          width: 1  //边界线条粗细
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#000'//字体颜色
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',//字体背景颜色
            width: 1 //字体背景粗细
          })
        })
      });
      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: '../data/cn.json',
          format: new ol.format.GeoJSON()
        }),
        style: function(feature) {
          style.getText().setText(feature.get('name'));
          return style;
        }
      });
      var map = new ol.Map({
        layers: [vectorLayer],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });
      var highlightStyle = new ol.style.Style({//点击产出的颜色
        stroke: new ol.style.Stroke({
          color: '#B8860B',  //点击边界颜色
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.1)'
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#B8860B'
          }),
          stroke: new ol.style.Stroke({
            color: '#B8860B',
            width: 3
          })
        })
      });
      var featureOverlay = new ol.layer.Vector({
        source: new ol.source.Vector(),
        map: map,
        style: function(feature) {
          highlightStyle.getText().setText(feature.get('name'));
          return highlightStyle;
        }
      });
      var highlight;
      var displayFeatureInfo = function(pixel) {
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });
        var info = document.getElementById('info');
        if (feature) {
          info.innerHTML = feature.getId() + ': ' + feature.get('name');
        } else {
          info.innerHTML = '&nbsp;';
        }
        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }
      };
      map.on('click', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
      });
      map.on('pointermove', function(evt) {
        displayFeatureInfo(evt.pixel);
      });     
    </script>
  </body>
</html>

这里有个写的非常好的前辈写的文章


不同区域渲染不同颜色示例:

            var wafotownBeans = json.wafotownBeans;// 后台json的数据
            //底图渲染,这个是为了显示边界,不是上色。
            var vectorLayerBottom = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                    url: '../OpenLayers-5.3.0/data/cn.json'
                }),
                style: function (feature, resolution) {
                    style = new ol.style.Style({
                      stroke: new ol.style.Stroke({
                            color: "blue",
                            width: 1
                        }),
                    });
                    return [style]
                }
            });
            var vectorLayer = new ol.layer.Vector({//数据图渲染,上色
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: '../OpenLayers-5.3.0/data/cn.json'
            }),
                style: function (feature, resolution) {
                    var id = feature.get("id");
                    for (var key of wafotownBeans) {
                        var stationCode = key.station_code;//编号 
                        var code = key.code; // 颜色
                        var codeLast=code.substr(1,code.length-1);
                        var colorStr = null;
                        if (codeLast == "0") {
                            colorStr = "#FF0000"
                        } else if (codeLast == "1") {
                            colorStr = "white"
                        } else if (codeLast == "2") {
                            colorStr = "blue"
                        } else if (codeLast == "3") {
                            colorStr = "yellow"
                        } else if (codeLast == "4") {
                            colorStr = "orange"
                        } else if (codeLast == "5") {
                            colorStr = "red"
                        }
                        if (stationCode == id) {
                            style = new ol.style.Style({
                                fill: new ol.style.Fill({
                                    color: "yellow"
                                }),
                                stroke: new ol.style.Stroke({
                                    color: "blue",
                                    width: 1
                                })
                            });
                            return [style]
                        }
                    }
                }
            });
            
            var map = new ol.Map({// Map
                layers : [vectorLayerBottom, vectorLayer],
                target : 'map',
                view : new ol.View({
                    center : [ 0, 0 ],
                    zoom : 1
                })
            });

还可以结合上面的官方例子,移动或者点击显示高亮详情等。


shp等格式转geojson:
上面的矢量图用到的是json格式,网上在线转的网站有很多,我比较常用的是:mapshaper
获取全国各地区json格式


相关文章

网友评论

    本文标题:OpenLayers、geojson矢量图

    本文链接:https://www.haomeiwen.com/subject/awaqmqtx.html