Skip to content

V
vue-cesium-lyc
Commit eefd4ca3 by lyc
Options

11

parent 35b01f4a
Showing with 2319 additions and 25 deletions
index.html
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script src="../Build/CesiumUnminified/Cesium.js"></script> <script src="../Build/CesiumUnminified/Cesium.js"></script>
<!-- <script src="/node_modules/cesium-heatmap/CesiumHeatmap.js"></script> -->
</head> </head>
......
package-lock.json
...@@ -9,12 +9,16 @@ ...@@ -9,12 +9,16 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"cesium": "1.99", "cesium": "1.99",
"cesium-heatmap": "^0.0.4",
"element-plus": "^2.7.7", "element-plus": "^2.7.7",
"heatmap.js": "^2.0.5",
"vite-plugin-cesium": "^1.2.22", "vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29" "vue": "^3.4.29"
}, },
"devDependencies": { "devDependencies": {
"@types/heatmap.js": "^2.0.41",
"@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue": "^5.0.5",
"sass": "^1.77.8",
"vite": "^5.3.1" "vite": "^5.3.1"
} }
}, },
...@@ -691,6 +695,30 @@ ...@@ -691,6 +695,30 @@
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz", "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
}, },
"node_modules/@types/geojson": {
"version": "7946.0.14",
"resolved": "https://registry.npmmirror.com/@types/geojson/-/geojson-7946.0.14.tgz",
"integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
"dev": true
},
"node_modules/@types/heatmap.js": {
"version": "2.0.41",
"resolved": "https://registry.npmmirror.com/@types/heatmap.js/-/heatmap.js-2.0.41.tgz",
"integrity": "sha512-3oHffxC+N+1EKXjeC65klk1kHnLJ5i6tEKFNb/04J+qSfQuCliacsNBWDpt59JfG2vBXRRn+ICbzRZj48j6HfQ==",
"dev": true,
"dependencies": {
"@types/leaflet": "^0"
}
},
"node_modules/@types/leaflet": {
"version": "0.7.40",
"resolved": "https://registry.npmmirror.com/@types/leaflet/-/leaflet-0.7.40.tgz",
"integrity": "sha512-R2UwXOKwnKZi9zNm37WbPTAVuqHmysE6NVihkc5DUrovTirUxFSbZzvXrlwv0n5sibe0w8VF1bWu0ta4kZlAaA==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/lodash": { "node_modules/@types/lodash": {
"version": "4.17.6", "version": "4.17.6",
"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.6.tgz", "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.6.tgz",
...@@ -909,6 +937,19 @@ ...@@ -909,6 +937,19 @@
"resolved": "https://registry.npmmirror.com/@zip.js/zip.js/-/zip.js-2.4.26.tgz", "resolved": "https://registry.npmmirror.com/@zip.js/zip.js/-/zip.js-2.4.26.tgz",
"integrity": "sha512-I9HBO3BHIxEMQmltmHM3iqUW6IHqi3gsL9wTSXvHTRpOrA6q2OxtR58EDSaOGjHhDVJ+wIOAxZyKq2x00AVmqw==" "integrity": "sha512-I9HBO3BHIxEMQmltmHM3iqUW6IHqi3gsL9wTSXvHTRpOrA6q2OxtR58EDSaOGjHhDVJ+wIOAxZyKq2x00AVmqw=="
}, },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"devOptional": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/async-validator": { "node_modules/async-validator": {
"version": "4.2.5", "version": "4.2.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz", "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
...@@ -930,11 +971,35 @@ ...@@ -930,11 +971,35 @@
"tslib": "^2.3.0" "tslib": "^2.3.0"
} }
}, },
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"devOptional": true,
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/bitmap-sdf": { "node_modules/bitmap-sdf": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmmirror.com/bitmap-sdf/-/bitmap-sdf-1.0.4.tgz", "resolved": "https://registry.npmmirror.com/bitmap-sdf/-/bitmap-sdf-1.0.4.tgz",
"integrity": "sha512-1G3U4n5JE6RAiALMxu0p1XmeZkTeCwGKykzsLTCqVzfSDaN6S7fKnkIkfejogz+iwqBWc0UYAIKnKHNN7pSfDg==" "integrity": "sha512-1G3U4n5JE6RAiALMxu0p1XmeZkTeCwGKykzsLTCqVzfSDaN6S7fKnkIkfejogz+iwqBWc0UYAIKnKHNN7pSfDg=="
}, },
"node_modules/braces": {
"version": "3.0.3",
"resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"devOptional": true,
"dependencies": {
"fill-range": "^7.1.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/cesium": { "node_modules/cesium": {
"version": "1.99.0", "version": "1.99.0",
"resolved": "https://registry.npmmirror.com/cesium/-/cesium-1.99.0.tgz", "resolved": "https://registry.npmmirror.com/cesium/-/cesium-1.99.0.tgz",
...@@ -964,6 +1029,35 @@ ...@@ -964,6 +1029,35 @@
"node": ">=14.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/cesium-heatmap": {
"version": "0.0.4",
"resolved": "https://registry.npmmirror.com/cesium-heatmap/-/cesium-heatmap-0.0.4.tgz",
"integrity": "sha512-6ujF5HMss/gI7wiHo9EDM5Ec5dK1b/e7AJOioJfFo7wuB1rgHfvGTKDbO0rUQHJKlvojyFdyHcHzEb0sPAm8AQ=="
},
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"devOptional": true,
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/commander": { "node_modules/commander": {
"version": "2.20.3", "version": "2.20.3",
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
...@@ -1123,6 +1217,18 @@ ...@@ -1123,6 +1217,18 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/fill-range": {
"version": "7.1.1",
"resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"devOptional": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/fresh": { "node_modules/fresh": {
"version": "0.5.2", "version": "0.5.2",
"resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz", "resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
...@@ -1158,6 +1264,18 @@ ...@@ -1158,6 +1264,18 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0" "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
} }
}, },
"node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"devOptional": true,
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
"version": "4.2.11", "version": "4.2.11",
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz", "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
...@@ -1168,6 +1286,11 @@ ...@@ -1168,6 +1286,11 @@
"resolved": "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz", "resolved": "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==" "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
}, },
"node_modules/heatmap.js": {
"version": "2.0.5",
"resolved": "https://registry.npmmirror.com/heatmap.js/-/heatmap.js-2.0.5.tgz",
"integrity": "sha512-CG2gYFP5Cv9IQCXEg3ZRxnJDyAilhWnQlAuHYGuWVzv6mFtQelS1bR9iN80IyDmFECbFPbg6I0LR5uAFHgCthw=="
},
"node_modules/http-errors": { "node_modules/http-errors": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz",
...@@ -1183,11 +1306,59 @@ ...@@ -1183,11 +1306,59 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/immutable": {
"version": "4.3.7",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
"devOptional": true
},
"node_modules/inherits": { "node_modules/inherits": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz", "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}, },
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"devOptional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"devOptional": true,
"dependencies": {
"is-extglob": "^2.1.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"devOptional": true,
"engines": {
"node": ">=0.12.0"
}
},
"node_modules/is-reference": { "node_modules/is-reference": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmmirror.com/is-reference/-/is-reference-1.2.1.tgz", "resolved": "https://registry.npmmirror.com/is-reference/-/is-reference-1.2.1.tgz",
...@@ -1311,6 +1482,15 @@ ...@@ -1311,6 +1482,15 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
} }
}, },
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/normalize-wheel-es": { "node_modules/normalize-wheel-es": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
...@@ -1432,6 +1612,18 @@ ...@@ -1432,6 +1612,18 @@
"quickselect": "^2.0.0" "quickselect": "^2.0.0"
} }
}, },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"devOptional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/rollup": { "node_modules/rollup": {
"version": "4.18.1", "version": "4.18.1",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.18.1.tgz", "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.18.1.tgz",
...@@ -1466,6 +1658,23 @@ ...@@ -1466,6 +1658,23 @@
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
} }
}, },
"node_modules/sass": {
"version": "1.77.8",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
"integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/send": { "node_modules/send": {
"version": "0.18.0", "version": "0.18.0",
"resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz", "resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz",
...@@ -1530,6 +1739,18 @@ ...@@ -1530,6 +1739,18 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"devOptional": true,
"dependencies": {
"is-number": "^7.0.0"
},
"engines": {
"node": ">=8.0"
}
},
"node_modules/toidentifier": { "node_modules/toidentifier": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz", "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
......
package.json
...@@ -10,12 +10,16 @@ ...@@ -10,12 +10,16 @@
}, },
"dependencies": { "dependencies": {
"cesium": "1.99", "cesium": "1.99",
"cesium-heatmap": "^0.0.4",
"element-plus": "^2.7.7", "element-plus": "^2.7.7",
"heatmap.js": "^2.0.5",
"vite-plugin-cesium": "^1.2.22", "vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29" "vue": "^3.4.29"
}, },
"devDependencies": { "devDependencies": {
"@types/heatmap.js": "^2.0.41",
"@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue": "^5.0.5",
"sass": "^1.77.8",
"vite": "^5.3.1" "vite": "^5.3.1"
} }
} }
src/App.vue
...@@ -20,7 +20,7 @@ import jiguang from './components/jiguang.vue' ...@@ -20,7 +20,7 @@ import jiguang from './components/jiguang.vue'
import shiqushiti from './components/shiqushiti.vue' import shiqushiti from './components/shiqushiti.vue'
import kuosanquan from './components/kuosanyuan.vue' import kuosanquan from './components/kuosanyuan.vue'
import relitu from './components/relitu.vue' import relitu from './components/relitu.vue'
// import test from './components/test.vue'
//封装 //封装
import point from './encapsulation/point.vue' import point from './encapsulation/point.vue'
...@@ -51,16 +51,17 @@ export default { ...@@ -51,16 +51,17 @@ export default {
<!-- <draw/> --> <!-- <draw/> -->
<!-- <camera/> --> <!-- <camera/> -->
<!-- <dail/> --> <!-- <dail/> -->
<!-- <raotaiyang/> --> <raotaiyang/>
<!-- <qq/> --> <!-- <qq/> -->
<!-- <xyz/> --> <!-- <xyz/> -->
<!-- <setl/> --> <!-- <setl/> -->
<!-- <shiye/> --> <!-- <shiye/> -->
<!-- <lineq/> --> <!-- <lineq/> -->
<jiguang/> <!-- <jiguang/> -->
<!-- <shiqushiti/> --> <!-- <shiqushiti/> -->
<!-- <kuosanquan/> --> <!-- <kuosanquan/> -->
<!-- <relitu/> --> <!-- <relitu/> -->
<!-- <test/> -->
<!-- <point/> --> <!-- <point/> -->
<!-- <polygonq/> --> <!-- <polygonq/> -->
......
src/components/relitu.vue
<template> <template>
<div id="cesiumContainer" class="all"></div> <div id="cesiumContainer" class="all">
<div id="heatMap" v-show="false"></div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue' import { onMounted } from 'vue'
import * as Cesium from 'cesium' import * as Cesium from 'cesium'
onMounted(() => { onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE' Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", { const viewer = new Cesium.Viewer("cesiumContainer", {
}) })
var gravityData = [
{
position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), // 示例坐标
value: 100.0 // 示例重力异常值
},
// ... 更多点
];
var pointPrimitive = viewer.scene.primitives.add(Cesium.Primitive.createPoints({
attributes: new Cesium.BoundingSphereGeometryAttributes({
position: new Cesium.PositionPropertyCollection(gravityData)
}),
color: Cesium.Color.fromRandom(),
size: 10
}));
// 更新画面的渲染并添加图层
viewer.scene.requestRender();
// let bounds = {
// west: 103,
// east: 104,
// south: 30,
// north: 31
// };
// let heatMap = CesiumHeatmap.create(
// viewer,
// bounds,
// {
// minOpacity: 0.16,
// maxOpacity: 0.85,
// gradient: {
// "0.05": "rgb(0,0,255)",
// "0.25": "rgb(0 255 127)",
// "0.45": "rgb(0,255,0)",
// "0.65": "rgb(255 255 0)",
// "0.85": "rgb(255 165 0)",
// "1.00": "rgb(255,0,0)"
// },
// radius: 150,
// blur: 0.7,
// }
// );
// let minValue = 0;
// let maxValue = 100;
// let data = [];
// for (let i = 0; i < 100; i++) {
// data.push({
// x: 103 + Math.random(),
// y: 30 + Math.random(),
// value: Math.floor(Math.random() * 100) //[0,100]
// });
// }
// heatMap.setWGS84Data(minValue, maxValue, data);
// viewer.camera.setView({
// destination: Cesium.Rectangle.fromDegrees(bounds.west, bounds.south, bounds.east, bounds.north)
// });
// let list = [];
// for (let i = 0; i < 100; i++) {
// list.push({
// "lnglat": [
// 117.28 + Math.random() * (Math.random() > 0.5 ? 1 : -1),
// 31.923 + Math.random() * (Math.random() > 0.5 ? 1 : -1)
// ],
// "value": 100 * Math.random()
// })
// }
// new Heatmap(viewer, {
// list: list
// })
}) })
</script> </script>
<style></style> <style>
.canvas-main {
position: absolute;
margin: 10px;
padding: 10px;
z-index: 10;
background: rgba(255, 255, 0, 0.329);
}
</style>
src/components/test.vue 0 → 100644
<template>
<div id="cesiumContainer">
<div class="canvas-main">
<el-button size="mini" @click="startDraw" :disabled="bool">开始绘制</el-button>
<el-button size="mini" @click="autoUpdate" :disabled="!bool">自动更新</el-button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import * as Cesium from 'cesium';
// const mapData = ref([]);
// const bool = ref(false);
// const viewer = ref(undefined);
// const key =
// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE';
// Cesium.Ion.defaultAccessToken = key;
// const initViewer = () => {
// const options = {
// imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
// }),
// terrainProvider: Cesium.createWorldTerrain(),
// geocoder: true,
// homeButton: true,
// sceneModePicker: true,
// baseLayerPicker: true,
// navigationHelpButton: true,
// animation: true,
// timeline: true,
// fullscreenButton: true,
// vrButton: true,
// selectionIndicator: true,
// infoBox: true,
// };
// viewer.value = new Cesium.Viewer("cesiumContainer", options);
// viewer.value._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
// };
// onMounted(initViewer);
// const startDra=()=> {
// const option = {
// min: 0,
// max: 100,
// size: 20,
// };
// window.heatmapObj = new HeatmapIntensity(viewer, option);
// const box = {
// west: 110,
// south: 40.5,
// east: 110.5,
// north: 41,
// };
// window.heatmapObj.createHeatmap(box, this.mapData);
// this.bool = true;
// };
// const autoUpdate=()=> {
// setInterval(() => {
// let data = [];
// for (let i = 0; i < 100; i++) {
// let obj = {};
// obj.x = this.randomNum(110, 110.5, 5);
// obj.y = this.randomNum(40.5, 41, 5);
// obj.value = this.randomNum(0, 100, 2);
// data.push(obj);
// }
// window.heatmapObj.setData(data);
// }, 1000);
// };
// const initData=()=> {
// this.mapData = [];
// for (let i = 0; i < 100; i++) {
// let obj = {};
// obj.x = this.randomNum(110, 110.5, 5);
// obj.y = this.randomNum(40.5, 41, 5);
// obj.value = this.randomNum(0, 100, 2);
// this.mapData.push(obj);
// }
// this.mapData.forEach((element) => {
// viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(
// Number(element.x),
// Number(element.y)
// ),
// point: {
// pixelSize: 5,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
// },
// });
// });
// viewer.flyTo(viewer.entities);
// };
// const randomNum =(maxNum, minNum, decimalNum)=> {
// // 获取指定范围内的随机数, decimalNum指小数保留多少位
// let max = 0,
// min = 0;
// minNum <= maxNum
// ? ((min = minNum), (max = maxNum))
// : ((min = maxNum), (max = minNum));
// let result = undefined;
// switch (arguments.length) {
// case 1:
// result = Math.floor(Math.random() * (max + 1));
// break;
// case 2:
// result = Math.floor(Math.random() * (max - min + 1) + min);
// break;
// case 3:
// result = (Math.random() * (max - min) + min).toFixed(decimalNum);
// break;
// default:
// result = Math.random();
// break;
// }
// return result;
// },
</script>
<style lang="scss" scoped>
#cesiumContainer {
width: 100%;
height: 100%;
position: relative;
background: rgba(255, 0, 0, 0.322);
.canvas-main {
position: absolute;
margin: 10px;
padding: 10px;
z-index: 10;
background: rgba(255, 255, 0, 0.329);
}
}
</style>
\ No newline at end of file
src/js/CesiumHeatmap.js 0 → 100644
import * as Cesium from 'cesium'
/*
* CesiumHeatmap.js v0.1 | Cesium Heatmap Library
*
* Works with heatmap.js v2.0.0: http://www.patrick-wied.at/static/heatmapjs/
*/
(function (window) {
'use strict';
function define_CesiumHeatmap() {
var CesiumHeatmap = {
defaults: {
useEntitiesIfAvailable: true, //whether to use entities if a Viewer is supplied or always use an ImageryProvider
minCanvasSize: 700, // minimum size (in pixels) for the heatmap canvas
maxCanvasSize: 2000, // maximum size (in pixels) for the heatmap canvas
radiusFactor: 60, // data point size factor used if no radius is given (the greater of height and width divided by this number yields the used radius)
spacingFactor: 1.5, // extra space around the borders (point radius multiplied by this number yields the spacing)
maxOpacity: 0.8, // the maximum opacity used if not given in the heatmap options object
minOpacity: 0.1, // the minimum opacity used if not given in the heatmap options object
blur: 0.85, // the blur used if not given in the heatmap options object
gradient: { // the gradient used if not given in the heatmap options object
'.3': 'blue',
'.65': 'yellow',
'.8': 'orange',
'.95': 'red'
},
}
};
/* Create a CesiumHeatmap instance
*
* cesium: the CesiumWidget or Viewer instance
* bb: the WGS84 bounding box like {north, east, south, west}
* options: a heatmap.js options object (see http://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create)
*/
CesiumHeatmap.create = function (cesium, bb, options) {
var instance = new CHInstance(cesium, bb, options);
return instance;
};
CesiumHeatmap._getContainer = function (width, height, id) {
var c = document.createElement("div");
if (id) {
c.setAttribute("id", id);
}
c.setAttribute("style", "width: " + width + "px; height: " + height + "px; margin: 0px; display: none;");
document.body.appendChild(c);
return c;
};
CesiumHeatmap._getImageryProvider = function (instance) {
//var n = (new Date()).getTime();
var d = instance._heatmap.getDataURL();
//console.log("Create data URL: " + ((new Date()).getTime() - n));
//var n = (new Date()).getTime();
var imgprov = new Cesium.SingleTileImageryProvider({
url: d,
rectangle: instance._rectangle
});
//console.log("Create imageryprovider: " + ((new Date()).getTime() - n));
imgprov._tilingScheme = new Cesium.WebMercatorTilingScheme({
rectangleSouthwestInMeters: new Cesium.Cartesian2(instance._mbounds.west, instance._mbounds.south),
rectangleNortheastInMeters: new Cesium.Cartesian2(instance._mbounds.east, instance._mbounds.north)
});
return imgprov;
};
CesiumHeatmap._getID = function (len) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < ((len) ? len : 8); i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
};
var WMP = new Cesium.WebMercatorProjection();
/* Convert a WGS84 location into a mercator location
*
* p: the WGS84 location like {x: lon, y: lat}
*/
CesiumHeatmap.wgs84ToMercator = function (p) {
var mp = WMP.project(Cesium.Cartographic.fromDegrees(p.x, p.y));
return {
x: mp.x,
y: mp.y
};
};
/* Convert a WGS84 bounding box into a mercator bounding box
*
* bb: the WGS84 bounding box like {north, east, south, west}
*/
CesiumHeatmap.wgs84ToMercatorBB = function (bb) {
var sw = WMP.project(Cesium.Cartographic.fromDegrees(bb.west, bb.south));
var ne = WMP.project(Cesium.Cartographic.fromDegrees(bb.east, bb.north));
return {
north: ne.y,
east: ne.x,
south: sw.y,
west: sw.x
};
};
/* Convert a mercator location into a WGS84 location
*
* p: the mercator lcation like {x, y}
*/
CesiumHeatmap.mercatorToWgs84 = function (p) {
var wp = WMP.unproject(new Cesium.Cartesian3(p.x, p.y));
return {
x: wp.longitude,
y: wp.latitude
};
};
/* Convert a mercator bounding box into a WGS84 bounding box
*
* bb: the mercator bounding box like {north, east, south, west}
*/
CesiumHeatmap.mercatorToWgs84BB = function (bb) {
var sw = WMP.unproject(new Cesium.Cartesian3(bb.west, bb.south));
var ne = WMP.unproject(new Cesium.Cartesian3(bb.east, bb.north));
return {
north: this.rad2deg(ne.latitude),
east: this.rad2deg(ne.longitude),
south: this.rad2deg(sw.latitude),
west: this.rad2deg(sw.longitude)
};
};
/* Convert degrees into radians
*
* d: the degrees to be converted to radians
*/
CesiumHeatmap.deg2rad = function (d) {
var r = d * (Math.PI / 180.0);
return r;
};
/* Convert radians into degrees
*
* r: the radians to be converted to degrees
*/
CesiumHeatmap.rad2deg = function (r) {
var d = r / (Math.PI / 180.0);
return d;
};
return CesiumHeatmap;
}
if (typeof(CesiumHeatmap) === 'undefined') {
window.CesiumHeatmap = define_CesiumHeatmap();
} else {
console.log("CesiumHeatmap already defined.");
}
})(window);
/* Initiate a CesiumHeatmap instance
*
* c: CesiumWidget instance
* bb: a WGS84 bounding box like {north, east, south, west}
* o: a heatmap.js options object (see http://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create)
*/
function CHInstance(c, bb, o) {
if (!bb) {
return null;
}
if (!o) {
o = {};
}
this._cesium = c;
this._options = o;
this._id = CesiumHeatmap._getID();
this._options.gradient = ((this._options.gradient) ? this._options.gradient : CesiumHeatmap.defaults.gradient);
this._options.maxOpacity = ((this._options.maxOpacity) ? this._options.maxOpacity : CesiumHeatmap.defaults.maxOpacity);
this._options.minOpacity = ((this._options.minOpacity) ? this._options.minOpacity : CesiumHeatmap.defaults.minOpacity);
this._options.blur = ((this._options.blur) ? this._options.blur : CesiumHeatmap.defaults.blur);
this._mbounds = CesiumHeatmap.wgs84ToMercatorBB(bb);
this._setWidthAndHeight(this._mbounds);
this._options.radius = Math.round((this._options.radius) ? this._options.radius : ((this.width > this.height) ? this.width / CesiumHeatmap.defaults.radiusFactor : this.height / CesiumHeatmap.defaults.radiusFactor));
this._spacing = this._options.radius * CesiumHeatmap.defaults.spacingFactor;
this._xoffset = this._mbounds.west;
this._yoffset = this._mbounds.south;
this.width = Math.round(this.width + this._spacing * 2);
this.height = Math.round(this.height + this._spacing * 2);
this._mbounds.west -= this._spacing * this._factor;
this._mbounds.east += this._spacing * this._factor;
this._mbounds.south -= this._spacing * this._factor;
this._mbounds.north += this._spacing * this._factor;
this.bounds = CesiumHeatmap.mercatorToWgs84BB(this._mbounds);
this._rectangle = Cesium.Rectangle.fromDegrees(this.bounds.west, this.bounds.south, this.bounds.east, this.bounds.north);
this._container = CesiumHeatmap._getContainer(this.width, this.height, this._id);
this._options.container = this._container;
this._heatmap = h337.create(this._options);
this._container.children[0].setAttribute("id", this._id + "-hm");
}
/* Convert a WGS84 location to the corresponding heatmap location
*
* p: a WGS84 location like {x:lon, y:lat}
*/
CHInstance.prototype.wgs84PointToHeatmapPoint = function (p) {
return this.mercatorPointToHeatmapPoint(CesiumHeatmap.wgs84ToMercator(p));
};
/* Convert a mercator location to the corresponding heatmap location
*
* p: a WGS84 location like {x: lon, y:lat}
*/
CHInstance.prototype.mercatorPointToHeatmapPoint = function (p) {
var pn = {};
pn.x = Math.round((p.x - this._xoffset) / this._factor + this._spacing);
pn.y = Math.round((p.y - this._yoffset) / this._factor + this._spacing);
pn.y = this.height - pn.y;
return pn;
};
CHInstance.prototype._setWidthAndHeight = function (mbb) {
this.width = ((mbb.east > 0 && mbb.west < 0) ? mbb.east + Math.abs(mbb.west) : Math.abs(mbb.east - mbb.west));
this.height = ((mbb.north > 0 && mbb.south < 0) ? mbb.north + Math.abs(mbb.south) : Math.abs(mbb.north - mbb.south));
this._factor = 1;
if (this.width > this.height && this.width > CesiumHeatmap.defaults.maxCanvasSize) {
this._factor = this.width / CesiumHeatmap.defaults.maxCanvasSize;
if (this.height / this._factor < CesiumHeatmap.defaults.minCanvasSize) {
this._factor = this.height / CesiumHeatmap.defaults.minCanvasSize;
}
} else if (this.height > this.width && this.height > CesiumHeatmap.defaults.maxCanvasSize) {
this._factor = this.height / CesiumHeatmap.defaults.maxCanvasSize;
if (this.width / this._factor < CesiumHeatmap.defaults.minCanvasSize) {
this._factor = this.width / CesiumHeatmap.defaults.minCanvasSize;
}
} else if (this.width < this.height && this.width < CesiumHeatmap.defaults.minCanvasSize) {
this._factor = this.width / CesiumHeatmap.defaults.minCanvasSize;
if (this.height / this._factor > CesiumHeatmap.defaults.maxCanvasSize) {
this._factor = this.height / CesiumHeatmap.defaults.maxCanvasSize;
}
} else if (this.height < this.width && this.height < CesiumHeatmap.defaults.minCanvasSize) {
this._factor = this.height / CesiumHeatmap.defaults.minCanvasSize;
if (this.width / this._factor > CesiumHeatmap.defaults.maxCanvasSize) {
this._factor = this.width / CesiumHeatmap.defaults.maxCanvasSize;
}
}
this.width = this.width / this._factor;
this.height = this.height / this._factor;
};
/* Set an array of heatmap locations
*
* min: the minimum allowed value for the data values
* max: the maximum allowed value for the data values
* data: an array of data points in heatmap coordinates and values like {x, y, value}
*/
CHInstance.prototype.setData = function (min, max, data) {
if (data && data.length > 0 && min !== null && min !== false && max !== null && max !== false) {
this._heatmap.setData({
min: min,
max: max,
data: data
});
this.updateLayer();
return true;
}
return false;
};
/* Set an array of WGS84 locations
*
* min: the minimum allowed value for the data values
* max: the maximum allowed value for the data values
* data: an array of data points in WGS84 coordinates and values like { x:lon, y:lat, value }
*/
CHInstance.prototype.setWGS84Data = function (min, max, data) {
if (data && data.length > 0 && min !== null && min !== false && max !== null && max !== false) {
var convdata = [];
for (var i = 0; i < data.length; i++) {
var gp = data[i];
var hp = this.wgs84PointToHeatmapPoint(gp);
if (gp.value || gp.value === 0) {
hp.value = gp.value;
}
convdata.push(hp);
}
return this.setData(min, max, convdata);
}
return false;
};
/* Set whether or not the heatmap is shown on the map
*
* s: true means the heatmap is shown, false means the heatmap is hidden
*/
CHInstance.prototype.show = function (s) {
if (this._layer) {
this._layer.show = s;
}
};
/* Update/(re)draw the heatmap
*/
CHInstance.prototype.updateLayer = function () {
// only works with a Viewer instance since the cesiumWidget
// instance doesn't contain an entities property
if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
if (this._layer) {
this._cesium.entities.remove(this._layer);
}
// Work around issue with material rendering in Cesium
// provided by https://github.com/criis
material = new Cesium.ImageMaterialProperty({
image: this._heatmap._renderer.canvas,
});
if (Cesium.VERSION >= "1.21") {
material.transparent = true;
} else if (Cesium.VERSION >= "1.16") {
material.alpha = 0.99;
}
this._layer = this._cesium.entities.add({
show: true,
rectangle: {
coordinates: this._rectangle,
material: material
}
});
} else {
if (this._layer) {
this._cesium.scene.imageryLayers.remove(this._layer);
}
this._layer = this._cesium.scene.imageryLayers.addImageryProvider(CesiumHeatmap._getImageryProvider(this));
}
};
/* DON'T TOUCH:
*
* heatmap.js v2.0.0 | JavaScript Heatmap Library: http://www.patrick-wied.at/static/heatmapjs/
*
* Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
* Dual licensed under MIT and Beerware license
*
* :: 2014-10-31 21:16
*/
(function (a, b, c) {
if (typeof module !== "undefined" && module.exports) {
module.exports = c()
} else if (typeof define === "function" && define.amd) {
define(c)
} else {
b[a] = c()
}
})("h337", this, function () {
var a = {
defaultRadius: 40,
defaultRenderer: "canvas2d",
defaultGradient: {.25: "rgb(0,0,255)", .55: "rgb(0,255,0)", .85: "yellow", 1: "rgb(255,0,0)"},
defaultMaxOpacity: 1,
defaultMinOpacity: 0,
defaultBlur: .85,
defaultXField: "x",
defaultYField: "y",
defaultValueField: "value",
plugins: {}
};
var b = function h() {
var b = function d(a) {
this._coordinator = {};
this._data = [];
this._radi = [];
this._min = 0;
this._max = 1;
this._xField = a["xField"] || a.defaultXField;
this._yField = a["yField"] || a.defaultYField;
this._valueField = a["valueField"] || a.defaultValueField;
if (a["radius"]) {
this._cfgRadius = a["radius"]
}
};
var c = a.defaultRadius;
b.prototype = {
_organiseData: function (a, b) {
var d = a[this._xField];
var e = a[this._yField];
var f = this._radi;
var g = this._data;
var h = this._max;
var i = this._min;
var j = a[this._valueField] || 1;
var k = a.radius || this._cfgRadius || c;
if (!g[d]) {
g[d] = [];
f[d] = []
}
if (!g[d][e]) {
g[d][e] = j;
f[d][e] = k
} else {
g[d][e] += j
}
if (g[d][e] > h) {
if (!b) {
this._max = g[d][e]
} else {
this.setDataMax(g[d][e])
}
return false
} else {
return {x: d, y: e, value: j, radius: k, min: i, max: h}
}
}, _unOrganizeData: function () {
var a = [];
var b = this._data;
var c = this._radi;
for (var d in b) {
for (var e in b[d]) {
a.push({x: d, y: e, radius: c[d][e], value: b[d][e]})
}
}
return {min: this._min, max: this._max, data: a}
}, _onExtremaChange: function () {
this._coordinator.emit("extremachange", {min: this._min, max: this._max})
}, addData: function () {
if (arguments[0].length > 0) {
var a = arguments[0];
var b = a.length;
while (b--) {
this.addData.call(this, a[b])
}
} else {
var c = this._organiseData(arguments[0], true);
if (c) {
this._coordinator.emit("renderpartial", {min: this._min, max: this._max, data: [c]})
}
}
return this
}, setData: function (a) {
var b = a.data;
var c = b.length;
this._data = [];
this._radi = [];
for (var d = 0; d < c; d++) {
this._organiseData(b[d], false)
}
this._max = a.max;
this._min = a.min || 0;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this
}, removeData: function () {
}, setDataMax: function (a) {
this._max = a;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this
}, setDataMin: function (a) {
this._min = a;
this._onExtremaChange();
this._coordinator.emit("renderall", this._getInternalData());
return this
}, setCoordinator: function (a) {
this._coordinator = a
}, _getInternalData: function () {
return {max: this._max, min: this._min, data: this._data, radi: this._radi}
}, getData: function () {
return this._unOrganizeData()
}
};
return b
}();
var c = function i() {
var a = function (a) {
var b = a.gradient || a.defaultGradient;
var c = document.createElement("canvas");
var d = c.getContext("2d");
c.width = 256;
c.height = 1;
var e = d.createLinearGradient(0, 0, 256, 1);
for (var f in b) {
e.addColorStop(f, b[f])
}
d.fillStyle = e;
d.fillRect(0, 0, 256, 1);
return d.getImageData(0, 0, 256, 1).data
};
var b = function (a, b) {
var c = document.createElement("canvas");
var d = c.getContext("2d");
var e = a;
var f = a;
c.width = c.height = a * 2;
if (b == 1) {
d.beginPath();
d.arc(e, f, a, 0, 2 * Math.PI, false);
d.fillStyle = "rgba(0,0,0,1)";
d.fill()
} else {
var g = d.createRadialGradient(e, f, a * b, e, f, a);
g.addColorStop(0, "rgba(0,0,0,1)");
g.addColorStop(1, "rgba(0,0,0,0)");
d.fillStyle = g;
d.fillRect(0, 0, 2 * a, 2 * a)
}
return c
};
var c = function (a) {
var b = [];
var c = a.min;
var d = a.max;
var e = a.radi;
var a = a.data;
var f = Object.keys(a);
var g = f.length;
while (g--) {
var h = f[g];
var i = Object.keys(a[h]);
var j = i.length;
while (j--) {
var k = i[j];
var l = a[h][k];
var m = e[h][k];
b.push({x: h, y: k, value: l, radius: m})
}
}
return {min: c, max: d, data: b}
};
function d(b) {
var c = b.container;
var d = this.shadowCanvas = document.createElement("canvas");
var e = this.canvas = b.canvas || document.createElement("canvas");
var f = this._renderBoundaries = [1e4, 1e4, 0, 0];
var g = getComputedStyle(b.container) || {};
e.className = "heatmap-canvas";
this._width = e.width = d.width = +g.width.replace(/px/, "");
this._height = e.height = d.height = +g.height.replace(/px/, "");
this.shadowCtx = d.getContext("2d");
this.ctx = e.getContext("2d");
e.style.cssText = d.style.cssText = "position:absolute;left:0;top:0;";
c.style.position = "relative";
c.appendChild(e);
this._palette = a(b);
this._templates = {};
this._setStyles(b)
}
d.prototype = {
renderPartial: function (a) {
this._drawAlpha(a);
this._colorize()
}, renderAll: function (a) {
this._clear();
this._drawAlpha(c(a));
this._colorize()
}, _updateGradient: function (b) {
this._palette = a(b)
}, updateConfig: function (a) {
if (a["gradient"]) {
this._updateGradient(a)
}
this._setStyles(a)
}, setDimensions: function (a, b) {
this._width = a;
this._height = b;
this.canvas.width = this.shadowCanvas.width = a;
this.canvas.height = this.shadowCanvas.height = b
}, _clear: function () {
this.shadowCtx.clearRect(0, 0, this._width, this._height);
this.ctx.clearRect(0, 0, this._width, this._height)
}, _setStyles: function (a) {
this._blur = a.blur == 0 ? 0 : a.blur || a.defaultBlur;
if (a.backgroundColor) {
this.canvas.style.backgroundColor = a.backgroundColor
}
this._opacity = (a.opacity || 0) * 255;
this._maxOpacity = (a.maxOpacity || a.defaultMaxOpacity) * 255;
this._minOpacity = (a.minOpacity || a.defaultMinOpacity) * 255;
this._useGradientOpacity = !!a.useGradientOpacity
}, _drawAlpha: function (a) {
var c = this._min = a.min;
var d = this._max = a.max;
var a = a.data || [];
var e = a.length;
var f = 1 - this._blur;
while (e--) {
var g = a[e];
var h = g.x;
var i = g.y;
var j = g.radius;
var k = Math.min(g.value, d);
var l = h - j;
var m = i - j;
var n = this.shadowCtx;
var o;
if (!this._templates[j]) {
this._templates[j] = o = b(j, f)
} else {
o = this._templates[j]
}
n.globalAlpha = (k - c) / (d - c);
n.drawImage(o, l, m);
if (l < this._renderBoundaries[0]) {
this._renderBoundaries[0] = l
}
if (m < this._renderBoundaries[1]) {
this._renderBoundaries[1] = m
}
if (l + 2 * j > this._renderBoundaries[2]) {
this._renderBoundaries[2] = l + 2 * j
}
if (m + 2 * j > this._renderBoundaries[3]) {
this._renderBoundaries[3] = m + 2 * j
}
}
}, _colorize: function () {
var a = this._renderBoundaries[0];
var b = this._renderBoundaries[1];
var c = this._renderBoundaries[2] - a;
var d = this._renderBoundaries[3] - b;
var e = this._width;
var f = this._height;
var g = this._opacity;
var h = this._maxOpacity;
var i = this._minOpacity;
var j = this._useGradientOpacity;
if (a < 0) {
a = 0
}
if (b < 0) {
b = 0
}
if (a + c > e) {
c = e - a
}
if (b + d > f) {
d = f - b
}
var k = this.shadowCtx.getImageData(a, b, c, d);
var l = k.data;
var m = l.length;
var n = this._palette;
for (var o = 3; o < m; o += 4) {
var p = l[o];
var q = p * 4;
if (!q) {
continue
}
var r;
if (g > 0) {
r = g
} else {
if (p < h) {
if (p < i) {
r = i
} else {
r = p
}
} else {
r = h
}
}
l[o - 3] = n[q];
l[o - 2] = n[q + 1];
l[o - 1] = n[q + 2];
l[o] = j ? n[q + 3] : r
}
k.data = l;
this.ctx.putImageData(k, a, b);
this._renderBoundaries = [1e3, 1e3, 0, 0]
}, getValueAt: function (a) {
var b;
var c = this.shadowCtx;
var d = c.getImageData(a.x, a.y, 1, 1);
var e = d.data[3];
var f = this._max;
var g = this._min;
b = Math.abs(f - g) * (e / 255) >> 0;
return b
}, getDataURL: function () {
return this.canvas.toDataURL()
}
};
return d
}();
var d = function j() {
var b = false;
if (a["defaultRenderer"] === "canvas2d") {
b = c
}
return b
}();
var e = {
merge: function () {
var a = {};
var b = arguments.length;
for (var c = 0; c < b; c++) {
var d = arguments[c];
for (var e in d) {
a[e] = d[e]
}
}
return a
}
};
var f = function k() {
var c = function h() {
function a() {
this.cStore = {}
}
a.prototype = {
on: function (a, b, c) {
var d = this.cStore;
if (!d[a]) {
d[a] = []
}
d[a].push(function (a) {
return b.call(c, a)
})
}, emit: function (a, b) {
var c = this.cStore;
if (c[a]) {
var d = c[a].length;
for (var e = 0; e < d; e++) {
var f = c[a][e];
f(b)
}
}
}
};
return a
}();
var f = function (a) {
var b = a._renderer;
var c = a._coordinator;
var d = a._store;
c.on("renderpartial", b.renderPartial, b);
c.on("renderall", b.renderAll, b);
c.on("extremachange", function (b) {
a._config.onExtremaChange && a._config.onExtremaChange({
min: b.min,
max: b.max,
gradient: a._config["gradient"] || a._config["defaultGradient"]
})
});
d.setCoordinator(c)
};
function g() {
var g = this._config = e.merge(a, arguments[0] || {});
this._coordinator = new c;
if (g["plugin"]) {
var h = g["plugin"];
if (!a.plugins[h]) {
throw new Error("Plugin '" + h + "' not found. Maybe it was not registered.")
} else {
var i = a.plugins[h];
this._renderer = new i.renderer(g);
this._store = new i.store(g)
}
} else {
this._renderer = new d(g);
this._store = new b(g)
}
f(this)
}
g.prototype = {
addData: function () {
this._store.addData.apply(this._store, arguments);
return this
}, removeData: function () {
this._store.removeData && this._store.removeData.apply(this._store, arguments);
return this
}, setData: function () {
this._store.setData.apply(this._store, arguments);
return this
}, setDataMax: function () {
this._store.setDataMax.apply(this._store, arguments);
return this
}, setDataMin: function () {
this._store.setDataMin.apply(this._store, arguments);
return this
}, configure: function (a) {
this._config = e.merge(this._config, a);
this._renderer.updateConfig(this._config);
this._coordinator.emit("renderall", this._store._getInternalData());
return this
}, repaint: function () {
this._coordinator.emit("renderall", this._store._getInternalData());
return this
}, getData: function () {
return this._store.getData()
}, getDataURL: function () {
return this._renderer.getDataURL()
}, getValueAt: function (a) {
if (this._store.getValueAt) {
return this._store.getValueAt(a)
} else if (this._renderer.getValueAt) {
return this._renderer.getValueAt(a)
} else {
return null
}
}
};
return g
}();
var g = {
create: function (a) {
return new f(a)
}, register: function (b, c) {
a.plugins[b] = c
}
};
return g
});
\ No newline at end of file
src/js/Heatmaplntensity.js 0 → 100644
/*
* Cesium 热力图主类
* @Author: Wang jianLei
* @Date: 2022-10-20 15:12:27
* @Last Modified by: Wang JianLei
* @Last Modified time: 2022-10-23 22:53:01
*/
import { Intensity, Canvas } from "./Intensity";
const Cesium = window.Cesium;
class HeatmapIntensity {
constructor(viewer, option = {}) {
if (!viewer) throw new Error("no viewer object!");
this._viewer = viewer;
this._min = option.min || 0; //最小值
this._max = option.max || 100; //最大值
this._size = option.size || 20; //光圈大小，像素值
this._result = undefined; //热力图结果
this._canvas = undefined; //离屏canvas
}
get min() {
return this._min;
}
set min(val) {
this._min = val;
this.updateHeatmap(this._result.canvasData);
}
get max() {
return this._max;
}
set max(val) {
this._max = val;
this.updateHeatmap(this._result.canvasData);
}
get size() {
return this._size;
}
set size(val) {
this._size = val;
this.updateHeatmap(this._result.canvasData);
}
get result() {
return this._result;
}
/**
* 创建热力图对象
* @param {*} box 范围对象，经纬度值-{west,south,east,north}
* @param {*} data 待绘制热力图的数据-[{x1,y1,value1},{x2,y2,value2},...]
* @returns 热力图结果对象
*/
createHeatmap(box, data) {
const mercator_WestSouth = this.WGS84ToWebMercator(box.west, box.south, 0); //左下位置（墨卡托）
const mercator_EastNorth = this.WGS84ToWebMercator(box.east, box.north, 0); //右上位置（墨卡托）
const diffDegrees_X = mercator_EastNorth.x - mercator_WestSouth.x;
const diffDegrees_Y = mercator_EastNorth.y - mercator_WestSouth.y;
const diffMax = Math.max(diffDegrees_X, diffDegrees_Y);
let multiple = diffMax / 300; //适当扩大倍数，以便绘制canvas
const width = Math.ceil(diffDegrees_X / multiple);
const height = Math.ceil(diffDegrees_Y / multiple);
this.mercator_WestSouth = mercator_WestSouth;
this.mercator_EastNorth = mercator_EastNorth;
this.diffDegrees_X = diffDegrees_X;
this.diffDegrees_Y = diffDegrees_Y;
let canvasData = [];
data.forEach((element) => {
const curMercator = this.WGS84ToWebMercator(
Number(element.x),
Number(element.y),
0
);
const per_X = (curMercator.x - mercator_WestSouth.x) / diffDegrees_X;
const currentPix_X = Math.ceil(per_X * width);
const per_Y = (curMercator.y - mercator_WestSouth.y) / diffDegrees_Y;
const currentPix_Y = Math.ceil(per_Y * height);
const currentValue = Number(element.value);
canvasData.push({
x: currentPix_X,
y: height - currentPix_Y - 1,
value: currentValue,
});
});
let canvas = new Canvas(width, height);
let context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
let circle = this.createCircle(this._size);
let circleHalfWidth = circle.width / 2;
let circleHalfHeight = circle.height / 2;
// 按透明度分类
let dataOrderByAlpha = {};
canvasData.forEach((item) => {
let alpha =
item.value < this._min
? 0
: Math.min(1, item.value / this._max).toFixed(2);
dataOrderByAlpha[alpha] = dataOrderByAlpha[alpha] || [];
dataOrderByAlpha[alpha].push(item);
});
// 绘制不同透明度的圆形
for (let i in dataOrderByAlpha) {
if (isNaN(i)) continue;
let _data = dataOrderByAlpha[i];
context.beginPath();
context.globalAlpha = i;
_data.forEach((item) => {
context.drawImage(
circle,
item.x - circleHalfWidth,
item.y - circleHalfHeight
);
});
}
// 圆形着色
let intensity = new Intensity();
let colored = context.getImageData(
0,
0,
context.canvas.width,
context.canvas.height
);
const options = { min: 0, max: this._max, size: this._size };
this.colorize(options, colored.data, intensity.getImageData());
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.putImageData(colored, 0, 0);
let entity = this._viewer.entities.add({
name: "rectangle",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
box.west,
box.south,
box.east,
box.north
),
material: new Cesium.ImageMaterialProperty({
image: canvas,
transparent: true,
}),
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
this._canvas = canvas;
this._result = { box, data, canvasData, entity };
return this._result;
}
/**
* 更新热力图数据
* @param {*} data 待绘制热力图的数据-[{x1,y1,value1},{x2,y2,value2},...]
*/
setData(data) {
if (!this._result) {
return;
}
let canvasData = [];
const height = this._canvas.height;
const width = this._canvas.width;
data.forEach((element) => {
const curMercator = this.WGS84ToWebMercator(
Number(element.x),
Number(element.y),
0
);
const per_X =
(curMercator.x - this.mercator_WestSouth.x) / this.diffDegrees_X;
const currentPix_X = Math.ceil(per_X * width);
const per_Y =
(curMercator.y - this.mercator_WestSouth.y) / this.diffDegrees_Y;
const currentPix_Y = Math.ceil(per_Y * height);
const currentValue = Number(element.value);
canvasData.push({
x: currentPix_X,
y: height - currentPix_Y - 1,
value: currentValue,
});
});
this._result.data = data;
this._result.canvasData = canvasData;
this.updateHeatmap(canvasData);
}
/**
* 更新热力图
* @param {*} data 参考canvasData
* @returns 热力图结果对象
*/
updateHeatmap(data) {
let canvas = this._canvas;
let context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
let circle = this.createCircle(this._size);
let circleHalfWidth = circle.width / 2;
let circleHalfHeight = circle.height / 2;
// 按透明度分类
let dataOrderByAlpha = {};
data.forEach((item) => {
let alpha =
item.value < this._min
? 0
: Math.min(1, item.value / this._max).toFixed(2);
dataOrderByAlpha[alpha] = dataOrderByAlpha[alpha] || [];
dataOrderByAlpha[alpha].push(item);
});
// 绘制不同透明度的圆形
for (let i in dataOrderByAlpha) {
if (isNaN(i)) continue;
let _data = dataOrderByAlpha[i];
context.beginPath();
context.globalAlpha = i;
_data.forEach((item) => {
context.drawImage(
circle,
item.x - circleHalfWidth,
item.y - circleHalfHeight
);
});
}
// 圆形着色
let intensity = new Intensity();
let colored = context.getImageData(
0,
0,
context.canvas.width,
context.canvas.height
);
const options = { min: 0, max: this._max, size: this._size };
this.colorize(options, colored.data, intensity.getImageData());
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.putImageData(colored, 0, 0);
this._result.entity.rectangle.material = new Cesium.ImageMaterialProperty({
image: canvas,
transparent: true,
});
return this._result;
}
createCircle(size) {
let shadowBlur = size / 2;
let r2 = size + shadowBlur;
let offsetDistance = 10000;
let circle = new Canvas(r2 * 2, r2 * 2);
let context = circle.getContext("2d");
context.shadowBlur = shadowBlur;
context.shadowColor = "black";
context.shadowOffsetX = context.shadowOffsetY = offsetDistance;
context.beginPath();
context.arc(
r2 - offsetDistance,
r2 - offsetDistance,
size,
0,
Math.PI * 2,
true
);
context.closePath();
context.fill();
return circle;
}
colorize(options, pixels, gradient) {
let max = options.max;
let min = options.min;
let diff = max - min;
let range = options.range || null;
let jMin = 0;
let jMax = 1024;
if (range && range.length === 2) {
jMin = ((range[0] - min) / diff) * 1024;
}
if (range && range.length === 2) {
jMax = ((range[1] - min) / diff) * 1024;
}
let maxOpacity = options.maxOpacity || 0.8;
for (let i = 3, len = pixels.length, j; i < len; i += 4) {
j = pixels[i] * 4; // get gradient color from opacity value
if (pixels[i] / 256 > maxOpacity) {
pixels[i] = 256 * maxOpacity;
}
if (j && j >= jMin && j <= jMax) {
pixels[i - 3] = gradient[j];
pixels[i - 2] = gradient[j + 1];
pixels[i - 1] = gradient[j + 2];
} else {
pixels[i] = 0;
}
}
}
WGS84ToWebMercator(lng, lat, height) {
let mercator = {};
let x = (lng * 20037508.34) / 180;
let y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180);
y = (y * 20037508.34) / 180;
mercator.x = x;
mercator.y = y;
mercator.z = height;
return mercator;
}
clearAll() {
this._result && this._viewer.entities.remove(this._result.entity);
this._result = undefined;
}
}
export default HeatmapIntensity;
\ No newline at end of file
src/js/heatmap.js 0 → 100644
/*
* heatmap.js v2.0.5 | JavaScript Heatmap Library
*
* Copyright 2008-2016 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
* Dual licensed under MIT and Beerware license
*
* :: 2016-09-05 01:16
*/
;(function (name, context, factory) {
// Supports UMD. AMD, CommonJS/Node.js and browser context
if (typeof module !== "undefined" && module.exports) {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define(factory);
} else {
context[name] = factory();
}
})("h337", this, function () {
// Heatmap Config stores default values and will be merged with instance config
var HeatmapConfig = {
defaultRadius: 40,
defaultRenderer: 'canvas2d',
defaultGradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
defaultMaxOpacity: 1,
defaultMinOpacity: 0,
defaultBlur: .85,
defaultXField: 'x',
defaultYField: 'y',
defaultValueField: 'value',
plugins: {}
};
var Store = (function StoreClosure() {
var Store = function Store(config) {
this._coordinator = {};
this._data = [];
this._radi = [];
this._min = 10;
this._max = 1;
this._xField = config['xField'] || config.defaultXField;
this._yField = config['yField'] || config.defaultYField;
this._valueField = config['valueField'] || config.defaultValueField;
if (config["radius"]) {
this._cfgRadius = config["radius"];
}
};
var defaultRadius = HeatmapConfig.defaultRadius;
Store.prototype = {
// when forceRender = false -> called from setData, omits renderall event
_organiseData: function(dataPoint, forceRender) {
var x = dataPoint[this._xField];
var y = dataPoint[this._yField];
var radi = this._radi;
var store = this._data;
var max = this._max;
var min = this._min;
var value = dataPoint[this._valueField] || 1;
var radius = dataPoint.radius || this._cfgRadius || defaultRadius;
if (!store[x]) {
store[x] = [];
radi[x] = [];
}
if (!store[x][y]) {
store[x][y] = value;
radi[x][y] = radius;
} else {
store[x][y] += value;
}
var storedVal = store[x][y];
if (storedVal > max) {
if (!forceRender) {
this._max = storedVal;
} else {
this.setDataMax(storedVal);
}
return false;
} else if (storedVal < min) {
if (!forceRender) {
this._min = storedVal;
} else {
this.setDataMin(storedVal);
}
return false;
} else {
return {
x: x,
y: y,
value: value,
radius: radius,
min: min,
max: max
};
}
},
_unOrganizeData: function() {
var unorganizedData = [];
var data = this._data;
var radi = this._radi;
for (var x in data) {
for (var y in data[x]) {
unorganizedData.push({
x: x,
y: y,
radius: radi[x][y],
value: data[x][y]
});
}
}
return {
min: this._min,
max: this._max,
data: unorganizedData
};
},
_onExtremaChange: function() {
this._coordinator.emit('extremachange', {
min: this._min,
max: this._max
});
},
addData: function() {
if (arguments[0].length > 0) {
var dataArr = arguments[0];
var dataLen = dataArr.length;
while (dataLen--) {
this.addData.call(this, dataArr[dataLen]);
}
} else {
// add to store
var organisedEntry = this._organiseData(arguments[0], true);
if (organisedEntry) {
// if it's the first datapoint initialize the extremas with it
if (this._data.length === 0) {
this._min = this._max = organisedEntry.value;
}
this._coordinator.emit('renderpartial', {
min: this._min,
max: this._max,
data: [organisedEntry]
});
}
}
return this;
},
setData: function(data) {
var dataPoints = data.data;
var pointsLen = dataPoints.length;
// reset data arrays
this._data = [];
this._radi = [];
for(var i = 0; i < pointsLen; i++) {
this._organiseData(dataPoints[i], false);
}
this._max = data.max;
this._min = data.min || 0;
this._onExtremaChange();
this._coordinator.emit('renderall', this._getInternalData());
return this;
},
removeData: function() {
// TODO: implement
},
setDataMax: function(max) {
this._max = max;
this._onExtremaChange();
this._coordinator.emit('renderall', this._getInternalData());
return this;
},
setDataMin: function(min) {
this._min = min;
this._onExtremaChange();
this._coordinator.emit('renderall', this._getInternalData());
return this;
},
setCoordinator: function(coordinator) {
this._coordinator = coordinator;
},
_getInternalData: function() {
return {
max: this._max,
min: this._min,
data: this._data,
radi: this._radi
};
},
getData: function() {
return this._unOrganizeData();
}/*,
TODO: rethink.
getValueAt: function(point) {
var value;
var radius = 100;
var x = point.x;
var y = point.y;
var data = this._data;
if (data[x] && data[x][y]) {
return data[x][y];
} else {
var values = [];
// radial search for datapoints based on default radius
for(var distance = 1; distance < radius; distance++) {
var neighbors = distance * 2 +1;
var startX = x - distance;
var startY = y - distance;
for(var i = 0; i < neighbors; i++) {
for (var o = 0; o < neighbors; o++) {
if ((i == 0 || i == neighbors-1) || (o == 0 || o == neighbors-1)) {
if (data[startY+i] && data[startY+i][startX+o]) {
values.push(data[startY+i][startX+o]);
}
} else {
continue;
}
}
}
}
if (values.length > 0) {
return Math.max.apply(Math, values);
}
}
return false;
}*/
};
return Store;
})();
var Canvas2dRenderer = (function Canvas2dRendererClosure() {
var _getColorPalette = function(config) {
var gradientConfig = config.gradient || config.defaultGradient;
var paletteCanvas = document.createElement('canvas');
var paletteCtx = paletteCanvas.getContext('2d');
paletteCanvas.width = 256;
paletteCanvas.height = 1;
var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
for (var key in gradientConfig) {
gradient.addColorStop(key, gradientConfig[key]);
}
paletteCtx.fillStyle = gradient;
paletteCtx.fillRect(0, 0, 256, 1);
return paletteCtx.getImageData(0, 0, 256, 1).data;
};
var _getPointTemplate = function(radius, blurFactor) {
var tplCanvas = document.createElement('canvas');
var tplCtx = tplCanvas.getContext('2d');
var x = radius;
var y = radius;
tplCanvas.width = tplCanvas.height = radius*2;
if (blurFactor == 1) {
tplCtx.beginPath();
tplCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
tplCtx.fillStyle = 'rgba(0,0,0,1)';
tplCtx.fill();
} else {
var gradient = tplCtx.createRadialGradient(x, y, radius*blurFactor, x, y, radius);
gradient.addColorStop(0, 'rgba(0,0,0,1)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
tplCtx.fillStyle = gradient;
tplCtx.fillRect(0, 0, 2*radius, 2*radius);
}
return tplCanvas;
};
var _prepareData = function(data) {
var renderData = [];
var min = data.min;
var max = data.max;
var radi = data.radi;
var data = data.data;
var xValues = Object.keys(data);
var xValuesLen = xValues.length;
while(xValuesLen--) {
var xValue = xValues[xValuesLen];
var yValues = Object.keys(data[xValue]);
var yValuesLen = yValues.length;
while(yValuesLen--) {
var yValue = yValues[yValuesLen];
var value = data[xValue][yValue];
var radius = radi[xValue][yValue];
renderData.push({
x: xValue,
y: yValue,
value: value,
radius: radius
});
}
}
return {
min: min,
max: max,
data: renderData
};
};
function Canvas2dRenderer(config) {
var container = config.container;
var shadowCanvas = this.shadowCanvas = document.createElement('canvas');
var canvas = this.canvas = config.canvas || document.createElement('canvas');
var renderBoundaries = this._renderBoundaries = [10000, 10000, 0, 0];
var computed = getComputedStyle(config.container) || {};
canvas.className = 'heatmap-canvas';
this._width = canvas.width = shadowCanvas.width = config.width || +(computed.width.replace(/px/,''));
this._height = canvas.height = shadowCanvas.height = config.height || +(computed.height.replace(/px/,''));
this.shadowCtx = shadowCanvas.getContext('2d');
this.ctx = canvas.getContext('2d');
// @TODO:
// conditional wrapper
canvas.style.cssText = shadowCanvas.style.cssText = 'position:absolute;left:0;top:0;';
container.style.position = 'relative';
container.appendChild(canvas);
this._palette = _getColorPalette(config);
this._templates = {};
this._setStyles(config);
};
Canvas2dRenderer.prototype = {
renderPartial: function(data) {
if (data.data.length > 0) {
this._drawAlpha(data);
this._colorize();
}
},
renderAll: function(data) {
// reset render boundaries
this._clear();
if (data.data.length > 0) {
this._drawAlpha(_prepareData(data));
this._colorize();
}
},
_updateGradient: function(config) {
this._palette = _getColorPalette(config);
},
updateConfig: function(config) {
if (config['gradient']) {
this._updateGradient(config);
}
this._setStyles(config);
},
setDimensions: function(width, height) {
this._width = width;
this._height = height;
this.canvas.width = this.shadowCanvas.width = width;
this.canvas.height = this.shadowCanvas.height = height;
},
_clear: function() {
this.shadowCtx.clearRect(0, 0, this._width, this._height);
this.ctx.clearRect(0, 0, this._width, this._height);
},
_setStyles: function(config) {
this._blur = (config.blur == 0)?0:(config.blur || config.defaultBlur);
if (config.backgroundColor) {
this.canvas.style.backgroundColor = config.backgroundColor;
}
this._width = this.canvas.width = this.shadowCanvas.width = config.width || this._width;
this._height = this.canvas.height = this.shadowCanvas.height = config.height || this._height;
this._opacity = (config.opacity || 0) * 255;
this._maxOpacity = (config.maxOpacity || config.defaultMaxOpacity) * 255;
this._minOpacity = (config.minOpacity || config.defaultMinOpacity) * 255;
this._useGradientOpacity = !!config.useGradientOpacity;
},
_drawAlpha: function(data) {
var min = this._min = data.min;
var max = this._max = data.max;
var data = data.data || [];
var dataLen = data.length;
// on a point basis?
var blur = 1 - this._blur;
while(dataLen--) {
var point = data[dataLen];
var x = point.x;
var y = point.y;
var radius = point.radius;
// if value is bigger than max
// use max as value
var value = Math.min(point.value, max);
var rectX = x - radius;
var rectY = y - radius;
var shadowCtx = this.shadowCtx;
var tpl;
if (!this._templates[radius]) {
this._templates[radius] = tpl = _getPointTemplate(radius, blur);
} else {
tpl = this._templates[radius];
}
// value from minimum / value range
// => [0, 1]
var templateAlpha = (value-min)/(max-min);
// this fixes #176: small values are not visible because globalAlpha < .01 cannot be read from imageData
shadowCtx.globalAlpha = templateAlpha < .01 ? .01 : templateAlpha;
shadowCtx.drawImage(tpl, rectX, rectY);
// update renderBoundaries
if (rectX < this._renderBoundaries[0]) {
this._renderBoundaries[0] = rectX;
}
if (rectY < this._renderBoundaries[1]) {
this._renderBoundaries[1] = rectY;
}
if (rectX + 2*radius > this._renderBoundaries[2]) {
this._renderBoundaries[2] = rectX + 2*radius;
}
if (rectY + 2*radius > this._renderBoundaries[3]) {
this._renderBoundaries[3] = rectY + 2*radius;
}
}
},
_colorize: function() {
var x = this._renderBoundaries[0];
var y = this._renderBoundaries[1];
var width = this._renderBoundaries[2] - x;
var height = this._renderBoundaries[3] - y;
var maxWidth = this._width;
var maxHeight = this._height;
var opacity = this._opacity;
var maxOpacity = this._maxOpacity;
var minOpacity = this._minOpacity;
var useGradientOpacity = this._useGradientOpacity;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x + width > maxWidth) {
width = maxWidth - x;
}
if (y + height > maxHeight) {
height = maxHeight - y;
}
var img = this.shadowCtx.getImageData(x, y, width, height);
var imgData = img.data;
var len = imgData.length;
var palette = this._palette;
for (var i = 3; i < len; i+= 4) {
var alpha = imgData[i];
var offset = alpha * 4;
if (!offset) {
continue;
}
var finalAlpha;
if (opacity > 0) {
finalAlpha = opacity;
} else {
if (alpha < maxOpacity) {
if (alpha < minOpacity) {
finalAlpha = minOpacity;
} else {
finalAlpha = alpha;
}
} else {
finalAlpha = maxOpacity;
}
}
imgData[i-3] = palette[offset];
imgData[i-2] = palette[offset + 1];
imgData[i-1] = palette[offset + 2];
imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;
}
img.data = imgData;
this.ctx.putImageData(img, x, y);
this._renderBoundaries = [1000, 1000, 0, 0];
},
getValueAt: function(point) {
var value;
var shadowCtx = this.shadowCtx;
var img = shadowCtx.getImageData(point.x, point.y, 1, 1);
var data = img.data[3];
var max = this._max;
var min = this._min;
value = (Math.abs(max-min) * (data/255)) >> 0;
return value;
},
getDataURL: function() {
return this.canvas.toDataURL();
}
};
return Canvas2dRenderer;
})();
var Renderer = (function RendererClosure() {
var rendererFn = false;
if (HeatmapConfig['defaultRenderer'] === 'canvas2d') {
rendererFn = Canvas2dRenderer;
}
return rendererFn;
})();
var Util = {
merge: function() {
var merged = {};
var argsLen = arguments.length;
for (var i = 0; i < argsLen; i++) {
var obj = arguments[i]
for (var key in obj) {
merged[key] = obj[key];
}
}
return merged;
}
};
// Heatmap Constructor
var Heatmap = (function HeatmapClosure() {
var Coordinator = (function CoordinatorClosure() {
function Coordinator() {
this.cStore = {};
};
Coordinator.prototype = {
on: function(evtName, callback, scope) {
var cStore = this.cStore;
if (!cStore[evtName]) {
cStore[evtName] = [];
}
cStore[evtName].push((function(data) {
return callback.call(scope, data);
}));
},
emit: function(evtName, data) {
var cStore = this.cStore;
if (cStore[evtName]) {
var len = cStore[evtName].length;
for (var i=0; i<len; i++) {
var callback = cStore[evtName][i];
callback(data);
}
}
}
};
return Coordinator;
})();
var _connect = function(scope) {
var renderer = scope._renderer;
var coordinator = scope._coordinator;
var store = scope._store;
coordinator.on('renderpartial', renderer.renderPartial, renderer);
coordinator.on('renderall', renderer.renderAll, renderer);
coordinator.on('extremachange', function(data) {
scope._config.onExtremaChange &&
scope._config.onExtremaChange({
min: data.min,
max: data.max,
gradient: scope._config['gradient'] || scope._config['defaultGradient']
});
});
store.setCoordinator(coordinator);
};
function Heatmap() {
var config = this._config = Util.merge(HeatmapConfig, arguments[0] || {});
this._coordinator = new Coordinator();
if (config['plugin']) {
var pluginToLoad = config['plugin'];
if (!HeatmapConfig.plugins[pluginToLoad]) {
throw new Error('Plugin \''+ pluginToLoad + '\' not found. Maybe it was not registered.');
} else {
var plugin = HeatmapConfig.plugins[pluginToLoad];
// set plugin renderer and store
this._renderer = new plugin.renderer(config);
this._store = new plugin.store(config);
}
} else {
this._renderer = new Renderer(config);
this._store = new Store(config);
}
_connect(this);
};
// @TODO:
// add API documentation
Heatmap.prototype = {
addData: function() {
this._store.addData.apply(this._store, arguments);
return this;
},
removeData: function() {
this._store.removeData && this._store.removeData.apply(this._store, arguments);
return this;
},
setData: function() {
this._store.setData.apply(this._store, arguments);
return this;
},
setDataMax: function() {
this._store.setDataMax.apply(this._store, arguments);
return this;
},
setDataMin: function() {
this._store.setDataMin.apply(this._store, arguments);
return this;
},
configure: function(config) {
this._config = Util.merge(this._config, config);
this._renderer.updateConfig(this._config);
this._coordinator.emit('renderall', this._store._getInternalData());
return this;
},
repaint: function() {
this._coordinator.emit('renderall', this._store._getInternalData());
return this;
},
getData: function() {
return this._store.getData();
},
getDataURL: function() {
return this._renderer.getDataURL();
},
getValueAt: function(point) {
if (this._store.getValueAt) {
return this._store.getValueAt(point);
} else if (this._renderer.getValueAt) {
return this._renderer.getValueAt(point);
} else {
return null;
}
}
};
return Heatmap;
})();
// core
var heatmapFactory = {
create: function(config) {
return new Heatmap(config);
},
register: function(pluginKey, plugin) {
HeatmapConfig.plugins[pluginKey] = plugin;
}
};
return heatmapFactory;
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment