邯郸营销网站建设公司哪家好,箱包网站设计,简历制作专业机构,电商平台运营方案使用 阿里云地理工具 获取相应的地理JSON数据#xff0c;用于对地图边界绘制。 如何使用leaflet#xff1f;
这里用HTML5进行操作#xff1b;
因为我是用的是Leaflet库#xff0c;所以要引入JavaScript 和 CSS 文件#xff08;可参考官网https://leafletjs.com/#x…使用 阿里云地理工具 获取相应的地理JSON数据用于对地图边界绘制。 如何使用leaflet
这里用HTML5进行操作
因为我是用的是Leaflet库所以要引入JavaScript 和 CSS 文件可参考官网https://leafletjs.com/ link relstylesheet hrefhttps://unpkg.com/leaflet1.7.1/dist/leaflet.cssintegritysha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7Acrossorigin /script srchttps://unpkg.com/leaflet1.7.1/dist/leaflet.jsintegritysha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwAcrossorigin/script 容器创建 div idmap/div 这里给容器设置宽100vw,高100vh;并清除默认的margin及padding值 style typetext/cssbody {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}/style 首先要有一个地图中心点以及缩放比例
这里以中国版图为例其中心点为北纬34°32′27.00″东经108°55′25.00″。
在此基础上声明 map 变量并使用 Leaflet map 对其进行初始化
const map L.map(map, {center: [35.8617, 104.1954],zoom: 3.5
});
其中L代表Leaflet的 JavaScript 库中所有的内容并且很多功能通过L进行扩展。
center代表其中心点经纬度
zoom为缩放比例
也可以使用setView()方法进行初始化 var map L.map(map).setView([35.8617, 104.1954], 6)
添加切片图层这将是 Leaflet 地图的基础图层。切片图层是通过服务器通过直接 URL 请求访问的一组切片。此切片图层将地理边界添加到地图中。
L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { attribution: © a hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/a contributors }).addTo(map);
也可以添加多个矢量图层的选项。将街景作为图层之一 const basemaps {StreetView: L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, {attribution: © a hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/a contributors}),Topography: L.tileLayer.wms(http://ows.mundialis.de/services/service?, {layers: TOPO-WMS}),Places: L.tileLayer.wms(http://ows.mundialis.de/services/service?, {layers: OSM-Overlay-WMS})
}
Leaflet 还提供了让用户控制要渲染的图层的功能。使用该功能我将在页面右上角添加一个选项菜单按钮让您选择要覆盖在地图上的三个图层中的哪一个
L.control.layers(basemaps).addTo(map);
设置wms为默认图层
basemaps.Places.addTo(map)
将开始的json数据在加载GeoJSON数据后可以通过feature对象获取到各省份的信息
可点击对应区域使其标注
L.geoJSON(geoJSON, {style: function (feature) {return {fillColor: green,weight: 2,opacity: 1,color: white,fillOpacity: 0.7};},onEachFeature: function (feature, layer) {// 添加省份名称标注layer.bindPopup(feature.properties.name);// 添加鼠标悬停效果layer.on(mouseover, function () {this.setStyle({fillOpacity: 1,});});layer.on(mouseout, function () {this.setStyle({fillOpacity: 0.7,});});layer.on(click, function () {this.setStyle({fillOpacity: 0.7,color: red,fillColor: orange})})}}).addTo(map); 至此
