使用openlayers框架初始化地图(而不是用高德的原生):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.导入ol依赖 --> <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script> <style> .ol-zoomslider { top: 7.5em; } </style> </head> <body> <!-- 2.设置地图的挂载点 --> <div id="map"> </div> <script> // 3.初始化一个高德图层 const gaode = new ol.layer.Tile({ title: "高德地图", source: new ol.source.XYZ({ url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', wrapX: false }) }); // 4.初始化openlayer地图 const map = new ol.Map({ // 将初始化的地图设置到id为map的DOM元素上 target: "map", // 设置图层 layers: [gaode], view: new ol.View({ center: [114.30, 30.50], // 设置地图放大级别 zoom: 14, projection: "EPSG:4326" }) }) // 视图跳转控件 const ZoomToExtent = new ol.control.ZoomToExtent({ extent: [126.4, 45.7, 126.7, 45.9] }) map.addControl(ZoomToExtent) // 放大缩小控件 const zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider) // 全屏控件 const fullScreen = new ol.control.FullScreen(); map.addControl(fullScreen); // 1.通用样式信息和几何信息构建点要素 // 几何 const point = new ol.Feature({ geometry: new ol.geom.Point([126.5350, 45.8021]) }); let style = new ol.style.Style({ // image属性设置点要素的样式 image: new ol.style.Circle({ // radius设置点的半径 单位degree radius: 10, fill: new ol.style.Fill({ color: "#ff2d51" }), stroke:new ol.style.Stroke({ width:2, color:"#333" }) }) }) point.setStyle(style); // 2.将要素添加到矢量数据源 let source = new ol.source.Vector({ features: [point] }) // 3.将矢量数据源添加到矢量图层 let layer = new ol.layer.Vector({ source }) // 4.添加矢量图层到地图容器 map.addLayer(layer) </script> </body> </html>
geojson设置点:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.导入ol依赖 --> <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script> <style> .ol-zoomslider { top: 7.5em; } </style> </head> <body> <!-- 2.设置地图的挂载点 --> <div id="map"> </div> <script> // 3.初始化一个高德图层 const gaode = new ol.layer.Tile({ title: "高德地图", source: new ol.source.XYZ({ url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', wrapX: false }) }); // 4.初始化openlayer地图 const map = new ol.Map({ // 将初始化的地图设置到id为map的DOM元素上 target: "map", // 设置图层 layers: [gaode], view: new ol.View({ center: [114.30, 30.50], // 设置地图放大级别 zoom: 14, projection: "EPSG:4326" }) }) // 视图跳转控件 const ZoomToExtent = new ol.control.ZoomToExtent({ extent: [126.4, 45.7, 126.7, 45.9] }) map.addControl(ZoomToExtent) // 放大缩小控件 const zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider) // 全屏控件 const fullScreen = new ol.control.FullScreen(); map.addControl(fullScreen); // 创建geojson数据 var data = { type:"FeatureCollection", features:[ { type:"Feature", geometry:{ type:"Point", coordinates:[114.30,30.50] } } ] } // 将数据添加到矢量数据源中 var source = new ol.source.Vector({ features:new ol.format.GeoJSON().readFeatures(data) }) // 设置矢量图层 var layer = new ol.layer.Vector({ source }) const style = new ol.style.Style({ image:new ol.style.Circle({ radius:10, fill:new ol.style.Fill({ color:"#ff2d51" }), stroke:new ol.style.Stroke({ color:"#333" }) }) }) layer.setStyle(style) // 添加矢量图层到地图容器 map.addLayer(layer) </script> </body> </html>
geojson设置线要素:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.导入ol依赖 --> <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script> </head> <body> <!-- 2.设置地图的挂载点 --> <div id="map"> </div> <script> // 3.初始化一个高德图层 const gaode = new ol.layer.Tile({ title: "高德地图", source: new ol.source.XYZ({ url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', wrapX: false }) }); // 4.初始化openlayer地图 const map = new ol.Map({ // 将初始化的地图设置到id为map的DOM元素上 target: "map", // 设置图层 layers: [gaode], view: new ol.View({ center: [114.30, 30.50], // 设置地图放大级别 zoom: 14, projection: "EPSG:4326" }) }) // 区域要素 // 设置line要素的geojson数据 var data = { type:"FeatureCollection", features:[{ type:"Feature", geometry:{ type:"LineString", coordinates:[ [114.30,30.50], [116,30.31] ] } },{ type:"Feature", geometry:{ type:"Polygon", coordinates:[[ [114.30,30.50], [116,30.50], [116,30] ]] } }] } // 设置矢量数据源读取数据 let source = new ol.source.Vector({ features:new ol.format.GeoJSON().readFeatures(data) }) // 设置矢量图层 let layer = new ol.layer.Vector({ source }) let style = new ol.style.Style({ // stroke线设置样式 stroke: new ol.style.Stroke({ color:"#ff2d51", width:3 }), fill:new ol.style.Fill({ color:"rgba(50,50,50,0.3)" }) }) layer.setStyle(style) // 添加到地图容器 map.addLayer(layer) </script> </body> </html>
加载本地的geojson数据:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.导入ol依赖 --> <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script> </head> <body> <!-- 2.设置地图的挂载点 --> <div id="map"> </div> <script> // 3.初始化一个高德图层 const gaode = new ol.layer.Tile({ title: "高德地图", source: new ol.source.XYZ({ url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', wrapX: false }) }); // 4.初始化openlayer地图 const map = new ol.Map({ // 将初始化的地图设置到id为map的DOM元素上 target: "map", // 设置图层 layers: [gaode], view: new ol.View({ center: [114.30, 30.50], // 设置地图放大级别 zoom: 14, projection: "EPSG:4326" }) }) // 设置矢量数据源加载geojson数据 var source = new ol.source.Vector({ url:"./data/map.geojson", format:new ol.format.GeoJSON() }) // 设置矢量图层 var layer = new ol.layer.Vector({ source }) const style = new ol.style.Style({ image:new ol.style.Circle({ radius:8, fill:new ol.style.Fill({ color:"#ff2d51" }) }) }) layer.setStyle(style) // map map.addLayer(layer) </script> </body> </html>
{ "type":"FeatureCollection", "features":[ { "type":"Feature", "geometry":{ "type":"Point", "coordinates":[ 114.30, 30.50 ] } } ] }