二维地图 Leaflet知识

第一步：插入渲染元素

1 <div id="cesiumContainer"></div>

第二步：添加样式

1 #cesiumContainer {
2     position: absolute;
3     width: 100%;
4     height: 100%;
5     z-index: 10;
6  }

第三步：创建地图

1 let map = L.map('cesiumContainer',{
2         center: [center_lat, center_lng],
3         crs: L.CRS.EPSG4326,
4         zoom: 8,
5         zoomControl: false, // 隐藏缩放按钮
6 });

第四步：添加底图

 1 let img_url = 'http://t{s}.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c';
 2 let cia_url = 'http://t{s}.tianditu.gov.cn/cia_c/wmts?&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c';
 3 this.tileLayer = L.tileLayer(img_url, {
 4         subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点，代码中不固定使用哪个节点的服务，而是随机决定从哪个节点请求服务，避免指定节点因故障等原因停止服务的风险
 5         minZoom: 2,
 6         maxZoom: 17,
 7         zoomOffset: 1
 8 }).addTo(map); // 影像图
 9 let labelTileLayer = L.tileLayer(cia_url, {
10         subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点，代码中不固定使用哪个节点的服务，而是随机决定从哪个节点请求服务，避免指定节点因故障等原因停止服务的风险
11         minZoom: 11,
12         maxZoom: 17,
13         zoomOffset: 1
14 }).addTo(map); // 文字注记图

第五步：定位到相应范围

1 let latlngs = [];
2 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]);
3 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.minx]);
4 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]);
5 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]);
6 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]);
7 var bound_Polygon = L.polyline(latlngs);
8 map.fitBounds(bound_Polygon.getBounds());

 添加marker

 1 let text = `<div><span></span><p>${name}${no}</p></div>`;
 2 let myIcon = L.divIcon({
 3   html: text,
 4   className: "labelMarker"
 5 });
 6 console.log("123", item);
 7 let circleMarker = L.marker(latlngs, {
 8   icon: myIcon,
 9   riseOnHover: true,
10   title: `${name} ${no}`
11 });
12 circleMarker.on('click', function(e) {
13   console.log('点击', $(circleMarker._icon).addClass('selectedMarker'));
14 })
15 stakeMarkerQidianArr.push(circleMarker);
circleMarker.on('mouseover', () => {
                $(circleMarker._icon).addClass('selectedMarker')
              })
              circleMarker.on('mouseout', () => {
                $(circleMarker._icon).removeClass('selectedMarker')
              })
mouseover 移入  
mouseout 移出
posted @ 2021-05-24 09:23  shuaibijian  阅读(288)  评论(0)    收藏  举报