wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图形绘制、周边分析</title>
    <script src="../assets/vue@2.7.14.js"></script>
    <script src="../../dist/index.js"></script>
    <style>
      body {
        margin: 0
      }
      #map {
        height: 100vh;
      }
      .control {
        position: absolute;
        top: 20px;
        left: 40px;
        padding: 10px;
        background: #fff;
      }
      .control button {
        min-width: 3em;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="control">
        <template v-if="!ready">
          <button @click="init">初始化</button>
        </template>
        <template v-else>
          <button @click="startPoint">点</button>
          <button @click="_ => buffer.start('lineString', +radius)">线</button>
          <button @click="startLine">线(自定义样式)</button>
          <button @click="_ => buffer.start('circle', +radius)">圆（不支持周边分析）</button>
          <button @click="_ => buffer.start('box', +radius)">矩形</button>
          <button @click="_ => buffer.start('polygon', +radius)">一般多边形（周边分析不支持自交叉多边形）</button>
          <button @click="_ => buffer.undo(false)">撤销上一步</button>
          <button @click="_ => buffer.stop()">停止绘制</button>
          <button @click="loadFromData">加载图形并分析周边</button>
          <button @click="_ => buffer.clear()">清空</button>
          <button @click="destroy">销毁</button>
          <br>
          <button @click="setBufferLimit">已{{limit? '启用' : '禁用'}}缓冲区范围限制</button>
          <span>周边缓冲距离： {{radius}}km</span>
          <span style="margin-left: 2em;">
          0km
          <input type="range" min="0" :max="max" v-model="radius" @input="changeRadius">
          <input type="number" v-model="max" style="width: 50px"> km
          </span>
          <br>
          <br>
          <span>提示: 缓冲距离设置为0即为图形绘制功能，使用 onAddPoint 回调时，自动禁用默认缓冲距离限制</span>
        </template>
      </div>
    </div>
  </body>

  <script>
    const { Style, Fill, Stroke } = CTMapOl.style
    new Vue({
      el: '#app',
      data () {
        return {
          longitude: '',
          latitude: '',
          radius: 1,
          limit: true,
          max: 10,
          ready: false
        }
      },
      watch: {
        max (val) {
          if (val < this.radius) {
            this.radius = val
            this.changeRadius()
          }
          this.buffer.setBufferMax(val)
        }
      },
      mounted () {
        this.map = new CTMapOl.extend.InitMap({
          domId: 'map'
        })
      },
      methods: {
        init () {
          // 不要在 data 中定义 buffer 变量，无需响应式
          this.buffer = new CTMapOl.extend.ToolBuffer(this.map.map, {
            onPointerMove: info => {
              console.log('鼠标移动', info)
            },
            onAddPoint: info => {
              console.log('增加一个点', info)
              this.limit = false // 启用 onAddPoint 回调时，会自动禁用默认缓冲限制，不然可能有冲突
              if (info.length > 1000 || info.area > 1000000) {
                // this.buffer.undo() // 超出撤销
              }
            }
          }, result => {
            // result.origin 为原始图形geojson
            // result.buffer 缓冲区geojson
            // result.center 缓冲区覆盖圆 中心点
            // result.radius 缓冲区覆盖圆 半径
            console.log(result)
          }, _ => {
            console.error('范围超出限制')
          })
          this.ready = true
        },
        startPoint () {
          const bufferStyle = CTMapOl.extend.style.radialGradientCircle({
            map: this.map.map,
            colorStops: [
              [0, 'rgba(255,0,0,0)'],
              [0.85, 'rgba(255,0,0,0.2)'],
              [1, 'rgba(255,0,0,0.5)']
            ],
            strokeStyle: 'rgba(255,0,0,1)'
          })
          this.buffer.start('point', +this.radius, {
            bufferStyle
          })
        },
        startLine () {
          const lineStyle = new Style({
            stroke: new Stroke({
              width: 4,
              color: '#00ff00'
            })
          })
          const bufferStyle = new Style({
            fill: new Fill({
              color: 'rgba(92,255,0,0.3)'
            })
          })
          this.buffer.start('lineString', +this.radius, {
            originStyle: lineStyle,
            bufferStyle: bufferStyle
          })
        },
        loadFromData () {
          const coordinates = [[116.39, 39.91], [116.40, 39.91], [116.39, 39.92], [116.39, 39.91]]
          const geom = new CTMapOl.geom.Polygon([coordinates])
          geom.transform('EPSG:4326', 'EPSG:3857')
          this.buffer.loadFromData({
            geometry: geom,
            geoJson: null, // 也可以加载geoJson
            radius: 3,
            originStyle: new Style({
              stroke: new Stroke({ width: 3, color: '#00ffe9' }),
              fill: new Fill({ color: 'rgba(0,255,233,0.3)' })
            }),
            bufferStyle: new Style({
              fill: new Fill({ color: 'rgba(0,255,233,0.3)' })
            })
          })
        },
        setBufferLimit () {
          this.limit = !this.limit
          this.limit = this.buffer.setBufferLimit(this.limit)
        },
        changeRadius () {
          this.buffer.changeRadius(+this.radius)
        },
        destroy () {
          this.buffer.destroy()
          this.buffer = null
          this.ready = false
        }
      }
    })
  </script>
</html>