Image Vector Layer示例图
官方例子代码部分：
<!DOCTYPE html>
<html>
<head>
<title>Image Vector Layer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Stroke, Style, Text} from 'ol/style.js';
var style = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new Stroke({
color: '#319FD3',
width: 1
}),
text: new Text()
});
var map = new Map({
layers: [
new VectorLayer({
renderMode: 'image',
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
}),
style: function(feature) {
style.getText().setText(feature.get('name'));
return style;
}
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1
})
});
var featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: new Style({
stroke: new Stroke({
color: '#f00',
width: 1
}),
fill: new Fill({
color: 'rgba(255,0,0,0.1)'
})
})
});
var highlight;
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</body>
</html>
这部分代码是需要联网接入js的，不知道是不是我网的问题，反正就是连不上。最好是使用官网下载本地的js。坑爹的玩意，本地js又不能用import ，所以得改。改法官网上我也没看到有，大致我是这样猜想，可能会有错：
//把import 的注释掉
//import Map from 'ol/Map.js';
var map = new Map({})
这种Map直接在前面加ol-->var map = new ol.Map
//import View from 'ol/View.js';
这个也是跟Mpa一样，import 的是ol/View.js。把/换成点.
//import VectorLayer from 'ol/layer/Vector.js';
var featureOverlay = new VectorLayer({})
这种VectorLayer 和ol/layer/Vector.js不对称的，直接把VectorLayer 换成ol.layer.Vector
如var vectorLayer = new ol.layer.Vector({})
//import {Fill, Stroke, Style, Text} from 'ol/style.js';
var style = new Style({})
fill: new Fill({})
这种前面有｛｝的，也是直接每个加。
var style = new ol.style.Style({})
fill: new ol.style.Fill({})
改变完的代码大致如下：
<!DOCTYPE html>
<html>
<head>
<title>Vector Layer</title>
<link rel="stylesheet" href="js/ol.css" />
<script type="text/javascript" src="js/ol.js" ></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var style = new ol.style.Style({//显示的颜色
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',//边界颜色
width: 1 //边界线条粗细
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000'//字体颜色
}),
stroke: new ol.style.Stroke({
color: '#fff',//字体背景颜色
width: 1 //字体背景粗细
})
})
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/cn.json',
format: new ol.format.GeoJSON()
}),
style: function(feature) {
style.getText().setText(feature.get('name'));
return style;
}
});
var map = new ol.Map({
layers: [vectorLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
var highlightStyle = new ol.style.Style({//点击产出的颜色
stroke: new ol.style.Stroke({
color: '#B8860B', //点击边界颜色
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.1)'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#B8860B'
}),
stroke: new ol.style.Stroke({
color: '#B8860B',
width: 3
})
})
});
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector(),
map: map,
style: function(feature) {
highlightStyle.getText().setText(feature.get('name'));
return highlightStyle;
}
});
var highlight;
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
var info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.on('click', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('pointermove', function(evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</body>
</html>
不同区域渲染不同颜色示例：
var wafotownBeans = json.wafotownBeans;// 后台json的数据
//底图渲染，这个是为了显示边界，不是上色。
var vectorLayerBottom = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: '../OpenLayers-5.3.0/data/cn.json'
}),
style: function (feature, resolution) {
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "blue",
width: 1
}),
});
return [style]
}
});
var vectorLayer = new ol.layer.Vector({//数据图渲染，上色
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: '../OpenLayers-5.3.0/data/cn.json'
}),
style: function (feature, resolution) {
var id = feature.get("id");
for (var key of wafotownBeans) {
var stationCode = key.station_code;//编号
var code = key.code; // 颜色
var codeLast=code.substr(1,code.length-1);
var colorStr = null;
if (codeLast == "0") {
colorStr = "#FF0000"
} else if (codeLast == "1") {
colorStr = "white"
} else if (codeLast == "2") {
colorStr = "blue"
} else if (codeLast == "3") {
colorStr = "yellow"
} else if (codeLast == "4") {
colorStr = "orange"
} else if (codeLast == "5") {
colorStr = "red"
}
if (stationCode == id) {
style = new ol.style.Style({
fill: new ol.style.Fill({
color: "yellow"
}),
stroke: new ol.style.Stroke({
color: "blue",
width: 1
})
});
return [style]
}
}
}
});
var map = new ol.Map({// Map
layers : [vectorLayerBottom, vectorLayer],
target : 'map',
view : new ol.View({
center : [ 0, 0 ],
zoom : 1
})
});
还可以结合上面的官方例子，移动或者点击显示高亮详情等。
shp等格式转geojson：
上面的矢量图用到的是json格式，网上在线转的网站有很多，我比较常用的是：mapshaper
获取全国各地区json格式
网友评论