小编Clo*_*die的帖子

mapnik 矢量瓦片与原始 geojson 性能

我将文件转换为通过的处理时间超过 2 秒120 MB geojsonprotobufMapnikVector Tile 节点绑定。

在另一端提供原始geosjon文件需要不到 200 毫秒

正常吗?如果是,那么提供矢量切片有什么意义geojson(我正在查看它mapbox-gl-js)?

这是我的代码的摘录:

// Load GeoJson into memory

var fs = require("fs");
var content = JSON.parse(fs.readFileSync("us_counties.json"));


// Initialise Mapnik and mercator object

mapnik.register_default_fonts();
mapnik.register_default_input_plugins();

var mercator = new SphericalMercator({
  size: 256
 });

// Vector Tile Router

router.get('/:z/:x/:y.pbf', function(req, res) {

  var bbox = mercator.bbox(
    +req.params.x,
    +req.params.y,
    +req.params.z,
    false,
    '4326'
  );

  // Convert GEOJSON to protobuf VectorTile …
Run Code Online (Sandbox Code Playgroud)

mapnik mapbox-gl-js

1
推荐指数
1
解决办法
1799
查看次数

Flexbox 子项自动溢出以尊重父项高度

我希望 Flex 容器中的孙子容器的最大高度包含在容器的总高度 (100%) 减去其他子容器高度中,然后当孙子容器达到其最大尺寸时出现滚动条。

这是一个小提琴来展示它,基本上我不希望列表项溢出绿色容器。

https://jsfiddle.net/gcdzL3jn/2/

body {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

#header {
  background-color: red;
  height: 30px;
}

#main {
  background-color: green;
  display: flex;
  height: 100%;
  flex-direction: column;
}

#panel {
  height: 100%;
}

#panel-top {
  height: 80px;
  border-style: solid;
}

#panel-bottom-overflow {
  border-style: solid;
  overflow-y: auto;
}

#footer {
  background-color: yellow;
  height: 30px;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div id="header">
  </div>
  <div id="main">
    <div id="panel">
      <div id="panel-top">
        Top Panel
      </div>
      <div id="panel-bottom-overflow">
        <ul>
          <li>List item</li>
          <li>List item</li> …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

1
推荐指数
1
解决办法
6316
查看次数

标签 统计

css ×1

flexbox ×1

html ×1

mapbox-gl-js ×1

mapnik ×1