angular2+leaflet地图操作
目录
angular2+leaflet地图操作
前言
本文是基于angular2和leaflet加载地图，完成撒点功能，假设读者已经安装完angular，本文将从leaflet的安装开始讲述。
插件安装
通过npm进行leaflet的安装：
npm i leaflet
API官网（https://leafletjs.com/reference-1.4.0.html）
由于要进行大量点的加载，所以在这里用到了leaflet-maskCanvas插件：
npm install leaflet-maskcanvas
具体安装方式见https://github.com/domoritz/leaflet-maskcanvas
同时还用到了esri-leaflet插件、leaflet.chinatmsproviders插件、proj4插件、proj4leaflet插件，安装如下：
npm install esri-leaflet –save （http://esri.github.io/esri-leaflet）
esri为WebGiS开发提供dojo与leaflet两种API
官网 : http://www.esri.com/
github：http://esri.github.io/
leaflet是轻量级的地图JS开源框架
相比dojo，leaflet更轻，也更好与jQuery框架一起使用
官网: http://leafletjs.com/
esri-leaflet是esri针对leaflet给出的WebGIS接口
官网: http://esri.github.io/esri-leaflet/
github: https://github.com/Esri/esri-leaflet
npm install proj4 （https://www.npmjs.com/package/proj4）
npm install proj4leaflet（https://www.npmjs.com/package/proj4leaflet）
npm i leaflet.chinatmsproviders (https://github.com/htoooth/Leaflet.ChineseTmsProviders)
插件引入
angular安装完以上插件之后，在对应的组件中引入：
import * as L from 'leaflet';
import 'leaflet-maskcanvas';
import 'proj4';
import 'proj4leaflet';
import 'leaflet.chinatmsproviders';
import { tiledMapLayer, dynamicMapLayer } from 'esri-leaflet';
创建地图，添加数据
- 创建地图
this.map = new L.Map(this.mapEl.nativeElement, {
zoom: 8,
center: [36.661418, 117.124674],
boxZoom: true,
zoomControl: false
});
2.加载高德地图（https://blog.csdn.net/GISuuser/article/details/77600052）
const Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
const Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
const Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);
this.map.addLayer(Gaodimage);
添加动态图层（http://esri.github.io/esri-leaflet/examples/）
const btsLayer = dynamicMapLayer(
{
url: url,
zIndex: 0,
position: 'behind',
pane: 'tilePane'
}
);
this.map.addLayer(btsLayer);
设置数据
_.forEach(tempData, (item, key) => {
pointsData = [];
const color = key === '3' ? [255, 255, 36] :
(key === '2' ? [255, 158, 0] :
(key === '1' ? [255, 0, 0] :
[0, 255, 0]));
this.coverageLayer[key] = L.TileLayer.maskCanvas({
opacity: 1,
radius: 1000,
color: 'rgb(' + color + ')',
noMask: true,
useAbsoluteRadius: true
});
item.forEach(data => {
pointsData.push([
data.latitude, data.longitude
]);
});
this.coverageLayer[key].setData(pointsData);
this.map.addLayer(this.coverageLayer[key]);
});
转载自：https://blog.csdn.net/mhydmx/article/details/87860917
