|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div id='map'></div>
|
|
|
+ <div class="select">
|
|
|
+ <label><input type="radio" name="data" id="radioOne" value="100"><span>100Mb</span></label>
|
|
|
+ <label><input type="radio" name="data" id="radioTwo" value="250"><span>250Mb</span></label>
|
|
|
+ <label><input type="radio" name="data" id="radioThree" value="500"><span>500Mb</span></label>
|
|
|
+ <label><input type="radio" name="data" id="radioFour" value="750"><span>750Mb</span></label>
|
|
|
+ <label><input type="radio" name="data" id="radioFive" value="1000"><span>1000Mb</span></label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="position">
|
|
|
+ <div id="zoom">
|
|
|
+ 当前级别 : 7
|
|
|
+ </div>
|
|
|
+ <div id="move">
|
|
|
+ 当前中心点: 纬度:0.00000,经度:0.00000
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import bigemap from '@/utils/bigemap/map'
|
|
|
+export default {
|
|
|
+ name: "windRender",
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ map:null,
|
|
|
+ timeLis:['00','06',12,18]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ bigemap.then(() => {
|
|
|
+ //软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
|
|
|
+ // BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
|
|
|
+ BM.Config.HTTP_URL = 'http://localhost:9000';
|
|
|
+ // var map = BM.map('map', 'bigemap.zhongkexingtu', {
|
|
|
+ var map = BM.map('map', 'bigemap.a4u80hw4', {
|
|
|
+ center: [30, 104],
|
|
|
+ minZoom: 7,
|
|
|
+ maxZoom: 10,
|
|
|
+ zoomControl: true,
|
|
|
+ attributionControl: false
|
|
|
+ }), velocityLayer;
|
|
|
+
|
|
|
+ fetch('/js/json/wind_data/20230629_00_atmoslev_1000_mb.json').then(response => {
|
|
|
+ // console.log(response)
|
|
|
+ return response.json()
|
|
|
+ }).then(data => {
|
|
|
+ // console.log(data)
|
|
|
+ velocityLayer = BM.velocityLayer({
|
|
|
+ displayValues: true,
|
|
|
+ displayOptions: {
|
|
|
+ velocityType: 'windy',
|
|
|
+ displayPosition: "topright",
|
|
|
+ displayEmptyString: "没有数据",
|
|
|
+ directionString: '风向',
|
|
|
+ speedString: '速度'
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ minVelocity: 0.05,//最小速度
|
|
|
+ maxVelocity: 10,// 最大速度
|
|
|
+ colorScale: ['#009dff', '#00ffd2', '#00ff0f'],// 颜色比例, '#D400B7FF'
|
|
|
+ velocityScale: 0.02, // 速度比例default 0.005,
|
|
|
+ });
|
|
|
+ velocityLayer.addTo(map);
|
|
|
+ });
|
|
|
+ window.Bmap = map;
|
|
|
+ this.bMap = map;
|
|
|
+ let mask = window.BMturf.polygon([[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
|
|
|
+ let geo2;
|
|
|
+ fetch('/js/geojson/210000.json').then(res => res.json()).then(data => {
|
|
|
+ geo2 = window.BM.geoJSON(data, {
|
|
|
+ style: function () {
|
|
|
+ return {
|
|
|
+ color: '#ffffff',
|
|
|
+ weight: 3,
|
|
|
+ fillColor: '#faf9f9',
|
|
|
+ fillOpacity: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onEachFeature: function (feature, layer) {
|
|
|
+ feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, {
|
|
|
+ direction: 'bottom',
|
|
|
+ className: 'my_default_tooltip',
|
|
|
+ permanent: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).on('mouseover', function (e) {
|
|
|
+ e.layer.setStyle({
|
|
|
+ color: '#ffffff',
|
|
|
+ weight: 1,
|
|
|
+ fillColor: 'transparent',
|
|
|
+ fillOpacity: 0
|
|
|
+ });
|
|
|
+ }).on('mouseout', function (e) {
|
|
|
+ e.layer.setStyle({
|
|
|
+ color: '#ffffff',
|
|
|
+ weight: 3,
|
|
|
+ fillColor: '#ffffff',
|
|
|
+ fillOpacity: 0
|
|
|
+ });
|
|
|
+ }).addTo(this.bMap);
|
|
|
+ window.geo2 = geo2;
|
|
|
+ // console.log(geo2.getBounds())
|
|
|
+ //限制拖动
|
|
|
+ // this.bMap.setMaxBounds([[43.489559, 128.791111], [38.719833, 110.846231]]);
|
|
|
+ // this.bMap.fitBounds([[43.489559, 128.791111], [38.719833, 110.846231]]);
|
|
|
+ this.bMap.setMaxBounds([[43.489559, 128.791111], [38.719833, 118.846231]]);
|
|
|
+ this.bMap.fitBounds([[43.489559, 128.791111], [38.719833, 118.846231]]);
|
|
|
+ // this.bMap.setMaxBounds(geo2.getBounds());
|
|
|
+ // this.bMap.fitBounds(geo2.getBounds());
|
|
|
+
|
|
|
+ const layers = geo2.getLayers();
|
|
|
+ for (const item of layers) {
|
|
|
+ const layer = item.feature;
|
|
|
+ mask = window.BMturf.mask(layer, mask);
|
|
|
+ }
|
|
|
+ window.BM.geoJSON(mask, {
|
|
|
+ color: 'orange',
|
|
|
+ fillColor: 'transparent',
|
|
|
+ // fillColor: '#0A163A',
|
|
|
+ // fillOpacity: 0.7
|
|
|
+ }).addTo(this.bMap);
|
|
|
+
|
|
|
+ //初始化热力图
|
|
|
+ // this.setHeatMap(this.bMap);
|
|
|
+ //绑定事
|
|
|
+ this.bindEvents(this.bMap);
|
|
|
+ this.bMap.setView([41.40566, 122.70630], 7)
|
|
|
+ })
|
|
|
+
|
|
|
+ function setData(params) {
|
|
|
+ // console.log(params)
|
|
|
+ fetch(`/js/json/wind_data/20230629_06_atmoslev_${params}_mb.json`).then(response => {
|
|
|
+ return response.json()
|
|
|
+ }).then(data => {
|
|
|
+ velocityLayer.options.displayOptions.velocityType = `${params}Mb`
|
|
|
+ velocityLayer.setData(data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ document.querySelectorAll('.select input').forEach(A => {
|
|
|
+ A.onchange = () => {
|
|
|
+ setData(A.value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //绑定事件-监听地图级别和拖动
|
|
|
+ bindEvents(map) {
|
|
|
+ let _self = this
|
|
|
+ map.on('moveend', function (e) {
|
|
|
+ const c = this.getCenter();
|
|
|
+ _self.center = this.getCenter()
|
|
|
+ document.getElementById('move').innerHTML = '当前中心点: 纬度:' + c.lat.toFixed(5) + ',经度:' + c.lng.toFixed(5);
|
|
|
+ });
|
|
|
+ //添加一个缩放事件
|
|
|
+ map.on('zoomend', function (e) {
|
|
|
+ _self.level = this.getZoom()
|
|
|
+ _self.$emit('changeZoom', this.getZoom())
|
|
|
+ document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.my_default_tooltip {
|
|
|
+ color: transparent !important;
|
|
|
+ background: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ /*font-size: 18px;*/
|
|
|
+}
|
|
|
+.my_default_tooltip::before {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+#map {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.bigemap-control-velocity {
|
|
|
+ background-color: rgba(255, 255, 255, 0.7);
|
|
|
+ padding: 0 5px;
|
|
|
+ margin: 0 !important;
|
|
|
+ color: #333;
|
|
|
+ font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.velocity-overlay {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.bigemap-canvas-layer {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.select {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ bottom: 0;
|
|
|
+ right: .5%;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+#position{
|
|
|
+ width: 320px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+</style>
|
zy