您好,我正在开发一款使用 leaflet.heat 库的应用程序。要使用它,必须按如下方式导入:import * as L from 'leaflet';import 'leaflet.heat';...// 然后就可以使用了...
您好,我正在开发一个使用该库的应用程序 leaflet.heat
。要使用它,必须按如下方式导入:
import * as L from 'leaflet';
import 'leaflet.heat';
...
// Then it can be used:
private addHeatmapToMap(heatmapData: L.HeatLatLngTuple[]) {
...
let heatmap = L.heatLayer(heatmapData, { radius: 10, max: 200, gradient: { 0.1: 'yellow', 0.4: 'orange', 0.6: 'red', 0.8: 'white' }, minOpacity: 0.8 });
...
}
使用时,此方法可按预期工作 ng serve
。但是,当构建应用程序以在 docker 容器中使用时, ng build --configuration production --output-path=/dist
其派生的功能 L.
依赖于 的导入 leaflet.heat
停止工作。
我的第一个猜测是,angular 在构建过程中删除了导入,因为在组件中没有直接使用该导入,但我不知道如何指示 angular 不这样做。
使用的版本为:
angular 18:
...
"leaflet": "^1.9.4",
"leaflet.heat": "^0.2.0",
...
"@types/leaflet": "^1.9.12",
"@types/leaflet.heat": "^0.2.4",
Dockerfile:
#################
# Build the app #
#################
FROM node:22-alpine AS build
WORKDIR /app
RUN npm install -g @angular/cli
COPY package.json package-lock.json ./
RUN npm install --fetch-timeout=600000
COPY . .
RUN ng build --configuration production --output-path=/dist
################
# Run in NGINX #
################
FROM nginx:alpine
COPY --from=build /dist/browser /usr/share/nginx/html
COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf
# When the container starts, replace the env.js with values from environment variables
CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/assets/environment/env.template.js > /usr/share/nginx/html/assets/environment/env.js && exec nginx -g 'daemon off;'"]