wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ol热力图渲染能力测试</title>
    <link rel="stylesheet" href="../dist/ol/ol.css" />
    <script src="../dist/index.js"></script>
    <script src="https://unpkg.com/ol@7.4.0/dist/ol.js"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <style>
      body {
        margin: 0
      }
      #map {
        height: 100vh;
      }
      .control {
        position: absolute;
        top: 20px;
        left: 40px;
        background: #fff
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="control">
        <input type="number" min="0" v-model="featuresCount" @keyup.enter="setHeatmapFeatures">万
        <button @click="setHeatmapFeatures">渲染热力图</button>
        <labal>渲染时间：<span v-if="renderEnd">{{renderEnd - renderBegin}}</span>ms</labal>
      </div>
    </div>
  </body>

  <script>
    const source = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileLayer = new CTMapOl.layer.Tile({
      title: '天地图',
      source: source
    })
    var sourceMarker = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileMarker = new CTMapOl.layer.Tile({
      title: '标注图层',
      source: sourceMarker
    })

    new Vue({
      el: '#app',
      data () {
        return {
          featuresCount: 1,
          renderBegin: null,
          renderEnd: null
        }
      },
      mounted () {
        this.map = new CTMapOl.Map({
          view: new CTMapOl.View({
            projection: 'EPSG:4326',
            center: [116.39, 39.91],
            zoom: 17,
            maxZoom: 18,
            minZoom: 1
          }),
          layers: [tileLayer, tileMarker],
          target: 'map'
        })
        this.initHeatmap()
        this.setHeatmapFeatures()
      },
      methods: {
        initHeatmap () {
          const heatSource = this.heatSource = new ol.source.Vector()
          const heatLayer = new ol.layer.Heatmap({
            source: heatSource
          })
          this.map.addLayer(heatLayer)
          heatLayer.addEventListener('prerender', e => {
            this.renderEnd = null
            this.renderBegin = new Date().getTime()
          })
          heatLayer.addEventListener('postrender', e => {
            this.renderEnd = new Date().getTime()
          })
        },
        setHeatmapFeatures () {
          this.heatSource.clear()
          const features = []
          for (let i = 0; i < this.featuresCount * 10000; i++) {
            const latitude = Math.random() / 100 + 39.905
            const longitude = Math.random() / 100 + 116.385
            const point = [longitude, latitude]
            features[i] = new ol.Feature({
              geometry: new ol.geom.Point(point)
            })
          }
          this.heatSource.addFeatures(features)
        }
      }
    })
  </script>
</html>