From fda744fc41fef54c2b27b58823c6cf55c87396c9 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期二, 09 三月 2021 15:11:33 +0800
Subject: [PATCH] 修复ie下不能显示的问题
---
src/components/plugin/leaflet-canvas-markers.js | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 insertions(+), 0 deletions(-)
diff --git a/src/components/plugin/leaflet-canvas-markers.js b/src/components/plugin/leaflet-canvas-markers.js
new file mode 100644
index 0000000..b79ae38
--- /dev/null
+++ b/src/components/plugin/leaflet-canvas-markers.js
@@ -0,0 +1,68 @@
+
+'use strict';
+
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['leaflet'], factory)
+ } else if (typeof exports === 'object') {
+ module.exports = factory(require('leaflet'))
+ } else {
+ factory(window.L)
+ }
+}(this, function (L) {
+ L.Canvas.include({
+ _updateImg: function (layer) {
+ const { img } = layer.options
+ // const img = layer.options.img
+ const p = layer._point.round()
+ p.x += img.offset.x; p.y += img.offset.y
+ if (img.rotate) {
+ this._ctx.save()
+ this._ctx.translate(p.x, p.y)
+ this._ctx.rotate(img.rotate * Math.PI / 180)
+ this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1])
+ this._ctx.restore()
+ } else {
+ this._ctx.drawImage(img.el, p.x - img.size[0] / 2, p.y - img.size[1] / 2, img.size[0], img.size[1])
+ }
+ }
+ })
+
+ const angleCrds = (map, prevLatlng, latlng) => {
+ if (!latlng || !prevLatlng) return 0
+ const pxStart = map.project(prevLatlng)
+ const pxEnd = map.project(latlng)
+ return Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI * 180 - 90
+ }
+
+ const defaultImgOptions = {
+ rotate: 0,
+ size: [40, 40],
+ offset: { x: 0, y: 0 }
+ }
+
+ const CanvasMarker = L.CircleMarker.extend({
+ _updatePath () {
+ if (!this.options.img || !this.options.img.url) return
+ if (!this.options.img.el) {
+ this.options.img = { ...defaultImgOptions, ...this.options.img }
+ this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng)
+ const img = document.createElement('img')
+ img.src = this.options.img.url
+ this.options.img.el = img
+ img.onload = () => {
+ this.redraw()
+ }
+ img.onerror = () => {
+ this.options.img = null
+ }
+ } else {
+ this._renderer._updateImg(this)
+ }
+ }
+ })
+
+ L.canvasMarker = function (...options) {
+ return new CanvasMarker(...options)
+ }
+}))
--
Gitblit v1.8.0