@mapgis/webclient-mapboxgl-plugin 10.3.4 → 17.0.0

package/overlay/stream/GeojsonStreamLayer.js

@@ -1,135 +0,0 @@
-import 'mapbox-gl/dist/mapbox-gl.css'
-import './popup.css'
-import mapboxgl from 'mapbox-gl';
-
-/**
- * @class GeojsonStreamLayer
- * @classdesc SocketLayer GeoJson渲染器。
- * @param {string} url - 数据流图层服务地址
- * @param {Object} options - 其他参数，先保留。
- *
- * @param {Object} options.style - 默认的geojson的style。
- * @param {Object} options.pointToLayer - geojson针对点图层的样式设置。
- * @param {Object} options.onEachFeature - geojson针对常见几何的样式设置。
- *
- * @param {Object} options.field - geojson的唯一标识字段，请确保该字段的唯一性。
- * @param {Object} options.icon - 显示的图片，与sprite配合
- */
-export class GeojsonStreamLayer {
-  constructor(map, url, options) {
-    options = options || {};
-
-    this.map = map
-    this.url = url
-    this.options = options
-    this.icon = options ? options.icon : 'rocket-15'
-
-    this.data = {
-      "type": "FeatureCollection",
-      "features": []
-    }
-
-    this.fieldHash = {}
-
-    this.bindData()
-  }
-
-  getPopupHtml(e) {
-    let views = '';
-     Object.keys(e.features[0].properties).map(key => {
-       views += `<div class='mapgis-inspect-layer-popup-li'>
-        <div class='mapgis-inspect-layer-popup-type'>${key}</div>
-        <div class='mapgis-inspect-layer-popup-value'>${e.features[0].properties[key]}</div>
-      </div>`
-      return undefined
-    });
-
-    return `
-      <div class='mapgis-inspect-layer-popup-list'>
-        <div class='mapgis-inspect-layer-popup-li'>
-          <div class='mapgis-inspect-layer-popup-type'>经度</div>
-          <div class='mapgis-inspect-layer-popup-value'>${e.lngLat.lng}</div>
-        </div>
-        <div class='mapgis-inspect-layer-popup-li'>
-          <div class='mapgis-inspect-layer-popup-type'>纬度</div>
-          <div class='mapgis-inspect-layer-popup-value'>${e.lngLat.lat}</div>
-        </div>
-        <div class='mapgis-inspect-layer-popup-li'>
-          <div class='mapgis-inspect-layer-popup-type'>屏幕像素X</div>
-          <div class='mapgis-inspect-layer-popup-value'>${e.point.x}</div>
-        </div>
-        <div class='mapgis-inspect-layer-popup-li'>
-          <div class='mapgis-inspect-layer-popup-type'>屏幕像素Y</div>
-          <div class='mapgis-inspect-layer-popup-value'>${e.point.y}</div>
-        </div>
-      </div>
-      `
-      + views;
-  }
-
-  bindData() {
-    let map = this.map
-    let self = this
-    map.addSource('webclient-mapboxgl-stream', { type: 'geojson', data: this.data })
-    map.addLayer({
-      "id": "webclient-mapboxgl-stream",
-      "type": "symbol",
-      "source": "webclient-mapboxgl-stream",
-      "layout": {
-        "icon-image": this.icon
-      }
-    });
-    // When a click event occurs on a feature in the states layer, open a popup at the
-    // location of the click, with description HTML from its properties.
-    map.on('click', 'webclient-mapboxgl-stream', function (e) {
-      console.log('stream item', e)
-      new mapboxgl.Popup()
-        .setLngLat(e.lngLat)
-        .setHTML(self.getPopupHtml(e))
-        .addTo(map);
-    });
-
-    // Change the cursor to a pointer when the mouse is over the states layer.
-    map.on('mouseenter', 'webclient-mapboxgl-stream', function () {
-      map.getCanvas().style.cursor = 'pointer';
-    });
-
-    // Change it back to a pointer when it leaves.
-    map.on('mouseleave', 'webclient-mapboxgl-stream', function () {
-      map.getCanvas().style.cursor = '';
-    });
-  }
-
-  unbindData() {
-    let map = this.map
-    map.removeLayer('webclient-mapboxgl-stream')
-    map.removeSource('webclient-mapboxgl-stream')
-    // map.off()
-  }
-
-  onMessage(msg) {
-    const feature = msg.feature
-    const field = msg.feature.properties[this.options.field]
-    let layer = feature
-    if (!field) return
-
-    if (this.fieldHash[field]) {
-      this.data.features[this.fieldHash[field]] = layer
-    } else {
-      this.data.features.push(layer)
-      this.fieldHash[field] = this.data.features.length - 1
-    }
-
-    this.map.getSource('webclient-mapboxgl-stream').setData(this.data)
-
-    if (this.options.onEachFeature) {
-      // this.options.onEachFeature(feature, layer)
-    }
-  }
-
-  parasFeature(layer, feature) {
-
-  }
-}
-
-

package/overlay/stream/MapvStreamLayer.js

@@ -1,79 +0,0 @@
-import mapboxgl from 'mapbox-gl'
-import { MapvLayer } from "../MapvLayer"
-
-/**
- * @class MapvStreamLayer
- * @classdesc SocketLayer MapV渲染器
- * @author 基础平台/创新中心 潘卓然 ParnDeedlit
- * @extends {L.MapVLayer}
- * @param {string} url - 数据流图层服务地址
- * @param {Object} options - 其他参数，先保留。
- *
- * @param {Object} options.field - geojson的唯一标识字段，请确保该字段的唯一性。
- */
-export class MapvStreamLayer {
-  constructor(map, url, options) {
-    options = options || {}
-
-    this.mapvOption = options.mapvOption || {}
-    this.data = []
-    this.lastDate = new Date()
-    this.url = url
-    this.fieldHash = {}
-
-    this.fieldDeg = options.fieldDeg
-    this.iconUrl = options.iconUrl
-    this.timeSpeed = options.timeSpeed || 100
-    this.createIcon()
-
-    this.layer = new MapvLayer(map, new window.mapv.DataSet([]), this.mapvOption, options)
-  }
-
-  onMessage(msg) {
-    const feature = msg.feature
-    const field = msg.feature.properties[this.options.field]
-
-    let layer = this.parasIcon(feature)
-
-    if (field !== undefined && this.fieldHash[field]) {
-      this.data[this.fieldHash[field]] = layer
-    } else {
-      if (field !== undefined) {
-        this.data.push(layer)
-        this.fieldHash[field] = this.data.length - 1
-      }
-    }
-
-    this.updateLayer()
-  }
-
-  createIcon() {
-    var iconUrl =
-      this.iconUrl || "http://client.snanyun.com:8899/img/leaflet/marker/bike.png"
-    this.icon = new Image()
-    this.icon.src = iconUrl
-  }
-
-  parasIcon(feature) {
-    this.mapvOption = {
-      draw: "icon"
-    }
-    var deg = feature.properties[this.fieldDeg] || 0
-    var icon = {
-      geometry: {
-        type: "Point",
-        coordinates: feature.geometry.coordinates
-      },
-      deg: deg,
-      icon: this.icon
-    }
-    return icon
-  }
-
-  updateLayer() {
-    var currentDate = new Date()
-    if (currentDate - this.lastDate < this.timeSpeed) return
-    this.updateData(this.data, this.mapvOption)
-    this.lastDate = currentDate
-  }
-}

package/overlay/stream/index.js

@@ -1,3 +0,0 @@
-import {GeojsonStreamLayer} from './GeojsonStreamLayer';
-
-export {GeojsonStreamLayer};

package/overlay/stream/popup.css

@@ -1,31 +0,0 @@
-.mapboxgl-popup-content {
-    position: relative;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    padding: 8px 10px;
-    width: 200px;
-    pointer-events: auto;
-}
-
-.mapgis-inspect-layer-popup-list {
-    margin-top: 10px;
-    width: 100%;
-    border-bottom: 1px solid #1f3349;
-    padding-top: 10px;
-}
-
-.mapgis-inspect-layer-popup-li {
-    float: left;
-    width: 100%;
-    height: 22px;
-}
-
-.mapgis-inspect-layer-popup-type {
-    float: left;
-    margin-left: 10px;
-}
-
-.mapgis-inspect-layer-popup-value {
-    float: right;
-}

package/service/index.js

@@ -1 +0,0 @@
-export { SocketService } from './socket/SocketService.js'

package/service/socket/ISocketService.js

@@ -1,121 +0,0 @@
-import { Zondy } from '../../core/Base'
-import { Evented } from '../../util/Evented'
-import {
-  SubscribePrefix,
-  BroadcastPrefix,
-  SubscribeEvent,
-  BroadcastEvent
-} from './SocketEvent'
-
-Zondy.Socket.ISocketService = undefined
-
-/**
- * Socket的基类
- * @author 潘卓然ParnDeedlit 基础平台/创新中心
- *
- * @alias ISocketService
- * @constructor
- *
- * @param {Object} url Socket流地址的url：
- * @param {Number} options 其他预留参数.
- *
- * @example
- * 固定url  ws://{ip}:{socket}/websocket/{servicename}
- * 服务名 streamdemo
- * 消息接收 ws://192.168.91.121:9382/websocket/streamdemo/subscribe
- * 消息发送 ws://192.168.91.121:9382/websocket/streamdemo/broadcast
- *
- */
-export class ISocketService {
-  constructor(url, options) {
-    this.url = url || ''
-
-    this.options = options
-
-    this.subscribesocket = null
-    this.subscribesocket = null
-
-    this.evented = new Evented()
-  }
-
-  createSubscribe() {
-    var self = this
-    this.subscribesocket = this.connect(this.url + SubscribePrefix)
-
-    this.subscribesocket.onopen = function(event) {
-      event.eventType = SubscribeEvent.OPEN
-      self.evented.fire(SubscribeEvent.OPEN, event)
-    }
-    this.subscribesocket.onmessage = function(event) {
-      var feature = JSON.parse(event.data)
-      event.feature = feature
-      event.eventType = SubscribeEvent.MESSAGE
-      self.evented.fire(SubscribeEvent.MESSAGE, event)
-    }
-    this.subscribesocket.onclose = function(event) {
-      event.eventType = SubscribeEvent.CLOSE
-      self.evented.fire(SubscribeEvent.CLOSE, event)
-    }
-    this.subscribesocket.onerror = function(event) {
-      event.eventType = SubscribeEvent.ERROR
-      self.evented.fire(SubscribeEvent.ERROR, event)
-    }
-  }
-
-  createBroadcast() {
-    var self = this
-
-    this.broadcastsocket = this.connect(this.url + BroadcastPrefix)
-
-    this.broadcastsocket.onopen = function(event) {
-      event.eventType = BroadcastEvent.OPEN
-      self.evented.fire(BroadcastEvent.OPEN, event)
-    }
-    this.broadcastsocket.onmessage = function(event) {
-      var feature = JSON.parse(event.data)
-      event.feature = feature
-      event.eventType = BroadcastEvent.MESSAGE
-      self.evented.fire(BroadcastEvent.MESSAGE, event)
-    }
-    this.broadcastsocket.onclose = function(event) {
-      event.eventType = BroadcastEvent.CLOSE
-      self.evented.fire(BroadcastEvent.CLOSE, event)
-    }
-    this.broadcastsocket.onerror = function(event) {
-      event.eventType = BroadcastEvent.ERROR
-      self.evented.fire(BroadcastEvent.ERROR, event)
-    }
-  }
-
-  connect(url) {
-    var socketFactory =
-      'MozWebSocket' in window ? window.MozWebSocket : WebSocket
-    return new socketFactory(url)
-  }
-
-  broadcast(data) {
-    if (!this.broadcastWebSocket || !this.broadcastWebSocket.isOpen) {
-      return
-    }
-    this.broadcastsocket.send(JSON.stringify(data))
-  }
-
-  closeSubscribe() {
-    this.subscribesocket.close()
-    this.subscribesocket = null
-  }
-
-  closeBroadcast() {
-    this.broadcastsocket.close()
-    this.broadcastsocket = null
-  }
-
-  close() {
-    this.subscribesocket.close()
-    this.broadcastsocket.close()
-    this.subscribesocket = null
-    this.broadcastsocket = null
-  }
-}
-
-Zondy.Socket.ISocketService = ISocketService

package/service/socket/SocketEvent.js

@@ -1,50 +0,0 @@
-import { Zondy } from "../../core/Base";
-
-export const SubscribePrefix = "/subscribe";
-export const BroadcastPrefix = "/broadcast";
-
-/**
- * SubscribeEvent WebSocket消息订阅通信事件流程
- * @readonly
- * @enum {String}
- */
-export const SubscribeEvent = {
-  /** 广播流打开事件 */
-  OPEN: "subscribeOpen",
-  /** 广播流消息事件 */
-  MESSAGE: "subscribeMessage",
-  /** 广播流关闭事件 */
-  CLOSE: "subscribeClose",
-  /** 广播流错误事件 */
-  ERROR: "subscribeError"
-};
-
-/**
- * BroadcastEvent WebSocket消息广播通信事件流程
- * @readonly
- * @enum {String}
- */
-export const BroadcastEvent = {
-  /** 广播流打开事件 */
-  OPEN: "broadcastOpen",
-  /** 广播流消息事件 */
-  MESSAGE: "broadcastMessage",
-  /** 广播流关闭事件 */
-  CLOSE: "broadcastClose",
-  /** 广播流错误事件 */
-  ERROR: "broadcastError"
-};
-
-/**
- * BroadcastEvent WebSocket 图层事件，用户、二次开发一般关注这个事件
- * @readonly
- * @enum {String}
- */
-export const LayerEvent = {
-    /** 图层更新事件事件 */
-    UPDATE: "layerupdate"
-  };
-
-Zondy.Event.SubscribeEvent = SubscribeEvent;
-Zondy.Event.BroadcastEvent = BroadcastEvent;
-Zondy.Event.LayerEvent = BroadcastEvent;

package/service/socket/SocketService.js

@@ -1,90 +0,0 @@
-import mapboxgl from 'mapbox-gl'
-import '../../core/Base'
-
-import {
-  SubscribeEvent,
-  BroadcastEvent
-} from './SocketEvent'
-import { ISocketService } from './ISocketService'
-
-mapboxgl.zondy.SocketService = undefined
-
-/**
- * Socket的代理类，实际上是接受websocket的事件，然后转换成mapbox的事件再进行发送
- * @author 潘卓然ParnDeedlit 基础平台/创新中心
- *
- * @alias SocketService
- * @constructor
- *
- * @param {Object} url Socket流地址的url：
- * @param {Number} options 其他预留参数.
- *
- * @example
- * 固定url  ws://{ip}:{socket}/websocket/{servicename}
- * 服务名 streamdemo
- * 消息接收 ws://192.168.91.121:9382/websocket/streamdemo/subscribe
- * 消息发送 ws://192.168.91.121:9382/websocket/streamdemo/broadcast
- *
- * @exception {DeveloperError} options.styleOption 必须是正确的样式.
- *
- */
-export class SocketService extends mapboxgl.Evented {
-  constructor(url, options) {
-    super()
-    
-    this.url = url || ''
-    this.options = options || {}
-
-    this.socket = new ISocketService(url, options)
-  }
-
-  createSubscribe() {
-    console.log('在使用流图层的时候容易出现回调堆栈溢出的问题，其核心原因是socket通信是双工通信，因此上下文环境context在不同的场景下是不一样的，以leaflet的on为例，其函数原型off(types, fn, context)第三个参数context的默认会是运行时的this而不是绑定时的this，最好在使用on监听的时候主动传入真正的上下文环境this')
-    this.socket.createSubscribe()
-    this.socket.evented.on(SubscribeEvent.OPEN, this.mapEvent, this)
-    this.socket.evented.on(SubscribeEvent.MESSAGE, this.mapEvent, this)
-    this.socket.evented.on(SubscribeEvent.CLOSE, this.mapEvent, this)
-    this.socket.evented.on(SubscribeEvent.ERROR, this.mapEvent, this)
-  }
-
-  createBroadcast() {
-    this.socket.createBroadcast()
-    this.socket.evented.on(BroadcastEvent.OPEN, this.mapEvent, this)
-    this.socket.evented.on(BroadcastEvent.MESSAGE, this.mapEvent, this)
-    this.socket.evented.on(BroadcastEvent.CLOSE, this.mapEvent, this)
-    this.socket.evented.on(BroadcastEvent.ERROR, this.mapEvent, this)
-  }
-
-  mapEvent(event) {
-    this.fire(event.eventType || event.type, event)
-  }
-
-  broadcast(data) {
-    if (!this.socket) {
-      return
-    }
-    this.socket.broadcast(data)
-  }
-
-  closeSubscribe() {
-    this.socket.closeSubscribe()
-    this.socket.evented.off(SubscribeEvent.OPEN, this.mapEvent, this)
-    this.socket.evented.off(SubscribeEvent.MESSAGE, this.mapEvent, this)
-    this.socket.evented.off(SubscribeEvent.CLOSE, this.mapEvent, this)
-    this.socket.evented.off(SubscribeEvent.ERROR, this.mapEvent, this)
-  }
-
-  closeBroadcast() {
-    this.socket.closeBroadcast()
-    this.socket.evented.off(BroadcastEvent.OPEN, this.mapEvent)
-    this.socket.evented.off(BroadcastEvent.MESSAGE, this.mapEvent)
-    this.socket.evented.off(BroadcastEvent.CLOSE, this.mapEvent)
-    this.socket.evented.off(BroadcastEvent.ERROR, this.mapEvent)
-  }
-}
-
-export var socketService = function (url, options) {
-  return new SocketService(url, options)
-}
-
-mapboxgl.zondy.SocketService = socketService